面经

2018-03-14

面试总结

先来看一篇文章吧致未来的实习生

自我介绍

你好，我叫xxx，就读XX专业，很高兴能得到这次面试的机会。我非常喜欢前端的各种新技术，对前端的现状也有一个比较宏观的了解。目前，我比较擅长使用 XX、XXX。如果公司因业务需求，我愿意去学习相应的前端技术！

在生活上，我待人真诚

* 有点难度的开发经历值得一说
* 面试：分析问题，再解决问题
* 把面试官往你熟悉的领域引导

面试结束

问技术方面面试官的问题
- 结合刚刚的面试，可以给我几点技术方面的建议吗
- 了解一下公司的前端大致在做哪些业务
- 了解一下公司前端团队的技术栈有哪些
- 后端主要用什么语言？
- 聊的不错的话，可以要一下联系方式
问 HR 的问题
- 薪水（税前税后月薪多少？一年十三薪？）
- 是否有补贴？（餐补？电脑补？）
- 上下班时间

忌问面试结果

HR 面

在公司选择上，我比较看重真正重视和尊重员工的公司。人性化

你有什么缺点？
- 大型项目经验不足
你有什么优点？
- 抗压能力强
你对薪水有什么要求？
- 我希望公司能结合我的专业能力和人才市场标准的水平，给我合理的薪水即可
你对加班有什么看法
- 如果工作需要，加班是没问题的，反正我现在单身，没啥家庭负担。但是我会在日常工作中尽量提高自己的工作效率，减少不必要的加班。

面试的时候 ->_->

回答问题的方式

要是直接的问题答不出来的话，可以答一些相关的话题

问：你知道http的302是什么吗
答：不好意思，这个我忘记了，不过我知道 200 表示请求成功，
    404表示资源没有被找到，4xx代表客户端请求报文错误，5xx代表服务端错误

分点回答
不要冷场，结果并不那么重要，思考过程最重要

HTTP

2xx：成功
3xx：重定向
4xx：客户端错误
5xx：服务端错误

200 OK：成功

301 Moved Permanently：永久性重定向（请求的资源被分配了新的URL）

302 Found：临时性重定向（请求的资源临时被分配了新的URL）

304 Not Modified：在这种情况下，由于客户端仍然具有以前下载的资源的副本，因此不需要重新传输资源。

400 Bad Request：请求报文中存在语法错误

403 Forbidden：请求被服务器拒绝

性能优化

减少 HTTP 请求次数：浏览器进程一次发送请求的数目是有限的（4、6 不等），如果有很多 HTTP 请求，就会造成请求阻塞，影响体验。
- 将小图片转 base64 字符串嵌在页面中
- 合并图片（css 精灵 == CSS Sprites）
- 合并 CSS 和 JS 文件
- 采用 lazyLoad（懒加载）
控制资源文件加载优先级（css 放头部、js 放尾部）
使用浏览器缓存
使用 cdn
减少重排
压缩 js、css、图片
DNS优化（即域名收敛）：将静态资源放在一个域名下面，而不要分开放在多个域名下面
资源预加载： 我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到（DNS预解析、资源预获取、预连接、预渲染）

CSS 解析选择器是从右向左的，所以应该尽量避免多层嵌套的选择器
http2: 一个二进制协议，头部压缩、多路复用、服务器推送

【前端性能】浅谈域名发散与域名收敛

浅谈网站性能之前端性能优化

前端性能优化 - 资源预加载

js 坑

利用循环一次注册多个 setTimeout(()=>{},1000) 后，会在一秒后同时执行这几个计时器，不是一秒执行一个

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i)
    }, 1000)
}

从浏览器输入 URL 到页面渲染发生了什么事

浏览器先检查请求的内容是否在浏览器缓存中，如果在，则直接解析内容
DNS 解析 URL
浏览器与服务器建立 TCP 连接
客户端发送 HTTP 请求
服务器处理请求，返回 HTTP 响应
关闭 TCP 连接
浏览器解析html生成 DOM tree，解析css生成 CSS Rule Tree
DOM 树和 CSS 规则树一起构造出 render 树
将 render 树显示在页面上
同时异步加载网页中 CSS、JavaScript 等外部资源

浏览器的渲染过程

重绘
重排

js

async 与 defer

http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

一般情况：解析 html –> 遇到js，暂停解析html –> 下载js –> 执行js –> 继续解析html

async：解析html –> 遇到js，异步下载js，但不会暂停解析html –> js下载完毕后，暂停解析html，执行js –> js执行完后，继续解析html

defer：解析html –> 遇到js，异步下载js，但不会暂停解析html –> html解析完毕后，开始执行js

this 就是你 call 一个函数时，传入的 context

https://zhuanlan.zhihu.com/p/23804247

func(12)      // => func.call(undefined, 12)

obj.func(12)  // => func.call(obj, 12)

func.call(context, arg1, arg2, ...)

function fn() {
    console.log(this)
}
var arr = [fn, fn]
arr[0]()  // this ==> arr

什么是闭包：函数 + 函数所在的环境
- 封装私有变量和私有方法
手动实现 bind 函数 对于实现的过程有什么具体点的要求吗
- 直接调用 bind 函数并不会直接执行函数

function myBind(context) {
    var that = this;
    var args = Array.prototype.slice.call(arguments, 1)

    return function() {
        return this.apply(context, args)
    };
}

RESTFUL API：增查删改

GET    用来获取资源
POST   用来新建资源（也可以用于更新资源）
PUT    用来更新资源
DELETE  用来删除资源

事件模型： 事件捕获、事件冒泡、事件委托

new 操作符

1. 创建一个新的空对象 obj
2. 将空对象 obj  的 __proto__ 属性设置为构造函数的 prototype 属性
3. 将构造函数内部的 this 设置为 obj

创建自定义类型目前最好的方式：组合使用构造函数模式和原型模式
- 属性定义在构造函数中，共享的属性和方法定义在原型上
继承的实现
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承（最棒）

HTML5

sessionStorage：只存在于当前页面上
跨域
- postMessage()
- jsonp : 本质上是请求回一段js代码，然后在本地执行
- CORS
web worker
服务器发送事件（SSE)
File API
Drag and Drop
indexedDB

vue 相关

数据双向绑定
- 最核心的方法便是通过 Object.defineProperty() 来实现对属性的劫持，达到监听数据变动的目的（ES6 可以使用）
组件化开发
- 单文件组件
虚拟 DOM
- 如果用 js 直接操作 DOM，会造成页面的重排，性能很差
- 用 js 对象模拟 DOM 树创建出最初的虚拟 DOM，数据发生变化时，生成新的虚拟DOM，与原来的虚拟dom进行比较并将变化应用到最初的虚拟 DOM上，最后再应用到真正的 DOM 上
社区环境好，上手简单
数据驱动，能让你将关注度集中在数据上，而不是繁琐的 DOM 操作上

web 安全相关

SQL 注入
XSS： 跨站脚本（Cross-site scripting）
- 利用网站开发时留下的漏洞，将恶意脚本注入，在用户访问该网页时执行恶意脚本，从而达到某种恶意的目的（比如向一个有漏洞的评论框里注入 js 代码）
- 获取用户敏感信息
- 过滤用户字符串，对敏感字符进行转义
CSRF（或 XSRF）： 跨站请求伪造（Cross-site request forgery）
- 以用户的名义发起请求，从而达到某种恶意的目的（盗号、发消息、发邮件、转账）
- 跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。
- 加验证码。

总结 XSS 与 CSRF 两种跨站攻击

跨站请求伪造

永远不要信任从客户端发来的数据。

项目

vue-book 中正好把3月份找实习时候看的知识点都用上了，比如 cookie、localstorage、jsonp 等

http的缓存机制

Cache-Control（通过它提供的不同的值来定义缓存策略）
Etag（标识符，用作校验，资源发生变化时，他的值也会变化）

浅谈浏览器http的缓存机制

九种浏览器端缓存机制知多少

算法，数据结构

冒泡排序

快速排序

二叉树： 先序遍历、中序遍历、后序遍历

nodejs

Buffer模块是干什么的： nodejs 用来处理二进制数据的模块，对比与 ES6 的 TypedArray
Stream是什么，使用的两种模式： stream 是一种用来表示数据流的抽象概念（文件流、）

nodejs stream

js 的薄弱点

模拟事件

前端安全相关

面试

给出一个实际的需求，看应聘者怎么解决
让应聘者画一个他所在领域的知识概括
- 比如： CSS 有定位、BFC、文本格式等

本文是好友percymong提供的资源，非常感谢他的指导。