前端笔试题收集（笔记）

时间 2019-11-16

原文原文链接

前端开发知识点

HTML&CSS：

对Web标准的理解、浏览器内核差别、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、
HTML五、CSS三、Flexbox
复制代码

JavaScript：

数据类型、运算、对象、Function、继承、闭包、做用域、原型链、事件、RegExp、JSON、Ajax、
DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 六、Nodejs
复制代码

其余：

移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协做、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
复制代码

CSS类

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为100px，中间自适应。

请写出五到七种方案，并说出各类方案的优缺点和兼容性javascript

float+margin 经典的包括圣杯布局和双飞翼布局;此方式不等高，并且会使用定位，扩展性差。
inline-block+marin+(calc) 三个并列排放都在一行,中间的宽度是calc(100%-240px) ，减去两边的宽度和加上margin值；另外一种是在主体中添加一层div，而后设置margin，主体margin 0 -100px，center margin：0 120px；此方式不等高，使用定位，扩展性差。
table 设置con为display：table，左右和主体都是table-cell，左右宽度固定，中间自适应，而且等高。
position 纯定位，con设置position:absolute; 左右和主体都是relative，左右定宽，左右分别设置left和right，中间设置left、right一块儿设置。给con高度，高度固定。
flex 弹性盒模型布局：设置con的display：flex；左右高度固定，中间flex：1；可是只能在支持flex的浏览器中使用。等高。
grid 栅格布局：设置con为display：grid；设置gird-template-clomuns：100px 1fr 100px; 两边固定，中间自适应，等高。

左侧菜单栏占300px，右侧内容能够根据浏览器自适应。根据此要求，编写html css代码

float+margin:左边浮动，主体设置marginLeft
table: 设置con的display为table，全部的子元素都是table-cell，左边定宽，等高
flex: 设置con为display为flex，左边定宽，右边flex为1，等高
grid: 设置con的display为grid，grid-template-columns: 100px 1fr; 等高；

CSS选择器又哪些？有哪些新特性？有哪些伪类？

*通用选择器：选择全部元素，不参与计算优先级
#X id选择器：选择id值为X的元素
.X 类选择器：选择class包含X的元素
X Y后代选择器：选择知足X选择器的后代节点中知足Y选择器的元素
X元素选择器：选择全部标签为X的元素
:link,:visited,:focus,:hover,:active 链接状态：选择特定状态的连接元素
X + Y 直接兄弟选择器：在X以后第一个兄弟节点中选择知足Y选择器的元素
X > Y 子选择器：选择X的子元素中知足Y选择器的元素
X ~ Y 兄弟：选择X以后全部兄弟节点中知足Y选择器的元素
[attr] :选择全部设置了attr属性的元素
[attr=value] :选择属性值恰好为value的元素
[attr~=value] :选择属性值为空白符分隔，其中一个的值恰好是value的元素
[attr|=value] :选择属性值恰好为value或者以value-开头的元素
[attr^=value] :选择属性值以value开头的元素
[attr$=value] :选择属性值以value结尾的元素
[attr*=value] :选择属性值中包含value的元素
[:checked] :选择单选框，复选框，下拉框中选中状态下的元素
X:after，X::after：after伪元素，选择元素虚拟子元素（元素的最后一个元素）
:hover ：鼠标进入状态的元素
:not(selector): 选择不符合selector的元素
::first-letter: 伪元素，选择块元素第一行的第一个字母
::first-line : 伪元素，选择块元素的第一行
:nth-child(an + b) : 伪类，选择前面有an+b - 1个兄弟节点的元素，其中n>=0
:nth-last-child(an + b): 伪类，选择后面有an+b - 1个兄弟节点的元素，其中n>=0
X:nth-of-type(an+b): 伪类，X为选择器，解析获得元素标签，选择前面有an+b-1个相同标签兄弟节点的元素
X:nth-last-of-type(an+b): 伪类，X为选择器，解析获得元素标签，选择后面有an+b-1个相同标签兄弟节点的元素
X:first-child: 伪类，选择知足X选择器的元素，而且这个元素是其父节点的第一个元素
X:last-child: 伪类，选择知足X选择器的元素，而且这个元素是其父节点的最后一个元素
X:only-child: 伪类，选择知足X选择器的元素，而且这个元素是其父节点的惟一一个子元素
X:only-of-type: 伪类，选择X选择器的元素，解析获得的全部元素标签，若是该元素没有相同类型的兄弟节点是选中它
X:first-of-type: 伪类，选择X选择器的元素，解析获得的元素标签，若是该元素是此类型的元素的第一个兄弟，选中它。

清除浮动的几种方式，优缺点

给父元素设置高度，可是这样的话若是内容是动态的，有可能出现滚动条。
给每个子元素后边加一个div或者br标签，设置clear：both;清除浮动，可是会增长页面标签。代码冗余。
使用伪类，设置父元素after伪类，clear：both；配合zoom属性使用。

图片如何实现垂直剧中的

table-cell:设置div的display为table-cell,vertical-align:middle;text-align:center; img标签垂直居中。
position: 设置div的position:relative; 设置img标签position：absolute; left: 50%; top: 50%; margin-left: 负宽度的一半，margin-top：负高度的一办，可是只能用在一直宽高的图片中。
css3的box：设置divstyle：text-align: center;display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;display: -moz-box;-moz-box-align: center;-moz-box-pack: center;display: -o-box;-o-box-align: center;-o-box-pack: center;display: -ms-box;-ms-box-align: center;-ms-box-pack: center;display: box;box-align: center;box-pack: center;

css hack你知道哪些？

属性前缀法(即内部类hack)："-"减号是IE6专属hack，"\9"是IE六、七、八、九、10都生效，"\0"是IE八、九、10都生效，"\9\0"是只对IE九、10生效。
条件注释法：<!--[if IE]>只有IE浏览器显示<--[endif]>，<!--[if IE 6]>只有IE6显示<--[endif]>，<!--[if gte IE 6]>IE6及以上版本浏览器显示<--[endif]>，<!--[if ! IE 8]>不是IE8的其余IE浏览器显示<--[endif]>
选择器前缀法：*html 前缀只对IE6生效；+html *+前缀只对IE7生效；@media screen\9{...}只对IE6/7生效；@media \0screen {body { background: red; }}只对IE8有效；@media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效；@media screen\0 {body { background: green; }} 只对IE8/9/10有效；@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

谈谈你对CSS盒模型的认识

盒模型就是指box的content padding margin bordercss

标准模型和IE模型的区别?

标准模式盒模型的width和height指的是content的宽高，IE盒模型的width和height指的是content加上border和padding的总和。标准模式适用于如今的绝大多数浏览器，IE模型只适用于IE6及如下的浏览器中。

CSS是如何设置这两种模型?

css新增属性：box-sizing，content-box是默认值，指的是按照标准模式盒模型展现，border-box指的是怪异模式，按照IE盒模型展现。

JS如何设置和获取盒模型对应的宽和高?

获取：

element.style.width/height：此种方式只能获取元素行内样式，不能获取style标签中的样式和外联的css文件中的样式
element.currentStyle.width/height：此方式是IE独有的方式
window.getComputedStyle(element).width/height：此种方式是兼容性比较好的方式。
element.offsetWidth/offsetHeight：此种方式是通用性最强的一中获取方式。

设置：

只能经过style设置html

什么是优雅降级和渐进加强?

css属性，有不少新属性是旧版本的浏览器不支持，这时候在开发的过程当中就会出现一个问题，是先考虑低版本浏览器仍是先考虑主流浏览器，因此出现两种观点或者说方式。1. 优雅降级：就是开发的时候主要仍是考虑当前主流浏览器的效果，低版本浏览器的兼容问题后期进行适当处理。2.渐进加强：在开发时，首先保证全部浏览器的展现效果都没问题，而后逐渐完善效果和功能，向更高的浏览器更好的效果前进。

谈谈你对BFC的了解

什么是BFC?

BFC是块级格式化上下文，就是页面中相对独立的一个区域。BDC的原理(渲染规则)：一、BFC里边的元素，在垂直反向会发生边距重叠现象。二、BFC在页面中独立的容器，里边的元素不会影响外面的元素，一样外边的元素也不会影响里边的元素怒。三、BFC区域不去旁边的float box区域重叠，能够用来消除浮动带来的影响。四、计算BFC的高度时，浮动的子元素也会参与计算。

如何建立BFC?

overflow属性不为visible，能够是hidden或者auto。
float 中，属性不为none，只要是设置了浮动，当前元素就建立了BFC。
position中，属性石absolute或者fixed，当前元素生成BFC。
display属性设置为：inline-block、table-cell、table-caption、flex、inline-flex

BFC使用场景?

解决margin重叠
解决float重叠
清除浮动

JS类

DOM事件

DOM事件级别有哪些?

DOM0级事件：在元素的事件属性绑定一个函数，缺点是不能绑定多个函数，后绑定的函数会覆盖先绑定的函数
DOM2级事件：addEventListener和removeEventListener两个函数添加事件，IE8及如下须要用attachEvent和detachEvent实现
DOM3级事件：DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，所有类型以下：1.UI事件，当用户与页面上的元素交互时触发，如：load、scroll。2.焦点事件，当元素得到或失去焦点时触发，如：blur、focus。3.鼠标事件，当用户经过鼠标在页面上执行操做时触发如：dbclick、mouseup。4.滚轮事件，当使用鼠标滚轮或相似设备时触发如：mousewheel。5.文本事件，当在文档中输入文本是触发，如：textInput。6.键盘事件，当用户经过键盘在页面上执行操做时触发如：keydown、keypress。7.合成事件，当为IME(输入法编辑器)输入字符时触发，如：compositionstart。8.变更事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

描述DOM事件捕获和冒泡的具体流程?

事件捕获：是事件从上到下发生，事件从最外层document开始触发，到点击的标签元素。
事件冒泡：事件从下到上发生，从点击的元素标签开始触发到document为止。

`Event`对象的常见应用场景?

Event对象实在事件发生时产生的默认形参，event对象包含一些属性和方法，同时还有一些IE独有的属性。

事件委托是什么？

事件委托就是根据事件冒泡的原理，把事件绑定到目标的父元素或者其余祖先元素上，触发执行效果。事件委托优势：一、能够提升js性能，提升事件的处理速度，减小内存的占用。二、动态添加dom元素，不须要修改事件绑定。

事件冒泡,e.target和e.currentTarget的区别

事件委托中，e.target指的是当前点击的标签，e.currentTarget指的是this，绑定事件的元素。

浏览器的兼容问题(js)

浏览器宽高问题：网页可见区域宽：document.body.clientWidth || document.documentElement.clientWidth; 网页可见区域高：document.body.clientHeight || document.documentElement.clientHeight; 整个网页的宽：document.body.scrollWidth || document.documentElement.scrollWidth; 整个网页的高：document.body.scrollHeight || document.doacumentElement.scrollHeight; 网页被卷去的高：document.body.scrollTop || document.documentELement.scrollTop; 网页左边卷去的距离：document.body.scrollLeft || document.docuemntElement.scrollLeft;
event事件问题：e = event || window.event;
DOM节点相关问题：获取下一个兄弟节点：ele.nextElementSibling和ele.nextSibling; 获取上一个兄弟节点：ele.previousElementSibling和ele.previousSibling; 获取第一个子节点：ele.firstElementChild和ele.firstChild; 获取最后一个子节点：ele.lastElementChild和ele.lastChild
document.getELementsByCLassName问题：IE678不支持getElementsByClassName,经过另外一种方式去实现该方法，获取全部元素，判断是否包含当前class，包含的话放到一个数组中，而后获取完全部包含改类名的元素后，返回当前数组。
获取元素的非行间样式值：object当前元素，oCss样式值：IE下：object.currentStyle[oCss];非IE下：getComputedStyule(object,null)[oCss]
事件监听和事件移除，IE下使用attachEvent和detachEvent，其余使用addEventListener和removeEventListener。
阻止事件传播：e.stopPropagation()或者e.cancelBubble = true;
阻止默认事件：e.preventDefault()或者e.returnValue = 'false';
Event对象中的target：获取target的兼容写法：e.target || e.srcElement; 鼠标来的地方：e.relatedTarget || e.formELement; 鼠标去的地方：e.relatedTarget || e.toElement;
火狐中的鼠标滚轮事件：火狐：监听DOMMoustScroll事件，非火狐：document.onmousewheel

JS原生

JS中有哪些数据类型

String、Number、Boolean、null、undefined五种基本数据类型。Object是复杂数据类型。

什么是闭包？闭包做用？在工做中是如何应用的?

一、外部函数定义的内部函数就是闭包。二、可让函数外部获取到函数内部的值，还能够抑制保留函数内部的变量。三、好比给某些对象添加实例方法，封装相关的功能集。

JS实现继承的几种方式?

js实现继承有六种方式：一、原型链继承：利用原型让一个引用类型继承另外一个引用类型的属性和方法。二、借用构造函数继承：在子类型内部调用父类的构造函数，使用call或者apply能够在新建立的对象上执行父类构造函数。三、组合继承：将原型链继承和构造函数继承整合在一块儿，发挥两者长处。四、原型式继承：借助原型能够利用已有的对象建立新对象，同时还没必要须所以建立自定义的类型。五、寄生式继承：建立一个仅用来封装继承过程的函数，在该函数内部以某种方式加强对象，最后再像真正使她作了全部工做同样返回他。六、寄生组合式继承。

建立对象的三种方式?

一、经过字面量形式建立对象。二、经过构造函数形式建立对象。三、经过new Object()建立对象。

`new Person()`时发生了什么?

一、建立一个对象。二、将构造函数中的this指向该对象。三、将构造函数的原型指向对象的原型，这样对象就有了构造函数中的方法。四、执行构造函数中的代码。

什么是深拷贝和浅拷贝？本身不用`JSON.parse`实现一个深拷贝的方法

深拷贝就是把全部的属性方法从新那一份放在新对象上，浅拷贝就是指拷贝引用，拷贝先后指向的都是同一个东西。深拷贝就是遍历全部的属性方法，而后建立新对象，给新对象添加一样的属性方法，返回新对象。

手工模拟完整的bind方法

Function.prototype.myBind = function(context){
  var that = this,
  slice = Array.prototype.slice,
  args = slice.apply(arguments,[1]),
  Func = Function(){},
  bound = function(){
    return that.apply(context instanceof Func ? context : this || window, args.contact(Array.propotype.slice.apply(arguments, [0])));
  };
  Func.prototype = that.prototype;
  bound.prototype = new Func();
  return bound;
}
复制代码

什么是节流和防抖？

throttle:函数节流是指须要间隔必定时间触发回调来控制函数调用频率。让函数有规律的调用，但不要太频繁，而是每隔一段时间调用一次。好比：咱们可让scroll中的回调函数每隔500ms调用一次，而不是每触发一次滚动就进行一次函数调用。函数节流是下降事件回调函数的执行频率，当事件一直被触发时，回调函数将以某个频率不断地执行。
debounce:函数防抖是指对于连续的事件响应咱们只须要执行一次回调。好比：注册用户名验证或者下拉模糊搜索：这类效果通常是在像搜索框中输入字符时，从后台服务器拉取相应的验证结果或者模糊查询的结果，一般作法是在键盘抬起keyup时触发某个函数，用来向后端请求数据，可是若是每次抬起都进行一次请求，那咱们搜索过程当中就会进行超级超级多的请求，而咱们实际须要的只是对最后一次键盘抬起时输入框中的文字进行请求，全部解决方式：在键盘抬起后的一段时间中，若是不进行按键操做，就执行回调函数。通俗来说就是说用户输入不间断的时候，暂时不执行回调函数，当用户输入间隔超过必定时间的时候才执行回调函数。函数防抖是在某时间结束后的一段时间内，若是不在触发该事件，就执行相应的回调函数。

上拉刷新和下拉加载的实现原理？

写一个验证邮件的正则表达式

^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$;
^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$

事件绑定和普通事件的区别（能够举例说明）

普通事件会覆盖，就是一般所说的DOM0级事件。时间绑定的话能够绑定多个事件，不会覆盖。

javascript 模版引擎用过哪些？实现原理是什么？

模板引擎：artTemplate，其余没用过的xtemplate、mustache、handlebars.js、doT、underscore.template
实现原理：一、正则匹配替换二、拼接成字符串三、使用Function函数把字符串变成js代码执行

合并两个对象

Object.assign(): 该方法能够将参数进行合并，参数都是对象，若是第一个对象也是须要合并的对象，那也会改变该对象的内容，若是第一个对象是空，则合并其余参数对象。
经过for in遍历每个对象，而后拷贝到新对象中。
$.extend(): 合并参数，第一个参数能够是true或者false，也能够是空对象，这样的话就是合并后边的参数对象，若是第一个参数也是要合并的对象，就会更改第一个对象的内容。变成和合并之后的对象同样。

动态向一个div中插入1000个div标签，如何实现？（考性能）

使用文档碎片，一次添加

html5新特性

http://blog.csdn.net/gane_cheng/article/details/52819118
一、语义特性：HTML5新标签，具备特定的语义特点，方便搜索引擎识别和快速识别内容区域。二、本地存储特性：HTML5提供了网页存储的api，包括web应用的离线试用，相比较cookie更安全更高效，更大的存储空间。离线存储主要包括应用程序缓存、本地存储、索引数据库、文件接口。三、设备访问特性：包括Geolocation地理位置和视频影音可直接与摄像头等设备链接。四、链接特性：基于网页的实时聊天，更快的网页游戏体验，更优化的在线交流，更有效的服务器推送技术，如：Server-Sent Event和WebSockets，这两个特性实现服务器将数据推送到客户端的功能。五、网页多媒体特性：支持网页端的Audio、Video等多媒体功能。六、三维、图形以及特效特性：基于SVG、Canvas、WebGL以及CSS3的3d功能。七、性能与集成特性：HTML5 的XMLHttpRequest2等技术，解决之前的跨域等问题，帮助网站和web应用在多样化的环境中更快速的工做。

严格模式和非严格模式的区别

严格模式下，delete运算符后跟随非法标识符，会抛出语法错误；非严格模式下，会静默失败或者返回false
严格模式下，对象直接定义同名属性会抛出语法错误；非严格模式下不会报错；
严格模式下，函数形参存在同名的，抛出错误；非严格模式不会；
严格模式不允许直接只用八进制变量。
严格模式下，arguments是传入函数内实参列表的静态副本；非严格模式下，arguments对象里的元素和实参对象是同一个值得引用。
严格模式下，evel和arguments不能用做变量声明和赋值，只能当作关键字。
严格模式下，会限制对调用栈的检测能力，访问arguments.callee.caller会抛出异常。
严格模式下，变量必须先声明，不能直接赋值，不会隐式建立全局变量，不能使用with；
严格模式下，call和apply传入null和undefined保持原样不会被转换为window。

对于js中浮点数计算会丢失精度的问题，你有什么解决思路？

首先判断要进行计算的浮点数的小数位数多的一项获得小数位数n，而后把要进行计算的全部项都乘以10的n次幂，变成整数，而后再计算结果，以后再除以10的n次幂，变成小数。若是是乘法就是计算之后除以小数位数的总和，除法的话不用除。

JQuery

jquery.extend , jquery.fn.extend的区别

jQuery.extend扩展的是类自己，jQuery.fn.extend扩展的事类实例的对象。jQuery.extend对应的是('#id').xxx；

谈一下jquery中的bind，live，delegate，on区别

bind是直接绑定在元素上，不支持动态元素；live使用过冒泡的方式绑定到元素上，适合绑定到doucment或者列表元素的父元素上，支持动态数据；delegate适用于更小范围的事件代理，性能优于live；on是最新的时间绑定机制，1.7版本之后整合了其余三种方式进行时间绑定；同时1.7版本以上删除了live事件，经过on事件代替；jQuery3.0版本之后删除了bind、live、delegate方法。
bind只能支持已存在的元素的事件绑定，其余三种都是支持动态元素的事件绑定；
删除方式不一样。bind使用unbind删除事件；live使用die删除事件；delegate使用undelegate删除事件；on使用off删除绑定事件；

document.ready和document.load和$(function(){})有什么区别？

document.onload事件是当页面全部资源都加载完毕之后才会执行其中的代码。(function(){})
document.onload只能写一个，写多个会被覆盖。$(document).ready(function(){})能够编写多个，而且按顺序执行。

('#aaa').data()各自做用是什么？有什么区别

$('#aaa').data()方法是设置和获取aaa元素data-属性开头的值。

ES6

何时应该用箭头函数？何时不能用？

箭头函数中的this是直接定义的，建立函数的时候就会定义当前this的值为当前做用域。当须要提早定义this的时候可使用箭头函数，或者函数中用不到this的时候可使用箭头函数。
当存在动态上下文的时候，不能使用箭头函数。好比：对象中的函数、原型上定义的方法、构造函数中的方法、事件绑定的回调函数中、以及别人不容易看懂的简单函数中都不能使用或者不该该使用箭头函数。

请写出ES6中Array.isArray()的实现代码

Object.prototype.toString.call(arr) === '[object Array]'

如何在项目中解析处理es6和es7代码

babel把ES6代码转换成ES5代码而且是严格模式下的ES5代码。

Promise经常使用方法，Promise.race的做用，then方法里reject和catch的区别

Promise经常使用方法resolve,reject,catch,all,race; Promise.race的做用是把几个Promise对象一块儿执行，哪一个执行最快，就用他的返回结果； then方法里的reject函数是当状态变成rejected的时候执行的，可是catch方法是发生异常时调用的，若是不写then的第二个函数，那么reject执行的时候也会跳转到catch中。

渲染机制

什么是`DOCTYPE`及做用?标准模式和兼容模式有什么区别?

DOCTYPE是告诉浏览器以哪一种模式解析文档，有的话就是标准模式，没有或者不正确的话就是兼容模式解析。
标准模式的排版和js运做模式都是以浏览器支持的最高标准运行。兼容模式是向后兼容，确保更多的内容显示，重点在于内容的显示。

浏览器是如何渲染页面的?

当浏览器加载html页面的时候，浏览器会将html页面解析成DOM树，将css样式解析成样式表模型，而后整合DOM树和样式表模型，建立渲染树，render tree是计算之后的，浏览器把整个渲染树绘制到屏幕上显示出来。（DOM树 + Css样式表模型 --> render tree渲染树 --> 绘制到屏幕上）

什么是重排？何时会触发重排?

重排也叫回流，就是由于元素改变位置或者文档内容结构发生变化的时候，从新布局渲染树的过程。DOM操做如增删节点、元素为止变化、元素样式变化、元素隐藏显示、样式表发生变化、浏览器调整窗口大小、伪类样式激活等都会触发重排。

什么是重绘？何时会触发重绘?

重绘是局部样式改变例如颜色背景色引起的渲染树变化，就是样式改变不影响元素在文档流中的位置的时候发生的。

JS运行机制

如何理解JS的单线程

单线程就是当js代码执行的时候，是按照从上到下的顺序一次执行同步代码，异步代码执行的时候，实际上是把他们放在了任务队列中，当主线程的代码都执行完之后，会依次执行任务队列中的代码。就算是html5新增的async和defer，也只是不阻塞当前代码执行，异步加载，可是加载完之后仍是会放在任务队列中排队等待执行。

什么是`Event Loop`,请简述其过程

Event Loop是js中的事件循环机制，主要就是由于js是单线程的，全部一些异步的操做回调函数都会放在消息队列或者说任务队列中，而后当当前js主线程执行完全部代码的时候，就去去消息队列中取消息，其实就是回调函数，而后执行他，消息队列遵循的是先进先出的原则，最早放到队列中的消息优先取出。

页面性能

前端性能优化的方法有哪些？至少说出10种以上

雅虎军规：

尽可能减小http请求次数
减小DNS查找次数
避免跳转，301,302
可缓存的AJAX
推迟加载内容
预加载
减小DOM元素数量
根据域名划分页面内容
使iframe的数量最小
不要出现404错误
使用内容分发网络
为文件头制定Expires或者Cache-Control
Gzip压缩文件内容
配置Etag
尽早刷新输出缓冲
使用GET来完成AJAX请求
把样式表置于顶部
避免使用css表达式
使用外部JavaScript和Css
减小JavaScript和css
用代替@import
避免使用滤镜
把脚本置于页面底部
剔除重复脚本
减小DOM访问
开发智能事件处理程序
减少cookie体积
对于页面内容使用无cookie的域名
优化图像
优化css Spirite，雪碧图
不要再HTML中缩放图像
fovicon.ico要小并且可缓存
保持单个内容小于25k
打包组件成复合文本

如何实现JS的异步加载? `async`和`defer`的区别是什么?

js异步加载主要方式：动态建立script、async、defer
async和defer的区别在于async是当前js只要加载完成之后就会执行，defer是当全部元素解析完成之后，才会按照加载顺序执行。

缓存

Expires和Cache-Control是如何工做的？

Expires是设置资源过时时间，Cache-Control是设置过多长时间失效。Expires是http 1.0里边的缓存设置方式，Cache-Control是http 1.1之后设置缓存的方式，若是两者同时存在Cache-Control会覆盖Expires,当客户端发送请求的时候会先判断是否过时，若是没有过时就直接从缓存中读取内容，再也不发送请求。

Last-Modified和Etag是如何工做的？

Last-Modified是资源在服务端最后修改的日期，会在响应头中返回给客户端，客户端存储Last-Modified，当客户端再次发送请求的时候，若是缓存已通过期，就会带着Last-Modified的日期发送到服务端，若是时间没变化，直接304，返回空的响应体，客户端仍是从缓存中取数据。若是修改时间不一致，就会响应修改之后的内容，而且在响应头中返回新的last-modified给客户端。
Etag是资源在服务端的标识码，当客户端请求资源的时候，服务端会生成相应的标识码在响应头中返回给客户端，客户端存储Etag，当客户端再次请求该资源的时候，会带着Etag，若是服务端的Etag和请求体中的Etag相同的话，就是直接304，从缓存中读取数据。若是不一致，就会响应修改之后的内容，同时在响应头中返回一个新的Etag给客户端。

请描述`cookie`、`sessionStorage`和`localStorage`的区别

cookie和loaclStorage、sessionStorage都是存储在客户端。
一、大小不一样：cookie存储最多4k的内容，storage能够存储差很少5M的内容。二、有效时间：cookie是设置过时时间，只要是在过时时间以前都是有效的；localStorage是持久数据，除非手动清除，不然会一直存储在客户端中；sessionStorage是session级别的，当浏览器窗口关闭的时候就会清除。三、他们与服务端的交互方式：cookie会在请求资源的时候带着，在请求体中，同时服务端也能够写cookie到客户端，storage不会在请求的时候带着。

框架

前端路由的实现原理

hash：经过#拼接的方式，改变当前地址，同时不会向服务器发送请求，可是会触发hashState事件，而后再hashState事件中处理地址和其余相应的操做。
history API: pushState,replaceState两者都会像页面中添加一条历史记录同时地址栏发生变化，可是不会向服务端发送请求，会触发popState事件，同时在popState事件中获取url处理相应的内容变化。

`MVVM`框架解决了什么问题？带来了什么问题？

关注点分离；操做数据即操做DOM；动态模板

浏览器地址栏里面的'＃' 如何清楚？mode共有几个参数，参数有什么区别？

经过history的pushState和relaceState方法能够改变地址栏的连接并且不会刷新当前页面。路由的另外一种方式。
mode暂时不知道是什么。

vue中父组件如何给子组件传递值

使用props进行传递，子组件须要监听watch并赋值，不然获取到的数据是空数组。
父组件经过ref属性调用子组件中的方法，经过参数把数据传递给子组件，子组件获取参数数据并使用。

react的优缺点

优势：一、React速度很是快，由于它采用的是虚拟dom的技术，性能好。二、一切都是component，代码复用更容易，更加模块化。三、跨浏览器兼容，虚拟DOM解决了跨浏览器问题，在IE8中也没有问题。四、代码兼容性好，由于只是view层，能够更好的如今的代码结合。五、基于this.props和this.state生成HTLML，bug少。
缺点：一、React只是view层，必须结合使用Redux、ReactRouter等才能构建大型应用程序。

React组件中props和state有什么区别？

props通常用于父组件想子组件传递数据使用，父子组件通讯使用。state主要用于组件内的状态维护，数据更新渲染传递等。

什么是JSX

JSX是react中的一种语法，JavaScript XML语法，方便模板的生成输出。

React中不一样组件传递数据的方式有哪些？至少说出三种

props：父组件经过props把数据传递给子组件
context：经过设置当前组件的context，能够再他的子孙组件中经过this.context获取数据
父组件调用子组件的函数而且把数据当作参数传递给子组件
父组件把函数传递给子组件，子组件调用函数并传递参数

请描述React的组件加载生命周期函数以及`shouldComponentUpdate`方法的实际使用场景?

getInitialState、componentWillMount、render、componentDidMount、componentWillUnmount
componentWillReseiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate、componentWillUnmount
shouldComponentUpdate是在组件接收到新的props的时候调用，经过接收到的数据进行判断是否进行更新。

说一下angular、vue、react的相同点和不一样点?各适用于什么样的项目场景?

工程化

什么叫模块化？你用过哪些模块化解决方案？

什么叫组件化？你在工做中是如何实现组件化的？

gulp和webpack的相同点和不一样点?

什么是热加载?

HTTP

HTTP报文的组成部分

GET和POST的区别

HTTP常见状态码

什么是Restful API?

HTTPS和HTTP的区别是什么?

从在浏览器中输入URL到页面渲染出来都通过了什么过程？

JSON和JSONP 区别是什么？JSONP的原理是？

用过那些跨域技术

ajax的参数

先后端通讯

什么是同源策略及限制?

先后端如何通讯?

用原生JS模拟一下`jquery`的`ajax`方法

跨域通讯的几种方式?

安全

`CSRF`的原理以及如何防护

`XSS`的原生和如何防护

服务器

如何在web应用中在实现权限控制?

Web服务器、应用服务器、Web容器、反向代理服务器的区别和联系?

错误处理

前端错误的分类?

程序出现bug了，你是如何调试的?

如何分类捕获不一样的错误?

如何把生产环境的错误上报？

项目问题

介绍一下你的项目？这个项目有哪些模块？你负责哪些模块？

你在项目中的角色

你以为在项目中作的最出彩的点有哪些？

遇到过哪些很是难以解决的问题？最终是如何解决的？

若是你是项目负责人，你会如何分配任务？如何保证按时完成？如何让成员够持续成长？

正常非技术问题

请你自我介绍一下你本身？

你以为你个性上最大的优势是什么？

说说你最大的缺点？

你对加班的见解？

在五年的时间内，你的职业规划？

你朋友对你的评价？

你还有什么问题要问个人吗？

你的业余爱好是什么？

你为何从上家公司离职?

故意挖坑的问题

你的直属上级和顶级上级对一件事情的意见不一致，你会听谁的意见？

若是部门开发的时候和你的主管发生了争吵，你会如何处理？

与上级意见不一致，你将怎么办？

你喜欢跟什么样的主管共事？

咱们为何要聘用你?

你没有工做经验如何能胜任这份工做？

你最崇拜的人是谁?

你有创业的想法吗？

代码运行结果，并解释

if(!("a" in window)){
  var a = 1;
}
console.log(a);
复制代码

function MyObj(){
  this.p.pid++;
}
MyObj.prototype.p = {'pid':0}
MyObj.prototype.getNum = function(num){
  return this.p.pid+num;
}
var _obj1 = new MyObj();
var _obj2 = new MyObj();
console.log(_obj1.getNum(1)+_obj2.getNum(2))
复制代码

var func = (function(a){
  this.a = a;
  return function(a){
    a+=this.a;
    return a;
  }
})(function(a,b){
  return a;
}(1,2));
func(4);
复制代码

function Foo() {
 getName = function () { alert (1); };
 return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出如下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
复制代码

for(var i=0;i<10;i++){
       alert(i);
       break;
   }
   alert(i);

   for(var i=0;i<10;i++){
      continue;
      alert(i);
   }
   alert(i)
复制代码

function C1(name){
	if(name) this.name = name;
}
function C2(name){
this.name =name;
}
function C3(name){
 this.name = name ||'join';
}
C1.prototype.name='Tom';
C2.prototype.name='Tom';
C3.prototype.name='Tom';
alert(new C1().name)+(new C2().name)+(new C3().name);

复制代码

var a=1;
Var obj ={
   “name”:”tom”
}
function fn(){
   var a2 = a,
   obj2 = obj,
   a2 =a,
   obj2.name =”jack”
}
fn();
console.log(a);
console.log(obj);
复制代码

前端笔试题收集（笔记）

前端开发知识点

HTML&CSS：

JavaScript：

其余：

CSS类

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为100px，中间自适应。

左侧菜单栏占300px，右侧内容能够根据浏览器自适应。根据此要求，编写html css代码

CSS选择器又哪些？有哪些新特性？有哪些伪类？

清除浮动的几种方式，优缺点

图片如何实现垂直剧中的

css hack你知道哪些？

谈谈你对CSS盒模型的认识

获取：

设置：

谈谈你对BFC的了解

JS类

DOM事件

DOM事件级别有哪些?

描述DOM事件捕获和冒泡的具体流程?

Event对象的常见应用场景?

事件委托是什么？

事件冒泡,e.target和e.currentTarget的区别

浏览器的兼容问题(js)

JS原生

JS中有哪些数据类型

什么是闭包？闭包做用？在工做中是如何应用的?

JS实现继承的几种方式?

建立对象的三种方式?

new Person()时发生了什么?

什么是深拷贝和浅拷贝？本身不用JSON.parse实现一个深拷贝的方法

手工模拟完整的bind方法

什么是节流和防抖？

上拉刷新和下拉加载的实现原理？

写一个验证邮件的正则表达式

事件绑定和普通事件的区别（能够举例说明）

javascript 模版引擎用过哪些？实现原理是什么？

合并两个对象

动态向一个div中插入1000个div标签，如何实现？（考性能）

html5新特性

严格模式和非严格模式的区别

对于js中浮点数计算会丢失精度的问题，你有什么解决思路？

JQuery

jquery.extend , jquery.fn.extend的区别

谈一下jquery中的bind，live，delegate，on区别

document.ready和document.load和$(function(){})有什么区别？

('#aaa').data()各自做用是什么？有什么区别

ES6

何时应该用箭头函数？何时不能用？

请写出ES6中Array.isArray()的实现代码

如何在项目中解析处理es6和es7代码

Promise经常使用方法，Promise.race的做用，then方法里reject和catch的区别

渲染机制

什么是DOCTYPE及做用?标准模式和兼容模式有什么区别?

浏览器是如何渲染页面的?

什么是重排？何时会触发重排?

什么是重绘？何时会触发重绘?

JS运行机制

如何理解JS的单线程

什么是Event Loop,请简述其过程

页面性能

前端性能优化的方法有哪些？至少说出10种以上

如何实现JS的异步加载? async和defer的区别是什么?

缓存

Expires和Cache-Control是如何工做的？

Last-Modified和Etag是如何工做的？

请描述cookie、sessionStorage和localStorage的区别

框架

前端路由的实现原理

MVVM框架解决了什么问题？带来了什么问题？

浏览器地址栏里面的'＃' 如何清楚？mode共有几个参数，参数有什么区别？

vue中父组件如何给子组件传递值

react的优缺点

React组件中props和state有什么区别？

什么是JSX

React中不一样组件传递数据的方式有哪些？至少说出三种

请描述React的组件加载生命周期函数以及shouldComponentUpdate方法的实际使用场景?

说一下angular、vue、react的相同点和不一样点?各适用于什么样的项目场景?

工程化

什么叫模块化？你用过哪些模块化解决方案？

`Event`对象的常见应用场景?

`new Person()`时发生了什么?

什么是深拷贝和浅拷贝？本身不用`JSON.parse`实现一个深拷贝的方法

什么是`DOCTYPE`及做用?标准模式和兼容模式有什么区别?

什么是`Event Loop`,请简述其过程

如何实现JS的异步加载? `async`和`defer`的区别是什么?

请描述`cookie`、`sessionStorage`和`localStorage`的区别

`MVVM`框架解决了什么问题？带来了什么问题？

请描述React的组件加载生命周期函数以及`shouldComponentUpdate`方法的实际使用场景?

用原生JS模拟一下`jquery`的`ajax`方法

`CSRF`的原理以及如何防护

`XSS`的原生和如何防护