HTML(5)
1.viewport的常见设置有哪些？
viewport常常使用在响应式开发以及移动web开发中，viewport顾名思义就是用来设置视口，主要是规定视口的宽度、视口的初始缩放值、 视口的最小缩放值、视口的最大缩放值、是否允许用户缩放等。一个常见的viewport设置如下：
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width，height=device-height" />其中同时设置width和initial-scale的目的是为了解决iphone、ipad、ie横竖屏不分的情况，因为这两个值同时存在时会取较大值。
参考：
A tale of two viewports — part one (译)；
A tale of two viewports — part two (译)；
3. 说说你对语义化的理解？
- 1：去掉或样式丢失的时候能让页面呈现清晰的结构：html 本身是没有表现的，我们看到例如 <h1> 是粗体，字体大小 2em，加粗；<strong > 是加粗的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达 html 的语义，可以说浏览器的默认样式和语义化的 HTML 结构是不可分割的。
- 2. 屏幕阅读器（如果访客有视障）会完全根据你的标记来 “读” 你的网页。
- 3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对 CSS 的支持较弱）。
- 4.
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。 - 6.
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
CSS(3)
1.水平居中的方法
1.元素为行内元素，设置父元素text-align:center
2.如果元素宽度固定，可以设置左右margin为auto;
3.如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
4.使用flex-box布局，指定justify-content属性为center
5.display设置为tabel-ceil
2.垂直居中的方法
1.将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
2.使用flex布局，设置为align-item：center
3.绝对定位中设置bottom:0,top:0,并设置margin:auto
4.绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
5.文本垂直居中设置line-height为height值
参考：
3.如何实现一个自适应的正方形
利用padding设置为百分比时是相对于父级元素的，因此同时设置width与padding-top(padding-bottom)为同一个百分数， 并且设置height:0即可实现一个正方形。
4.简要介绍一下flex布局
5.如何实现两列布局
1.将元素的display设置为行内元素
2.两个元素全部使用浮动
3.一个元素左浮动，第二个元素不便，同时设置一个margin-left值
4.使用flex-box布局
7.如何使用CSS实现硬件加速？
硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能， 一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)
参考：
8.重绘和回流（重排）是什么，如何避免？
DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分 重新绘制到屏幕上的过程称为重绘。引起重排的原因有1.添加或者删除可见的DOM元素，2.元素位置、 尺寸、内容改变，3.浏览器页面初始化，4.浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，减少 重绘和重排的方法：1.不在布局信息改变时做DOM查询，2.使用cssText或者className一次性改变属性 3.使用fragment，4.对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他 元素
参考：
2.网页性能管理详解
9.说一说你了解的圣杯布局和双飞翼布局？
10.说一说css3的animation
css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义 每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式， 这些相关的动画子属性有：animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态，如暂停运行等、animation-timing-function 定义播放的方式，如恒速播放、艰涩播放等。
12.说一下你了解的CSS选择器？
参考：
14.CSS3动画如何实现暂停？
css3动画可以通过设置animation-play-state属性为paused来设置这个动画暂停。
16.简要介绍一下一种css预处理器？
Javascript
1.引起内存泄漏的操作有哪些
1.全局变量引起
2.闭包引起
3.dom清空，事件未清除
4.子元素存在引用
5.被遗忘的计时器
参考：
3.简要介绍ES6
ES6在变量的声明和定义方面增加了let、const声明变量，有局部变量的概念，赋值中有比较吸引人的结构赋值，同时ES6对字符串、 数组、正则、对象、函数等拓展了一些方法，如字符串方面的模板字符串、函数方面的默认参数、对象方面属性的简洁表达方式，ES6也 引入了新的数据类型symbol，新的数据结构set和map,symbol可以通过typeof检测出来，为解决异步回调问题，引入了promise和 generator，还有最为吸引人了实现Class和模块，通过Class可以更好的面向对象编程，使用模块加载方便模块化编程，当然考虑到 浏览器兼容性，我们在实际开发中需要使用babel进行编译。
4.对js原型的理解
我们知道在es6之前，js没有类和继承的概念，js是通过原型来实现继承的。在js中一个构造函数默认自带有一个prototype属性， 这个的属性值是一个对象，同时这个prototype对象自带有一个constructor属性，这个属性指向这个构造函数，同时每一个实例 都有一个proto属性指向这个prototype对象，我们可以将这个叫做隐式原型，我们在使用一个实例的方法的时候，会先检查 这个实例中是否有这个方法，没有则会继续向上查找这个prototype对象是否有这个方法，刚刚我们说到prototype是一个对象， 那么也即是说这个是一个对象的实例，那么这个对象同样也会有一个proto属性指向对象的prototype对象。
5.对js模块化的理解
在ES6出现之前，js没有标准的模块化概念，这也就造成了js多人写作开发容易造成全局污染的情况，以前我们可能会采用立即执行 函数、对象等方式来尽量减少变量这种情况，后面社区为了解决这个问题陆续提出了AMD规范和CMD规范，这里不同于Node.js的 CommonJS的原因在于服务端所有的模块都是存在于硬盘中的，加载和读取几乎是不需要时间的，而浏览器端因为加载速度取决于网速， 因此需要采用异步加载，AMD规范中使用define来定义一个模块，使用require方法来加载一个模块，现在ES6也推出了标准的模块 加载方案，通过export和import来导出和导入模块。
6.如何实现一个JS的AMD模块加载器
AMD是解决JS模块化的规范，实现这样的一个模块加载器的关键在于解决每个模块依赖的解析。首先我们需要有一个模块的入口，也就是主模块，比如我们使用 一个use方法作为入口，之后以数组的形式列出了主模块的依赖，这时候我们要想到的是如何解析这一个一个的依赖，也就是如何解析出一个个js文件的绝对地址， 我们可以制定一个规则，如默认为主模块的路径为基准，也可以像requirejs一样使用一个config方法来指定一个baseurl和为每一个模块指定一个path，最后就是 模块的问题，我们需要暴露一个define方法来定义模块，也就是模块名，依赖以及每个模块的各自代码。其中每个模块的代码都应该在依赖加载完之后执行，这就是一个 回调函数，模块的依赖、回调函数、状态、名字、模块导出等可以看做是一个模块的属性，因此我们可以使用一个对象来保存所有的模块，然后每个模块的各个属性存放在一个对象中。 最后我们来考虑一下模块加载的问题，上面我们说到use方法，use方法的逻辑就是遍历依赖，然后对每个模块进行加载，也就是解析地址然后使用插入script，我们假设 使用loadModule方法来加载依赖，那么这个函数的逻辑就应该是检查我们的模块是否已经加载过来判断是否需要加载，如果这个模块还有依赖则调用use方法继续解析，模块依赖中我们 还没有提到的问题就是每个模块的依赖是需要被传进模块里来使用的，解决方法就是每个模块的callback方法执行后的返回的export记录下来然后使用apply之类的方法将这些参数传递进去。 大致就是这样子的。
参考：
7.简要介绍事件代理，以及什么时候使用，事件代理发生在事件处理流程的哪个阶段，有什么好处？
事件代理就是说我们将事件添加到本来要添加事件的父节点，将事件委托给父节点来触发处理函数，这通常会在 这通常会使用在大量的同级元素需要添加同一类事件的时候，比如一个动态的非常多的列表，需要为每个列表项都添加 点击事件，这时可以使用事件代理，通过判断e.target.nodeName来判断发生的具体元素，从而判断是否是在 列表项中触发，这样的好处是可以减少事件绑定，同时动态的DOM结构仍然可以监听。事件代理发生在冒泡阶段。
参考：
8.使用new操作符实例化一个对象的具体步骤
1.构造一个新的对象
2.将构造函数的作用域赋给新对象（也就是说this指向了新的对象）
3.执行构造函数中的代码
4.返回新对象
9.js如何判断网页中图片加载成功或者失败
使用onload事件运行加载成功，使用onerror事件判断失败
10.递归和迭代的区别是什么，各有什么优缺点？
程序调用自身称为递归，利用变量的原值推出新值称为迭代，递归的优点 大问题转化为小问题，可以减少代码量，同时应为代码精简，可读性好， 缺点就是，递归调用浪费了空间，而且递归太深容易造成堆栈的溢出。迭代的好处 就是代码运行效率好，因为时间只因循环次数增加而增加，而且没有额外的空间开销， 缺点就是代码不如递归简洁
参考：
11.策略模式是什么，说一下你的理解？
策略模式就是说我们将一系列的算法封装起来，使其相互之间可以替换，封装的算法具有一定的独立性，不会随客户端的变化而变化，比较常见的使用常见就是类似于 表单验证这种多场景的情况，我们使用策略模式就可以避免使用一堆的if...else。
12.什么是事件循环（EVENT LOOP）？
我们常常说js是单线程的，是指js执行引擎是单线程的，除了这个单线程，还有一个 任务队列，在执行js代码的过程中，执行引擎遇到注册的延时方法，如定时器，DOM事件， 会将这些方法交给相应的浏览器模块处理，当这些延时方法有触发条件去触发的时候， 这些延时方法会被添加至任务队列，而这些任务队列中的方法只有js的主线程空闲了才会执行， 这也就是说我们常常用的定时器定的时间参数只是一个触发条件，具体多少时间后执行其实还需要看 js主线程空闲与否
参考：
【转向Javascript系列】从setTimeout说事件循环模型
13.原生JS操作DOM的方法有哪些？
获取节点的方法getElementById、getElementsByClassName、getElementsByTagName、 getElementsByName、querySelector、querySelectorAll,对元素属性进行操作的 getAttribute、 setAttribute、removeAttribute方法，对节点进行增删改的appendChild、insertBefore、replaceChild、removeChild、 createElement等
14.typeof操作符返回值有哪些，对undefined、null、NaN使用这个操作符分别返回什么
typeof的返回值有undefined、boolean、string、number、object、function、symbol。对undefined 使用返回undefined、null使用返回object，NaN使用返回number
15.实现一个类型判断函数，需要鉴别出基本类型、function、null、NaN、数组、对象？
只需要鉴别这些类型那么使用typeof即可，要鉴别null先判断双等判断是否为null，之后使用typeof判断，如果是obejct的话，再用Array.isArray判断 是否为数组，如果是数字再使用isNaN判断是否为NaN,（需要注意的是NaN并不是JavaScript数据类型，而是一种特殊值）如下：
function type(ele) {
if(ele===null) {
return null;
} else if(typeof ele === 'object') {
if(Array.isArray(ele)) {
return 'array';
} else {
return typeof ele;
}
} else if(typeof ele === 'number') {
if(isNaN(ele)) {
return NaN;
} else {
return typeof ele;
}
} else{
return typeof ele;
}
}16.javascript做类型判断的方法有哪些？
typeof、instanceof 、 Object.prototype.toString()(待续)
17.JavaScript严格模式下有哪些不同？
- 不允许不使用var关键字去创建全局变量，抛出ReferenceError
- 不允许对变量使用delete操作符，抛ReferenceError
- 不可对对象的只读属性赋值，不可对对象的不可配置属性使用delete操作符，不可为不可拓展的对象添加属性，均抛TypeError
- 对象属性名必须唯一
- 函数中不可有重名参数
- 在函数内部对修改参数不会反映到arguments中
- 淘汰arguments.callee和arguments.caller
- 不可在if内部声明函数
- 抛弃with语句
参考：
18.setTimeout和setInterval的区别，包含内存方面的分析？
setTimeout表示间隔一段时间之后执行一次调用，而setInterval则是每间隔一段时间循环调用，直至clearInterval结束。 内存方面，setTimeout只需要进入一次队列，不会造成内存溢出，setInterval因为不计算代码执行时间，有可能同时执行多次代码， 导致内存溢出。
参考：
JS 中settimeout和setinterval函数的区别
setTimeout() 和 setInterval() 本质区别在哪里？
21.如何阻止事件冒泡和默认事件？
标准的DOM对象中可以使用事件对象的stopPropagation()方法来阻止事件冒泡，但在IE8以下中IE的事件对象通过设置事件对象的cancelBubble属性为true来阻止冒泡； 默认事件的话通过事件对象的preventDefault()方法来阻止，而IE通过设置事件对象的returnValue属性为false来阻止默认事件。
22.addEventListener有哪些参数？
有三个参数，第一个是事件的类型，第二个是事件的回调函数，第三个是一个表示事件是冒泡阶段还是捕获阶段捕获的布尔值，true表示捕获，false表示冒泡
23.介绍一下Promise，底层如何实现？
24.如何实现懒加载？
懒加载就是根据用户的浏览需要记载内容，也就是在用户即将浏览完当前的内容时进行继续加载内容，这种技术常常用来加载图片的时候使用。我们判断用户是否即将浏览到底部之后进行在家内容 这时候可能会需要加载大量的内容，可以使用fragment来优化一下，因为大部分是使用滑动和滚轮来触发的，因此很有可能会不断触发，可以使用函数节流做一个优化，防止用户不断触发。
25.函数节流是什么？
函数节流就是让一个函数无法在很短的时间间隔内连续调用，而是间隔一段时间执行，这在我们为元素绑定一些事件的时候经常会用到，比如我们 为window绑定了一个resize事件，如果用户一直改变窗口大小，就会一直触发这个事件处理函数，这对性能有很大影响。
27.什么是深拷贝，什么是浅拷贝？
浅拷贝是指仅仅复制对象的引用，而不是复制对象本身；深拷贝则是把复制对象所引用的全部对象都复制一遍。
28.原生js字符串方法有哪些？
简单分为获取类方法，获取类方法有charAt方法用来获取指定位置的字符，获取指定位置字符的unicode编码的charCodeAt方法， 与之相反的fromCharCode方法，通过传入的unicode返回字符串。查找类方法有indexof()、lastIndexOf()、search()、match() 方法。截取类的方法有substring、slice、substr三个方法，其他的还有replace、split、toLowerCase、toUpperCase方法。
29.原生js字符串截取方法有哪些？有什么区别？
js字符串截取方法有substring、slice、substr三个方法，substring和slice都是指定截取的首尾索引值，不同的是传递负值的时候 substring会当做0来处理，而slice传入负值的规则是-1指最后一个字符，substr方法则是第一个参数是开始截取的字符串，第二个是截取的字符数量， 和slice类似，传入负值也是从尾部算起的。
30.SVG和Canvas的区别？
31.介绍一下ES6的暂时性死区和块级作用域
32.请介绍一下装饰者模式，并实现
在不改变元对象的基础上，对这个对象进行包装和拓展（包括添加属性和方法），从而使这个对象可以有更复杂的功能。
33.介绍一下职责链模式？
将一个流程进行分解，让这个流程在多个对象中进行传递，由最后一个对象完成这个流程。通过职责链模式能够将流程进行分解，从而解耦。
33.介绍一下桶排序和基数排序、快速排序
34.请说一下实现jsonp的实现思路？
jsonp的原理是使用script标签来实现跨域，因为script标签的的src属性是不受同源策略的影响的，因此可以使用其来跨域。一个最简单的jsonp就是创建一个script标签，设置src为相应的url，在url之后添加相应的callback，格式类似于 url?callback=xxx，服务端根据我们的callback来返回相应的数据，类似于res.send(req.query.callback + '('+ data + ')')，这样就实现了一个最简单的jsonp
参考：
35.如何实现一个双向数据绑定？
36.如何实现一个前端模板引擎？
37.请简要介绍一下PWA？
38.chrome浏览器的JS引擎是哪个？这个引擎做了哪些优化？
chrome的JS引擎是V8，V8是谷歌公司使用C++开发的
参考：
39.请介绍一下你所了解的函数式编程？
40.let和const的异同有哪些？
let和const都是对变量的声明，都有块级作用域的概念，不同的是const是对常量的声明，因此声明同时必须赋值，且之后不能更改，而let则可以。
41.将静态资源放在其他域名的目的是什么？
这样做的主要目的是在请求这些静态资源的时候不会发送cookie，节省了流量，需要注意的是cookie是会发送给子域名的（二级域名），所以这些静态资源是不会放在子域名下的， 而是单独放在一个单独的主域名下。同时还有一个原因就是浏览器对于一个域名会有请求数的限制，这种方法可以方便做CDN。
参考：
42.前端如何实现PV和UV的统计？
43.简要介绍一下RSA
44.如何实现对一个DOM元素的深拷贝，包括元素的绑定事件？
45.canvas性能优化的方法有哪些？
46.介绍一下KMP算法？
47.简要介绍一下WebPack的底层实现原理？
48.简要介绍一下gulp的底层实现原理？
49.ajax的readyState有哪几个状态，含义分别是什么？
ajax的readyState共有5个状态，分别是0-4，其中每个数字的含义分别是0代表还没调用open方法，1代表的是未调用send方法，也就是还没发送数据给服务器 2代表的是还没有接收到响应，3代表的是开始接收到了部分数据，4代表的是接收完成，数据可以在客户端使用了。
50.对于ES7你了解多少？
51.请简要介绍一下service worker？
52.SPA的路由是如果实现的，如果你来做一个前端路由，你会怎么做？
53.AMD与CMD的区别有哪些？
54.听说过UMD吗？可以简要介绍一下吗？
55.百度的构建工具FIS你了解吗？
移动Web
1.移动web开发与PC web开发的区别有哪些？
2.移动web开发中css常用的单位有哪些？
移动web开发中的css单位除了PC web开发常见的px、em、百分比，还有rem、vh、vw，rem类似于em，是一个相对字体大小， 不过rem相对的是根元素的字体大小，vw和vh是相对于viewport的宽高，这两个单位将viewport等分为100份，也就是说1vw 相当于viewport宽度的百分之一。
参考：
3.常见的移动端事件有哪些？
网络
1.页面从输入URL到展现发生了什么
输入URL之后，需要寻找到这个url域名的服务器IP，为了找到这个IP，浏览器首先会寻找缓存， 查看缓存中是否有记录，缓存中查找的顺序是浏览器缓存、系统缓存、路由器缓存，缓存中没有则 查找系统的hosts文件中是否有记录，如果没有记录则会查询DNS服务器，得到服务器的IP地址之 后，浏览器根据这个IP以及相应的端口号，（如HTTP协议默认的端口号为80，HTTPS协议的默认 端口号为443，当然可以在url中指定端口号）构造一个HTTP请求，并将这个HTTP包请求封装在 一个TCP包中，（这个HTTP请求报文会包含这次请求的信息，主要是请求方法、请求的说明和请 求附带的数据），这个tcp包依次会经过传输层、网络层、数据链路层、物理层到达服务器，服 务器解析这个请求来做出响应，（我们假定这个url是一个类似谷歌、淘宝这样的网站首页，而 不是简单的文件），服务器返回相应的HTML给浏览器，因为HTML是一个树形结构，浏览器根据 这个HTML来构建DOM树在DOM树的构建过程中如果遇到js脚本和外部js连接，则会停止构建DOM 树来执行和下载相应的代码，这会造成阻塞，这也就是为什么推荐js代码应该放在HTML代码的后 面，之后根据外部样式、内部样式、内联样式构建一个CSS对象模型树（CSSOM树），构建完成之 后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，如script、meta标签和排除display 为none的节点，之后就是进行布局，布局主要是确定各个元素的位置和尺寸，之后就是渲染页面。 因为HTML文件中会含有图片、音频、视频等资源，在解析DOM的过程中，遇到这些都会进行并行下 载，当然浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有请求中我们 还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先 查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304
参考：
2.cookie和session的异同
cookie和session都可以用来存储用户信息，cookie存放于客户端，session存放于服务端，因为cookie存放于客户端 有可能被窃取，因此cookie一般用来存放不敏感的信息，如用户设置的网站主题等，敏感的信息采用session存储，如用户 的登陆信息，session可以存放于文件、数据库、内存中都可以，cookie可以服务端响应的时候设置，也可以客户端通过js设置 cookie会在请求时在http首部发送给客户端，cookie一般在客户端有大小限制，一般为4k。
3.HTTP和HTTPS的区别
首先HTTP和HTTPS的默认端口号就不一样，HTTP的默认端口号为80，HTTPS的默认端口号为443，HTTP在传输过程中使用的是明文 传输，内容可能被窃取，而且无法验证通信方的身份，还有可能遭遇身份伪装，而HTTPS在应用层和传输层之间增加了ssl协议用来加密 内容，因此通过证书验证来验证身份，即使数据被窃取也无法解密，数据的传输更加安全。
4.ssl加密使用了那种算法，如何加密
5.TCP三次握手的过程，为什么是三次而不是两次或者四次？
第一次握手：客户端发送一个syn（同步）包（syn=x）给服务器，进入SYN_SEND状态，等待服务器确认
第二次握手：服务端收到客户端发送的同步包，确认客户端的同步请求（ack=x+1）,同时也发送一个同步包， 也就是一个ACK包+SYN包服务器进入SYN_RECV状态
第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送一个确认包，此包发送完毕，客户端和服务器进入 ESTABLISHED状态，完成三次握手
不是两次是为了防止已经失效的连接请求报文段突然又传送到了服务端，因而产生错误，比如有一个因网络延迟的请求 发送到了服务端，服务端收到这个同步报文之后进行确认，如果此时是两次握手，那么此时连接建立，但是客户端并没有发出 建立连接的请求，服务端却一直等待客户端发送数据，这样服务端的资源就白白浪费了。
不是四次的话是因为完全没有必要，三次已经足够了
参考：
6.TCP的四次挥手
第一次：主动关闭方发送一个FIN包，用来关闭主动关闭方到被动关闭方的数据传送，也就是告诉另一方我不再发送数据了，但此时仍可以接收数据
第二次：被动关闭方收到FIN包之后，发送一个确认（ACK）包给对方
第三次：被动关闭方发送一个FIN包，告诉对方不带发送数据
第四次：主动关闭方收到FIN包之后，发送一个ACK包给对方，至此完成四次挥手
7.HTTP报文的格式，传输中以何种方式传输
HTTP报文分为三个部分，起始行、首部和主体，其中起始行和首部以一个回车和换行符分隔，首部和主体以一个空行分隔，其中起始行是对这次HTTP请求或者响应 的描述，请求报文的起始行包括使用的HTTP方法、请求的url地址、HTTP版本，响应报文的起始行包括HTTP的版本，HTTP状态码，http状态码的描述，首部也 就是常说的HTTP头部，如Date、Cookie、Content-Type等，主体是这次请求或响应的数据，传输中以明文传输。
参考：
8.常见的HTTP头部
可以将HTTP首部分为通用首部、请求首部、响应首部、实体首部，通用首部表示一些通用信息，如Date表示报文创建时间，请求首部就是请求报文中 独有的，如cookie、和缓存相关的If-Modified-Since，响应首部就是响应报文中独有的，如set-cookie和重定向有关的location，实体首部用来 描述实体部分，如Allow用来描述可执行的请求方法，Content-Type描述主体类型，Content-Encoding描述主体的编码方式
参考：
9.HTTP状态的简要分类
可以按照HTTP状态码的第一个数字分类，1xx表示信息，2xx表示成功，3xx表示重定向，这里需要注意的是304，表示未修改， 4xx表示客户端错误，最常见的是404，5xx表示服务端错误
10.HTTP状态码101、200、301、302、304的具体含义
101：切换协议 200：正常，OK，301：永久重定向，302：临时重定向，304：未修改
11.301和302的区别
12.简要介绍一次302的过程
用户请求一个url，服务器处理这个url，设置这个url需要重定向，返回用户一个302响应，并在http头部设置location字段为新的地址， 浏览器得到这个响应，根据location中新的地址重新发起一次请求。
13.HTTP2.0的简要介绍
14.用户登陆过程的简要说明，如何判断用户是否登录？
用户输入用户名和密码，通过post请求将密码和用户名发送给服务器，服务器比对收到的用户名、密码和数据库中的数据进行比对，不一致则做出响应， 反馈信息给客户端，如果比对一致则服务端生成一个session，这个session可以存储在内存、文件、数据库中，同时生成一个与之一一对应的sessionID 作为cookie发送给客户端，比对成功之后反馈信息，这时一般会进行一次重定向，重定向至登陆之后的默认页面。判断用户登录则是根据这个sessionID，每次请求 会先检查有没有这次类似sessionID的cookie发送过来，没有则认为没有登录，有则是否有相应的session，这个session是否过期等，来判断用户是否登录， 登录是否过期。
15.tcp和udp的区别
TCP面向连接的、提供可靠传输的协议，而UDP则是面向非连接。不可靠传输的协议，之所以说TCP是可靠的传输协议是因为TCP协议在传输数据之前有一个确认双方是否 连接的过程，而UDP没有，也正是因此在传输速度方面，UDP更快。因此需要可靠传输需要选用TCP，不需要可靠传输情况下选择UDP。
16.udp的阻塞机制，如何处理
17.简要介绍一下socket协议
18.get和post有什么区别？什么时候用get，什么时候用post
get用来请求数据，post用来提交数据，form表单使用get时，数据会以querystring形式存在url中，因而不够安全也存在数据大小限制，而post不会，post将数据 存放在HTTP报文体中，获取数据应该使用get，提交数据应该使用post。
这个问题答案存疑，网上有很多种说法，但对于初级面试应该够了
参考：
GET和POST有什么区别？及为什么网上的多数答案都是错的。
19.什么是正向代理？什么是反向代理？
正向代理就是客户端向代理服务器发送请求，并且指定目标服务器，之后代理向目标服务器转交并且将获得的内容返回给客户端。比如翻墙 反向代理的话代理会判断请求走向何处，并将请求转交给客户端，客户端只会觉得这个代理是一个真正的服务器。如负载均衡。
20.介绍一下HTTPS的连接过程
21.和缓存有关的请求头有哪些？优先级是怎样的？
和缓存有关的请求头有Cache-Control、If-Match、If-None-Match、If-Modified-Since、If-Unmodified-Since，在缓存中 总体来说是Cache-Control优先于Expires，Cache-Control中会需要检测Cache-Control是否过期，过期的话检验会优先检测Etag， 也就是If-Match、If-None-Match,不一致则验证Last-Modify请求头也就是If-Modified-Since、If-Unmodified-Since。
参考：
22.介绍一下DNS的查找过程？
23.http连接性能优化，长连接，keep-alive
24.https的详细过程，使用的加密算法，是对称加密算法还是非对称加密算法。md5、SHA、AES分别是对称加密的还是非对称加密的
25.https没有大规模应用的原因
26.http2有哪些新特性？
27.端口号的作用是什么？
作用是区分服务类别和同一时间进行多个会话
参考：
性能
1.常见的网页性能优化方法
- 减少HTTP请求
使用雪碧图、内联图片，合并脚本和样式表。
-
使用内容分发网络（CDN）
-
添加Expires头
-
压缩组件
压缩样式表和脚本，开启gzip压缩大概减少70%的大小
-
样式表放在顶部
-
将脚本放在底部
-
避免CSS表达式
-
使用外部JavaScript和CSS
-
减少DNS查找
-
精简JavaScript
-
避免重定向
网站中除了域名首页外缺少斜杠将引起301重定向，个人测试工作室网站这个重定向消耗的时间在30ms左右
-
删除重复脚本
-
配置ETag
-
使Ajax可缓存
参考： 高性能网站建设指南
Vue
Angular
1.依赖注入的原理，如何实现一个简单的依赖注入
依赖注入原理通俗的说就是当一个函数需要某些对象的时候，这个函数只需要指明自己需要的对象，就会有一个容器 将这些对象自动传递给这个函数，在angularjs中的具体表现比如说我们定义了一个service，就可以在控制器中将这个 service作为参数使用。实现一个简答的依赖注入需要一个注册函数来作为依赖的注册，可以利用一个对象来实现注册依赖 的保存。一个注入函数来实现注入，注册函数很好处理，只需要将依赖的名字和对应的函数保存在依赖对象即可，而注入函数显然 需要的参数是一个声明依赖的数组，一个逻辑函数，对这个依赖数组遍历查看是否注册，使用hasOwnProperty是比较好的方法， 如果没有注册则放弃，注册了就将他push到一个数组中，最后返回一个function，这个function只需要使用apply方法将数组 作为参数传递给注入函数中的函数参数即可实现。
如何实现注入函数忽略参数传递的顺序？
可以利用正则去解析注册函数的参数，将注入函数中函数参数的参数解析出来，然后逐个去依赖中查询即可，这会带来的问题就是如果 压缩的话，这些参数会被一些简单的字母代替，也就意味着失效，angularjs的解决方式使用数组作为参数，数组最后一个就是依赖注入的函数 ，当然这得保持依赖的顺序。
参考：
2.什么是脏检查？
脏检查是Angularjs的视图更新机制，Angularjs就是通过脏检查来检测数据是否变动，在angular中，只有一些特定的事件才能触发脏值检查 比如：DOM事件（比如：用户输入点击按钮）、XHR响应事件、Location变更事件、定时器事件等。
React
1.虚拟DOM的原理
我们知道前端的DOM是一棵树，对于一个element来说，我们需要关注的是这个element的 tagName、属性、以及子元素，而这完全可以用一个js对象来表示，比如，使用tagName属性 来说明标签名，将所有的属性和值作为一个对象表示为props，children属性来表示这个element的 子元素，同样有了这个js对象，我们就可以构建一棵真实的DOM树，我们可以在每一次元素也就是js对象 有任何变动的时候来重新构造一棵树，将这棵新的树与旧的DOM数进行比对，找出真正差异的地方，然后 将这些差异应用在真实的DOM中，也就实现了一个简单的Virtual DOM算法。
2.简要介绍一下React组件的生命周期
React的组件在第一次挂载的时候回首先获得父组件传递的props，接着获取初始的state值，接着经历挂载 阶段的三个生命周期函数也就是ComponentWillMount、render、ComponentDidMount，这三个函数 分别代表着组件将会挂载、组件渲染、组件挂载完毕三个阶段。在组件挂载完成之后，组件的props和state的任一 改变都会导致组件进入更新状态，在组件更新阶段如果是props改变，则进入ComponentWillReceiveProps函数， 接着进入ComponetShouldUpdate进行判定是否需要更新，如果是state的改变则直接进入ComponentShouldUpdate 判定，这个默认是true，当判定不需要更新的话，组件继续运行，需要更新则依次进入ComponentWillUpdate、render、 ComponentDidUpdate三个生命周期函数，依次代表着组件将要更新、组件在渲染、组件更新完毕。当组件卸载时，会首先 进入生命周期函数ComponentWillUnmount，之后才进行卸载。如下图：
3.简要介绍一下React中的refs以及它的作用
ref允许我们访问DOM元素，我们通过在组件中指定ref属性，属性值为一个回调函数，这个回调函数接受一个DOM元素或者react组件 作为参数，当我们不得不要直接访问DOM元素的时候才去使用它，如我需要在组件加载完成就立即让组件中的表单有焦点，即触发 focus事件
4.简要介绍一下key以及它的作用
在react中我们渲染一个列表的时候，我们需要为每一个列表项指定一个唯一的key，当没有指定key时，会收到一个warning， 如果指定的key不唯一，只会渲染第一个指定唯一的key的那个元素，使用key可以使得DOM diff更加高效，避免不必要的 列表项更新
5.在实际开发中shouldComponentUpdate有什么作用
6.简要介绍一下Redux
7.setState的第二个参数是什么，作用又是什么？
setState的第二个参数是一个回调函数，组件更新完后执行的回调函数（setState函数是异步的）
8.简要介绍一下你所了解的flux架构的思想？
9.聊一聊你对React的DOM diff算法的理解
10.虚拟DOM的优缺点有哪些？
Web安全
1.常见的网站漏洞有哪些？
有跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、点击劫持、SQL注入、DDOS攻击、DNS劫持
2.简要介绍一下XSS以及XSS如何防御
跨站脚本攻击是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie或者其他用户身份信息。 可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话 不存储在数据库中，往往表现为将攻击代码放在URL地址的请求参数中。防御的话为cookie设置HttpOnly属性、对用户的输入进行 检查，进行特殊字符串的过滤
3.简要介绍一下CSRF(跨站请求伪造)以及如何防御
CSRF可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求。比如，用户登录一个网站 之后，立即在另一个Tab页面访问了攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个 恶意请求，这时候CSRF就产生了。比如这个制造攻击的网站使用一张图片，而这张图片的链接却是可以修改数据库的， 这时候攻击者就以用户的名义操作了这个数据库。防御方式的话：使用验证码、检查HTTP头部referer、使用token。
参考：
4.简要介绍一下DNS劫持？
DNS劫持的话是指在用户请求过程的域名解析中，分析请求的域名，返回假的IP地址，使用户访问的是假的网址。
5.简要介绍一下SQL注入？
6.简要介绍一下DNS污染？
7.了解CSP吗，介绍一下？
SQL
1.内连接与外连接的区别
2.内连接、左连接、右连接的特点分别是什么
内连接中两张表必须同时有对应的数据，任何一方缺失数据，该行数据都不显示。 左连接则是读取左边表的所有数据，忽略右表是否有对应数据，右连接则与左连接相反，显示的是右表的所有数据
3.sql查询一个表中游戏充值前10%的用户
4.sql查询app榜单中排名比昨天排名上升了的app，并按上升名次倒序排列
5.MySQL的引擎有哪些？
ISAM、MyISAM、HEAP、InnoDB
参考：
6.数据库索引是什么？
7.介绍一下MySQL的存储过程？
8.关系型数据库和非关系型数据库的差别？
计算机基础与操作系统
1.冯诺依曼计算机的原理是什么？
2.堆和栈的区别是什么？
栈一般是用来存储函数的参数值和局部变量的值，由编译器自动分配和释放， 存储方式是连续的，且会出现溢出现象，堆有程序员手动分配释放，存储地址是 链式的，内存较大不会溢出。栈由系统自动分配，速度快，堆由new分配内存，速度慢
参考：
3.进程和线程的区别？
一个程序至少有一个进程，一个进程至少有一个线程，资源分配给进程，同一个进程下的所有线程共享该进程的所有资源。
参考： 进程和线程有什么区别？
