我遇到的前端面试题2017（转）
- 大部分公司（创业公司）都趋向于招一个牛逼的前端而不是三四个平庸的前端
- 性能优化、ES6必问
- 招聘要求上清一色的要求有一门后端语言的经验，但彷佛面试的时候并无一个公司问过我后端语言方面的东西
- 招聘要求写的和面试相关性并非很高
- 招人的要求愈来愈高，不要轻易离职，特别是裸辞
如下是我整理我面试遇到的一些我以为具备表明性的题目，恰好30题，吐血献上！javascript
0.谈谈对前端安全的理解，有什么，怎么防范css
前端安全问题主要有XSS、CSRF攻击
XSS：跨站脚本攻击
它容许用户将恶意代码植入到提供给其余用户使用的页面中，能够简单的理解为一种javascript代码注入。
XSS的防护措施：html
- 过滤转义输入输出
- 避免使用
eval、new Function等执行字符串的方法，除非肯定字符串和用户输入无关 - 使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是没法进行读写的
- 使用innerHTML、document.write的时候，若是数据是用户输入的，那么须要对象关键字符进行过滤与转义
CSRF：跨站请求伪造
其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操做，会被操做到其余网站上
CSRF防护措施：前端
- 检测http referer是不是同域名
- 避免登陆的session长时间存储在客户端中
- 关键请求使用验证码或者token机制
其余的一些攻击方法还有HTTP劫持、界面操做劫持java
1.使用箭头函数须要注意的地方node
当要求动态上下文的时候，你就不能使用箭头函数，好比：定义方法，用构造器建立对象，处理时间时用 this 获取目标。jquery
2.webpack.load的原理webpack
loaders是你用在app源码上的转换元件。他们是用node.js运行的，把源文件做为参数，返回新的资源的函数。git
3.ES6 let、constweb
let
let是更完美的var
- let声明的变量拥有块级做用域,let声明仍然保留了提高的特性，但不会盲目提高。
- let声明的全局变量不是全局对象的属性。不能够经过
window.变量名的方式访问 - 形如
for (let x…)的循环在每次迭代时都为x建立新的绑定 - let声明的变量直到控制流到达该变量被定义的代码行时才会被装载，因此在到达以前使用该变量会触发错误。
const
定义常量值，不能够从新赋值，可是若是值是一个对象，能够改变对象里的属性值
const OBJ = {"a":1, "b":2}; OBJ.a = 3; OBJ = {};// 从新赋值，报错！ console.log(OBJ.a); // 3
4.CSS3 box-sizing的做用
设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding
box-sizing属性能够为三个值之一：
- content-box，默认值，border和padding不计算入width以内
- padding-box，padding计算入width内
- border-box，border和padding计算入width以内
5.说说HTML5中有趣的标签（新标签及语义化）
若是代码写的语义化，有利于SEO。搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标题，合理利用h1-h6，列表形式的代码使用ul或ol，重要的文字使用strong等等。总之就是要充分利用各类HTML标签完成他们本职的工做
6.git命令，如何批量删除分支
git branch |grep 'branchName' |xargs git branch -D,从分支列表中匹配到指定分支，而后一个一个(分红小块)传递给删除分支的命令，最后进行删除。(参考这里)
7.建立对象的三种方法
第一种方式，字面量
var o1 = {name: "o1"} var o2 = new Object({name: "o2"})
第二种方式，经过构造函数
var M = function(name){ this.name = name } var o3 = new M("o3")
第三种方式，Object.create
var p = {name: "p"} var o4 = Object.create(p)
新建立的对o4的原型就是p，同时o4也拥有了属性name
8.JS实现继承的几种方式
借用构造函数实现继承
function Parent1(){ this.name = "parent1" } function Child1(){ Parent1.call(this); this.type = "child1"; }
缺点：Child1没法继承Parent1的原型对象，并无真正的实现继承（部分继承）
借用原型链实现继承
function Parent2(){ this.name = "parent2"; this.play = [1,2,3]; } function Child2(){ this.type = "child2"; } Child2.prototype = new Parent2();
缺点：原型对象的属性是共享的
组合式继承
function Parent3(){ this.name = "parent3"; this.play = [1,2,3]; } function Child3(){ Parent3.call(this); this.type = "child3"; } Child3.prototype = Object.create(Parent3.prototype); Child3.prototype.constructor = Child3;
9.当new Foo()时发生了什么
1.建立了一个新对象
2.将this指向这个新对象
3.执行构造函数里面的代码
4.返回新对象（this）
参考《JS高程》6.6.2
10.你作过哪些性能优化
雪碧图，移动端响应式图片，静态资源CDN，减小Dom操做（事件代理、fragment），压缩JS和CSS、HTML等，DNS预解析
11.浏览器渲染原理
首先来看一张图：
- HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
- 把DOM Tree和CSS Rule Tree通过整合生成Render Tree（布局阶段）
- 元素按照算出来的规则，把元素放到它该出现的位置，经过显卡画到屏幕上
更多详情看这里
12.前端路由的原理
什么是路由？简单的说，路由是根据不一样的 url 地址展现不一样的内容或页面
使用场景？前端路由更多用在单页应用上, 也就是SPA, 由于单页应用, 基本上都是先后端分离的, 后端天然也就不会给前端提供路由。
前端的路由和后端的路由在实现技术上不同，可是原理都是同样的。在 HTML5 的 history API 出现以前，前端的路由都是经过 hash 来实现的，hash 能兼容低版本的浏览器。
两种实现前端路由的方式
HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操做浏览器的历史记录，而不会引发页面的刷新。
Hash就是url 中看到 # ,咱们须要一个根据监听哈希变化触发的事件( hashchange) 事件。咱们用 window.location 处理哈希的改变时不会从新渲染页面，而是看成新页面加到历史记录中，这样咱们跳转页面就能够在 hashchange 事件中注册 ajax 从而改变页面内容。
优势
从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，而后服务器再响应请求，这个过程确定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来讲会有至关大的提高。
更多内容请看这里
缺点
使用浏览器的前进，后退键的时候会从新发送请求，没有合理地利用缓存。
13.Restful API是什么
- Restful的意思就是表现层状态转化。
- "表现层"其实指的是"资源"（Resources）的"表现层"，把"资源"具体呈现出来的形式，叫作它的"表现层"（Representation）。
- 所谓"资源"，就是网络上的一个实体，或者说是网络上的一个具体信息。它能够是一段文本、一张图片、一首歌曲、一种服务，总之就是一个具体的实在，每个URI表明一种资源。
- 若是客户端想要操做服务器，必须经过某种手段，让服务器端发生"状态转化"（State Transfer）。而这种转化是创建在表现层之上的，因此就是"表现层状态转化"。
- Restful就是客户端和服务器之间，传递这种资源的某种表现层
- 客户端经过四个HTTP动词，对服务器端资源进行操做，实现"表现层状态转化"
Restful API就是符合Restful架构的API设计。
Restful API一些具体实践：
- 应该尽可能将API部署在专用域名之下。若是肯定API很简单，不会有进一步扩展，能够考虑放在主域名下。
- 应该将API的版本号放入URL。
- 对于资源的具体操做类型，由HTTP动词表示
- 若是记录数量不少，服务器不可能都将它们返回给用户。API应该提供参数，过滤返回结果
- 若是状态码是4xx，就应该向用户返回出错信息。通常来讲，返回的信息中将error做为键名
.....
14.script标签的defer、async的区别
defer是在HTML解析完以后才会执行，若是是多个，按照加载的顺序依次执行
async是在加载完成后当即执行，若是是多个，执行顺序和加载顺序无关
15.同源与跨域
什么是同源策略？
限制从一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。
一个源指的是主机名、协议和端口号的组合，必须相同
跨域通讯的几种方式
- JSONP
- Hash
- postMessage
- WebSocket
- CORS
JSONP原理
基本原理：利用script标签的异步加载特性实现
给服务端传一个回调函数，服务器返回一个传递过去的回调函数名称的JS代码
更多请查看：《先后端通讯类知识》
16.原型与闭包相关问题
原型是什么
原型就是一个普通的对象，每一个对象都有一个原型（Object除外），原型能存储咱们的方法，构造函数建立出来的实例对象可以引用原型中的方法。
查看原型
之前通常使用对象的__proto__属性，ES6推出后，推荐用Object.getPrototypeOf()方法来获取对象的原型
闭包是什么？
专业说法：当一个内部函数被其外部函数以外的变量引用时，就造成了一个闭包。
还能够这么理解：
闭包就是一个具备封闭功能与包裹功能的结构，是为了实现具备私有访问空间的函数的，函数能够构成闭包，由于函数内部定义的数据函数外部没法访问，即函数具备封闭性；函数能够封装代码即具备包裹性，因此函数能够构成闭包。
建立闭包的最多见的方式就是在一个函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量
闭包的特性
闭包有三个特性：
- 函数嵌套函数
- 函数内部能够引用外部的参数和变量
- 参数和变量不会被垃圾回收机制回收
闭包有什么用，使用场景
当咱们须要在模块中定义一些变量，并但愿这些变量一直保存在内存中但又不会“污染”全局的变量时，就能够用闭包来定义这个模块。
闭包的缺点
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。
函数套函数就是闭包吗？不是！，当一个内部函数被其外部函数以外的变量引用时，才会造成了一个闭包。
更多内容请看这里
17.如何进行错误监控
前端错误的分类
- 即时运行错误（代码错误）
- 资源加载错误
错误的捕获方式
即时运行错误的捕获方式：
- try...catch
- window.onerror
资源加载错误：
- object.onerror（如img,script）
- performance.getEntries()
- Error事件捕获
延伸：跨域的js运行错误能够捕获吗，错误提示什么，应该怎么处理？
能够。
Script error
1.在script标签增长crossorigin属性
2.设置js资源响应头Access-Control-Allow-Orgin:*
上报错误的基本原理
采用Ajax通讯方式上报
利用Image对象上报
18.DOM事件类
DOM事件的级别
- DOM0，element.onclick = function(){}
- DOM2，element.addEventListener('click', function(){}, false);
DOM事件模型是什么：指的是冒泡和捕获
DOM事件流是什么：捕获阶段 -> 目标阶段 -> 冒泡阶段
描述DOM事件捕获的具体流程
window --> document --> documentElement(html标签) --> body --> .... --> 目标对象
Event对象常见应用
- event.preventDefault()，阻止默认行为
- event.stopPropagation()，阻止事件冒泡
- event.stopImmediatePropagation()，阻止剩余的事件处理函数执行而且防止事件冒泡到DOM树上，这个方法不接受任何参数。
- event.currentTarget，返回绑定事件的元素
- event.target，返回触发事件的元素
如何自定义事件
Event，不能传递参数
var eve = new Event('自定义事件名'); ev.addEventListener('自定义事件名', function(){ console.log('自定义事件') }); ev.dispatchEvent(eve);
CustomEvent，还能够指定参数
19.本地起了一个http server，为何只能在同一个WIFI(局域网)上访问？
你没有公网IP固然就不能被外网访问了。常见的WIFI状况下，通常的ip会是~192.168.0.x·这样的，只是对局域网(同WIFI下)可见，可是外网是访问不了的。（segmentfault上的答案）
20.回流和重绘
21.数组去重的方法
22.深拷贝与浅拷贝
是什么
浅拷贝只复制指向某个对象的指针，而不复制对象自己，新旧对象仍是共享同一块内存。但深拷贝会另外创造一个如出一辙的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
实现浅拷贝
var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = obj1; obj2.b = 100; console.log(obj1); // { a: 10, b: 100, c: 30 } <-- b 被改到了 console.log(obj2); // { a: 10, b: 100, c: 30 }
实现深拷贝
var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c }; obj2.b = 100; console.log(obj1); // { a: 10, b: 20, c: 30 } <-- b 沒被改到 console.log(obj2); // { a: 10, b: 100, c: 30 }
深拷贝实现方式
- 手动复制方式，如上面的代码，缺点就是
- Object.assign，ES6 的新函数，能够帮助咱们达成跟上面同样的功能。
var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = Object.assign({}, obj1); obj2.b = 100; console.log(obj1); // { a: 10, b: 20, c: 30 } <-- 沒被改到 console.log(obj2); // { a: 10, b: 100, c: 30 } - 转成 JSON 再转回来
用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。
缺点：只有能够转成JSON格式的对象才能够这样用，像function没办法转成JSON。 - jquery，有提供一个$.extend能够用来作 Deep Copy。
- lodash，也有提供_.cloneDeep用来作 Deep Copy。
- 递归实现深拷贝
function clone( o ) { var temp = {}; for( var k in o ) { if( typeof o[ k ] == 'object' ){ temp[ k ] = clone( o[ k ] ); } else { temp[ k ] = o[ k ]; } } return temp; }
23.如何快速合并雪碧图
Gulp：gulp-css-spriter
webpack：optimize-css-assets-webpack-plugin
Go！Png
在线工具
24.代码优化基本方法
减小HTTP请求
HTML优化：
- 使用语义化标签
- 减小iframe：iframe是SEO的大忌，iframe有好处也有弊端
- 避免重定向
CSS优化：
- 布局代码写前面
- 删除空样式
- 不滥用浮动，字体，须要加载的网络字体根据网站需求再添加
- 选择器性能优化
- 避免使用表达式，避免用id写样式
js优化：
- 压缩
- 减小重复代码
图片优化：
- 使用WebP
- 图片合并，CSS sprite技术
减小DOM操做
- 缓存已经访问过的元素
- "离线"更新节点, 再将它们添加到树中
- 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿
使用JSON格式来进行数据交换
使用CDN加速
使用HTTP缓存：添加 Expires 或 Cache-Control 信息头
使用DNS预解析
Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性，因为Chrome和Firefox 3.5自己对DNS预解析作了相应优化设置，因此设置DNS预解析的不良影响之一就是可能会下降Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现：
- 用meta信息来告知浏览器, 当前页面要作DNS预解析:
<meta http-equiv="x-dns-prefetch-control" content="on" /> - 在页面header中使用link标签来强制对DNS预解析:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
25.HTTPS的握手过程
- 浏览器将本身支持的一套加密规则发送给服务器。
- 服务器从中选出一组加密算法与HASH算法，并将本身的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。
- 浏览器得到网站证书以后浏览器要作如下工做：
- 验证证书的合法
- 若是证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。
- 使用约定好的HASH算法计算握手消息，并使用生成的随机数对消息进行加密，最后将以前生成的全部信息发送给服务器
- 网站接收浏览器发来的数据以后要作如下的操做：
- 使用本身的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。
- 使用密码加密一段握手消息，发送给浏览器。
- 浏览器解密并计算握手消息的HASH，若是与服务端发来的HASH一致，此时握手过程结束，以后全部的通讯数据将由以前浏览器生成的随机密码并利用对称加密算法进行加密。
26.BFC相关问题
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，而且与这个区域外部绝不相干。
BFC的渲染规则
- BFC这个元素的垂直方向的边距会发生重叠
- BFC的区域不会与浮动元素的box重叠（清除浮动原理）
- BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来它里面的元素也不会影响外面的元素
- 计算BFC的高度的时候，浮动元素也会参与计算
如何建立BFC？
- overflow属性不为visible
- float属性不为none
- position属性为absolute或fixed
- display属性为inline-block、table-cell、table-caption、flex、inline-flex
BFC的使用场景
他的很经常使用的一个应用场景就是解决边距重叠的问题.
27.响应式图片
1.JS或者服务端硬编码，resize事件，判断屏幕大小加载不一样的图片
2.img srcset 方法
3.picture标签 -> source
4.svg
5.第三方库polyfill
28.判断一个变量是不是数组
var a = []; // 1.基于instanceof a instanceof Array; // 2.基于constructor a.constructor === Array; // 3.基于Object.prototype.isPrototypeOf Array.prototype.isPrototypeOf(a); // 4.基于getPrototypeOf Object.getPrototypeOf(a) === Array.prototype; // 5.基于Object.prototype.toString Object.prototype.toString.apply(a) === '[object Array]'; // 6.Array.isArray Array.isArray([]); // true
以上，除了Object.prototype.toString外，其它方法都不能正确判断变量的类型。
29.UTF-8和Unicode的区别
UTF-8就是在互联网上使用最广的一种unicode的实现方式。
Unicode的出现是为了统一地区性文字编码方案，为解决unicode如何在网络上传输的问题，因而面向传输的众多 UTF（UCS Transfer Format）标准出现了，顾名思义，UTF-8就是每次8个位传输数据，而UTF-16就是每次16个位。
ASCII --> 地区性编码（GBK） --> Unicode --> UTF-8
转载连接：http://www.imooc.com/article/20319
想知道本身什么水平就出去面试....
金九银十，在九月以前把工做落实了，经历了好几个公司的面试，获得一些信息，和你们分享：
- 大部分公司（创业公司）都趋向于招一个牛逼的前端而不是三四个平庸的前端
- 性能优化、ES6必问
- 招聘要求上清一色的要求有一门后端语言的经验，但彷佛面试的时候并无一个公司问过我后端语言方面的东西
- 招聘要求写的和面试相关性并非很高
- 招人的要求愈来愈高，不要轻易离职，特别是裸辞
如下是我整理我面试遇到的一些我以为具备表明性的题目，恰好30题，吐血献上！
0.谈谈对前端安全的理解，有什么，怎么防范前端安全问题主要有XSS、CSRF攻击
XSS：跨站脚本攻击
它容许用户将恶意代码植入到提供给其余用户使用的页面中，能够简单的理解为一种javascript代码注入。
XSS的防护措施：
- 过滤转义输入输出
- 避免使用
eval、new Function等执行字符串的方法，除非肯定字符串和用户输入无关 - 使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是没法进行读写的
- 使用innerHTML、document.write的时候，若是数据是用户输入的，那么须要对象关键字符进行过滤与转义
CSRF：跨站请求伪造
其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操做，会被操做到其余网站上
CSRF防护措施：
- 检测http referer是不是同域名
- 避免登陆的session长时间存储在客户端中
- 关键请求使用验证码或者token机制
其余的一些攻击方法还有HTTP劫持、界面操做劫持
1.使用箭头函数须要注意的地方当要求动态上下文的时候，你就不能使用箭头函数，好比：定义方法，用构造器建立对象，处理时间时用 this获取目标。
loaders是你用在app源码上的转换元件。他们是用node.js运行的，把源文件做为参数，返回新的资源的函数。
3.ES6 let、constlet
let是更完美的var
- let声明的变量拥有块级做用域,let声明仍然保留了提高的特性，但不会盲目提高。
- let声明的全局变量不是全局对象的属性。不能够经过
window.变量名的方式访问 - 形如
for (let x…)的循环在每次迭代时都为x建立新的绑定 - let声明的变量直到控制流到达该变量被定义的代码行时才会被装载，因此在到达以前使用该变量会触发错误。
const
定义常量值，不能够从新赋值，可是若是值是一个对象，能够改变对象里的属性值
const OBJ = {"a":1, "b":2}; OBJ.a = 3; OBJ = {};// 从新赋值，报错！ console.log(OBJ.a); // 3 4.CSS3 box-sizing的做用
设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding
box-sizing属性能够为三个值之一：
- content-box，默认值，border和padding不计算入width以内
- padding-box，padding计算入width内
- border-box，border和padding计算入width以内
若是代码写的语义化，有利于SEO。搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标题，合理利用h1-h6，列表形式的代码使用ul或ol，重要的文字使用strong等等。总之就是要充分利用各类HTML标签完成他们本职的工做
6.git命令，如何批量删除分支git branch |grep 'branchName' |xargs git branch -D,从分支列表中匹配到指定分支，而后一个一个(分红小块)传递给删除分支的命令，最后进行删除。(参考这里)
第一种方式，字面量
var o1 = {name: "o1"} var o2 = new Object({name: "o2"})
第二种方式，经过构造函数
var M = function(name){ this.name = name } var o3 = new M("o3")
第三种方式，Object.create
var p = {name: "p"} var o4 = Object.create(p)
新建立的对o4的原型就是p，同时o4也拥有了属性name
8.JS实现继承的几种方式借用构造函数实现继承
function Parent1(){ this.name = "parent1" } function Child1(){ Parent1.call(this); this.type = "child1"; }
缺点：Child1没法继承Parent1的原型对象，并无真正的实现继承（部分继承）
借用原型链实现继承
function Parent2(){ this.name = "parent2"; this.play = [1,2,3]; } function Child2(){ this.type = "child2"; } Child2.prototype = new Parent2();
缺点：原型对象的属性是共享的
组合式继承
function Parent3(){ this.name = "parent3"; this.play = [1,2,3]; } function Child3(){ Parent3.call(this); this.type = "child3"; } Child3.prototype = Object.create(Parent3.prototype); Child3.prototype.constructor = Child3; 9.当new Foo()时发生了什么
1.建立了一个新对象
2.将this指向这个新对象
3.执行构造函数里面的代码
4.返回新对象（this）
参考《JS高程》6.6.2
雪碧图，移动端响应式图片，静态资源CDN，减小Dom操做（事件代理、fragment），压缩JS和CSS、HTML等，DNS预解析
11.浏览器渲染原理首先来看一张图：
- HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
- 把DOM Tree和CSS Rule Tree通过整合生成Render Tree（布局阶段）
- 元素按照算出来的规则，把元素放到它该出现的位置，经过显卡画到屏幕上
12.前端路由的原理更多详情看这里
什么是路由？简单的说，路由是根据不一样的 url 地址展现不一样的内容或页面
使用场景？前端路由更多用在单页应用上, 也就是SPA, 由于单页应用, 基本上都是先后端分离的, 后端天然也就不会给前端提供路由。
前端的路由和后端的路由在实现技术上不同，可是原理都是同样的。在 HTML5 的 history API 出现以前，前端的路由都是经过 hash 来实现的，hash 能兼容低版本的浏览器。
两种实现前端路由的方式
HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操做浏览器的历史记录，而不会引发页面的刷新。
Hash就是url 中看到 # ,咱们须要一个根据监听哈希变化触发的事件( hashchange) 事件。咱们用window.location处理哈希的改变时不会从新渲染页面，而是看成新页面加到历史记录中，这样咱们跳转页面就能够在 hashchange 事件中注册 ajax 从而改变页面内容。
优势
从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，而后服务器再响应请求，这个过程确定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来讲会有至关大的提高。
更多内容请看这里
缺点
使用浏览器的前进，后退键的时候会从新发送请求，没有合理地利用缓存。
- Restful的意思就是表现层状态转化。
- "表现层"其实指的是"资源"（Resources）的"表现层"，把"资源"具体呈现出来的形式，叫作它的"表现层"（Representation）。
- 所谓"资源"，就是网络上的一个实体，或者说是网络上的一个具体信息。它能够是一段文本、一张图片、一首歌曲、一种服务，总之就是一个具体的实在，每个URI表明一种资源。
- 若是客户端想要操做服务器，必须经过某种手段，让服务器端发生"状态转化"（State Transfer）。而这种转化是创建在表现层之上的，因此就是"表现层状态转化"。
- Restful就是客户端和服务器之间，传递这种资源的某种表现层
- 客户端经过四个HTTP动词，对服务器端资源进行操做，实现"表现层状态转化"
Restful API就是符合Restful架构的API设计。
Restful API一些具体实践：
- 应该尽可能将API部署在专用域名之下。若是肯定API很简单，不会有进一步扩展，能够考虑放在主域名下。
- 应该将API的版本号放入URL。
- 对于资源的具体操做类型，由HTTP动词表示
- 若是记录数量不少，服务器不可能都将它们返回给用户。API应该提供参数，过滤返回结果
- 若是状态码是4xx，就应该向用户返回出错信息。通常来讲，返回的信息中将error做为键名
.....
defer是在HTML解析完以后才会执行，若是是多个，按照加载的顺序依次执行
async是在加载完成后当即执行，若是是多个，执行顺序和加载顺序无关
什么是同源策略？
限制从一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。
一个源指的是主机名、协议和端口号的组合，必须相同
跨域通讯的几种方式
- JSONP
- Hash
- postMessage
- WebSocket
- CORS
JSONP原理
基本原理：利用script标签的异步加载特性实现
给服务端传一个回调函数，服务器返回一个传递过去的回调函数名称的JS代码
16.原型与闭包相关问题更多请查看：《先后端通讯类知识》
原型是什么
原型就是一个普通的对象，每一个对象都有一个原型（Object除外），原型能存储咱们的方法，构造函数建立出来的实例对象可以引用原型中的方法。
查看原型
之前通常使用对象的__proto__属性，ES6推出后，推荐用Object.getPrototypeOf()方法来获取对象的原型
闭包是什么？
专业说法：当一个内部函数被其外部函数以外的变量引用时，就造成了一个闭包。
还能够这么理解：
闭包就是一个具备封闭功能与包裹功能的结构，是为了实现具备私有访问空间的函数的，函数能够构成闭包，由于函数内部定义的数据函数外部没法访问，即函数具备封闭性；函数能够封装代码即具备包裹性，因此函数能够构成闭包。
建立闭包的最多见的方式就是在一个函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量
闭包的特性
闭包有三个特性：
- 函数嵌套函数
- 函数内部能够引用外部的参数和变量
- 参数和变量不会被垃圾回收机制回收
闭包有什么用，使用场景
当咱们须要在模块中定义一些变量，并但愿这些变量一直保存在内存中但又不会“污染”全局的变量时，就能够用闭包来定义这个模块。
闭包的缺点
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。
函数套函数就是闭包吗？不是！，当一个内部函数被其外部函数以外的变量引用时，才会造成了一个闭包。
17.如何进行错误监控更多内容请看这里
前端错误的分类
- 即时运行错误（代码错误）
- 资源加载错误
错误的捕获方式
即时运行错误的捕获方式：
- try...catch
- window.onerror
资源加载错误：
- object.onerror（如img,script）
- performance.getEntries()
- Error事件捕获
延伸：跨域的js运行错误能够捕获吗，错误提示什么，应该怎么处理？
能够。
Script error
1.在script标签增长crossorigin属性
2.设置js资源响应头Access-Control-Allow-Orgin:*
上报错误的基本原理
采用Ajax通讯方式上报
利用Image对象上报
DOM事件的级别
- DOM0，element.onclick = function(){}
- DOM2，element.addEventListener('click', function(){}, false);
DOM事件模型是什么：指的是冒泡和捕获
DOM事件流是什么：捕获阶段 -> 目标阶段 -> 冒泡阶段
描述DOM事件捕获的具体流程
window --> document --> documentElement(html标签) --> body --> .... --> 目标对象
Event对象常见应用
- event.preventDefault()，阻止默认行为
- event.stopPropagation()，阻止事件冒泡
- event.stopImmediatePropagation()，阻止剩余的事件处理函数执行而且防止事件冒泡到DOM树上，这个方法不接受任何参数。
- event.currentTarget，返回绑定事件的元素
- event.target，返回触发事件的元素
如何自定义事件
Event，不能传递参数
var eve = new Event('自定义事件名'); ev.addEventListener('自定义事件名', function(){ console.log('自定义事件') }); ev.dispatchEvent(eve);
CustomEvent，还能够指定参数
19.本地起了一个http server，为何只能在同一个WIFI(局域网)上访问？你没有公网IP固然就不能被外网访问了。常见的WIFI状况下，通常的ip会是~192.168.0.x·这样的，只是对局域网(同WIFI下)可见，可是外网是访问不了的。（segmentfault上的答案）
20.回流和重绘 21.数组去重的方法 22.深拷贝与浅拷贝是什么
浅拷贝只复制指向某个对象的指针，而不复制对象自己，新旧对象仍是共享同一块内存。但深拷贝会另外创造一个如出一辙的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
实现浅拷贝
var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = obj1; obj2.b = 100; console.log(obj1); // { a: 10, b: 100, c: 30 } <-- b 被改到了 console.log(obj2); // { a: 10, b: 100, c: 30 }
实现深拷贝
var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c }; obj2.b = 100; console.log(obj1); // { a: 10, b: 20, c: 30 } <-- b 沒被改到 console.log(obj2); // { a: 10, b: 100, c: 30 }
深拷贝实现方式
- 手动复制方式，如上面的代码，缺点就是
- Object.assign，ES6 的新函数，能够帮助咱们达成跟上面同样的功能。
var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = Object.assign({}, obj1); obj2.b = 100; console.log(obj1); // { a: 10, b: 20, c: 30 } <-- 沒被改到 console.log(obj2); // { a: 10, b: 100, c: 30 } - 转成 JSON 再转回来
用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。
缺点：只有能够转成JSON格式的对象才能够这样用，像function没办法转成JSON。 - jquery，有提供一个$.extend能够用来作 Deep Copy。
- lodash，也有提供_.cloneDeep用来作 Deep Copy。
- 递归实现深拷贝
function clone( o ) { var temp = {}; for( var k in o ) { if( typeof o[ k ] == 'object' ){ temp[ k ] = clone( o[ k ] ); } else { temp[ k ] = o[ k ]; } } return temp; }
Gulp：gulp-css-spriter
webpack：optimize-css-assets-webpack-plugin
Go！Png
在线工具
减小HTTP请求
HTML优化：
- 使用语义化标签
- 减小iframe：iframe是SEO的大忌，iframe有好处也有弊端
- 避免重定向
CSS优化：
- 布局代码写前面
- 删除空样式
- 不滥用浮动，字体，须要加载的网络字体根据网站需求再添加
- 选择器性能优化
- 避免使用表达式，避免用id写样式
js优化：
- 压缩
- 减小重复代码
图片优化：
- 使用WebP
- 图片合并，CSS sprite技术
减小DOM操做
- 缓存已经访问过的元素
- "离线"更新节点, 再将它们添加到树中
- 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿
使用JSON格式来进行数据交换
使用CDN加速
使用HTTP缓存：添加 Expires 或 Cache-Control 信息头
使用DNS预解析
Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性，因为Chrome和Firefox 3.5自己对DNS预解析作了相应优化设置，因此设置DNS预解析的不良影响之一就是可能会下降Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现：
- 用meta信息来告知浏览器, 当前页面要作DNS预解析:
<meta http-equiv="x-dns-prefetch-control" content="on" /> - 在页面header中使用link标签来强制对DNS预解析:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
- 浏览器将本身支持的一套加密规则发送给服务器。
- 服务器从中选出一组加密算法与HASH算法，并将本身的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。
- 浏览器得到网站证书以后浏览器要作如下工做：
- 验证证书的合法
- 若是证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。
- 使用约定好的HASH算法计算握手消息，并使用生成的随机数对消息进行加密，最后将以前生成的全部信息发送给服务器
- 网站接收浏览器发来的数据以后要作如下的操做：
- 使用本身的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。
- 使用密码加密一段握手消息，发送给浏览器。
- 浏览器解密并计算握手消息的HASH，若是与服务端发来的HASH一致，此时握手过程结束，以后全部的通讯数据将由以前浏览器生成的随机密码并利用对称加密算法进行加密。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，而且与这个区域外部绝不相干。
BFC的渲染规则
- BFC这个元素的垂直方向的边距会发生重叠
- BFC的区域不会与浮动元素的box重叠（清除浮动原理）
- BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来它里面的元素也不会影响外面的元素
- 计算BFC的高度的时候，浮动元素也会参与计算
如何建立BFC？
- overflow属性不为visible
- float属性不为none
- position属性为absolute或fixed
- display属性为inline-block、table-cell、table-caption、flex、inline-flex
BFC的使用场景
他的很经常使用的一个应用场景就是解决边距重叠的问题.
1.JS或者服务端硬编码，resize事件，判断屏幕大小加载不一样的图片
2.img srcset 方法
3.picture标签 -> source
4.svg
5.第三方库polyfill
var a = []; // 1.基于instanceof a instanceof Array; // 2.基于constructor a.constructor === Array; // 3.基于Object.prototype.isPrototypeOf Array.prototype.isPrototypeOf(a); // 4.基于getPrototypeOf Object.getPrototypeOf(a) === Array.prototype; // 5.基于Object.prototype.toString Object.prototype.toString.apply(a) === '[object Array]'; // 6.Array.isArray Array.isArray([]); // true
以上，除了Object.prototype.toString外，其它方法都不能正确判断变量的类型。
UTF-8就是在互联网上使用最广的一种unicode的实现方式。Unicode的出现是为了统一地区性文字编码方案，为解决unicode如何在网络上传输的问题，因而面向传输的众多 UTF（UCS Transfer Format）标准出现了，顾名思义，UTF-8就是每次8个位传输数据，而UTF-16就是每次16个位。ASCII --> 地区性编码（GBK） --> Unicode --> UTF-8
- 1. 我遇到的前端面试题2017
- 2. 2019 我遇到的前端面试题
- 3. 【前端面试】我遇到的那些前端笔试题~
- 4. 前端面试遇到的问题
- 5. 前端面试遇到的算法题
- 6. 我遇到的前端面试题总结（2018）
- 7. 2017前端面试题
- 8. web前端面试题2017
- 9. 前端面试题2017
- 10. 前端面试题记录 -- 遇到过的面试题笔记
- 更多相关文章...
- • Hibernate的级联与反转 - Hibernate教程
- • Lua 调试(Debug) - Lua 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 我遇到的前端面试题2017
- 2. 2019 我遇到的前端面试题
- 3. 【前端面试】我遇到的那些前端笔试题~
- 4. 前端面试遇到的问题
- 5. 前端面试遇到的算法题
- 6. 我遇到的前端面试题总结（2018）
- 7. 2017前端面试题
- 8. web前端面试题2017
- 9. 前端面试题2017
- 10. 前端面试题记录 -- 遇到过的面试题笔记