1、知道语义化吗？说说你理解的语义化，如果是你，平时会怎么做来保证语义化？
像html5的新的标签header,footer,section等就是语义化
一方面，语义化就是让计算机能够快读的读懂内容，高效的处理信息，可以对搜索引擎更友好
另一方面，便于与他人的协作，他人通过读代码就可以理解你网页标签的意义
去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义方式来渲染网页
便于团队开发和维护，语义化更具有可读性，是下一步把网页的重要动向，遵循W3C标准的团队都要遵循这个标准，减少差异化
2、介绍HTML5的新特性
完全支持css3
video和audio
本地存储
语义化表圈
canvas新事件如ondragonresize
3、如果解决ajax无法后退的问题
html5里引入了新的API，即：history.pushState,history.replaceState
可以通过pushState和replaceSate接口浏览器历史，并且改变当前页面的URL
onpopstate监听后退
4、websocket和ajax轮询
websocket是html5中提出的新的协议，可以实现客户端与服务器的通信，实现服务器的推送功能
优点是，只要简历一次连接，就可以连续不断的得到服务器推送消息，节省带宽和服务器端的压力。
缺点就是，每次都要建立HTTP连接，即使需要传输的数据非常少，浪费带宽
5、webworker和websocket
worker主线程
通过worker=newworker(url)加载一个js文件来创建一个worker，同时返回一个worker实例
通过worker.postMessage(data)方法来向worker发送数据。
绑定worker.onmessage方法来接收worder发送过来的数据
可以使用worker.terminate()来终止一个worder的执行。
websocket
6、Doctype作用？严格模式与混杂模式如果区分？意义？
严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
在混杂模式中，页面已宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
7、Doctype多少种文档类型？
HTML4.01规定了三种文档类型：Strict,Transitional以及Frameset
XHTML1.0规定了三种XML文档类型：Strict,Transitional以及Franmeset
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标签的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页
8.HTML与XHTML，有什么区别？
所有的标签必须要有一个相应的结束标签
所有标签的元素和属性的名字都必须使用小写
所有的XML标记都必须合理嵌套
所有的属性必须引号“”括起来
把所有的
给所有属性赋一个值
不要在注释内容使用'--'
图片必须要有说明文字
CSS
1、content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box
content-box是W3C的标准盒模型元素宽度+padding+border
border-box是ie的怪异盒模型，他的元素宽度等于内容宽度内容宽度包含了padding和border
比如有时候在元素基础上添加内边距padding或border会将布局撑破但是使用border-box就可以轻松完成
2、实现三个DIV等分排在一行（考察border-box)
1.设置border-boxwidth33.33%
2.flexboxflex:1
3.实现两栏布局有哪些方法
方法一：
它可以通过下一任和一种方式来创建
float的值不为none
position的值不为static或者relative
display的值为table-cell，table-caption，inline-block，flex，或者inline-flex其中一个
overflow的值不为visible
4、flex属性值是多少？
flex属性是flex-grow,flex-shrink和flex-basis的简写
flex-grow属性定义项目的放大比例，默认为0
flex-shrink属性定义了项目的缩小比例，默认为1
flex-basis属性定义了项目的固定空间
5、怎么实现一个DIV左上角到右下角的移动，有哪些方法？怎么实现？
改变left值为window宽度-div宽度top值为window高度=div高度
jquery的animate方法
css3的transition
6、垂直居中
单行行内元素
可以设置padding-top,padding-bottom
将height和line-height设为相等
多行行内元素
可以将元素转为tabel样式，再设置vertical-align:middle;
使用flex布局
块级元素
已知高度绝对定位负边距
未知高度transform:translateY(-50%);
flex布局
em相对于父元素，rem相对于根元素
8、清除浮动
利用clear属性进行清理
父容器结尾插入空标签
BFC能清理浮动主要运用的是它的布局规则：
内部的Box会在垂直方向，一个接一个的放置
box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
每个元素marginbox的左边，与包含快borderbox的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此
BFC的区域不会与floatbox重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此
计算BFC的高度时，浮动元素也参与计算
触发BFC有哪种方法？
根元素
float属性不为none
position为absolute或fixed
display为inline-block，table-cell，table-caption，flex，inline-flex
overflow不为visible
9、position的值，relative和absolute分别是相对于谁进行定位的？
relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
fixed:（老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
static:默认值，没有定位，元素出现在正常的文档流中。
sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。
10、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？
选择符：
id选择器（#myId）
类选择器（.myClassName）
标签选择器（div,p,h1）
相邻选择器（h1+p）
子选择器（ul>li）
后代选择器（lia）
通配符选择器（*）
属性选择器（button[disabled="true"]）
伪类选择器（a:hover,li:nth-child）
优先级
!important>行内样式（比重1000）>id（比重100）>class/属性（比重10）>tag/伪类（比重1）;
11、介绍sass
定义变量css嵌套，允许在代码中使用算式，支持if判断for循环
12、transition和margin的百分比根据什么计算？
transition是相对于自身；margin相对于参照物
13、display:none和visibility:hidden的区别？
display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden隐藏对应的元素，但是在文档布局中仍保留原来的空间。
15、CSS中link和@import的区别是？
link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重高于@import的权重.
JS
1、介绍一下闭包和闭包常用场景？
使用闭包主要为了设计私有的方法和变量，闭包的有点事可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。
闭包有三个特性：
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数
应用场景，设置私有变量的方法
不适用场景：返回闭包的函数是个非常大的函数
闭包的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏
2、为什么会出现闭包这种东西？解决了什么问题？
受javascript链式作用域链的影响，父级变量中无法访问到子级的变量值
3、介绍一下你所了解的作用域链，作用域链的尽头是什么？为什么？
每一个函数都有一个作用域，比如创建了一个函数，函数里面又包含了一个函数，那么现在又三个作用域，这样就形成了一个作用域链
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域链网上找
4、ajax创建的过程是怎样的，主要用到哪些状态码？
创建XMLHttpRequest对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化函数
发送HTTP请求
获取异步调用返回的数据
使用javascript和DOM实现局部刷新
可以大量节省内存占用，减少事件注册
12、webpack常用到哪些功能？
设置入口
设置输出目录
设置loader
extract-text-webpack-plugin将css从js代码中抽出并合并
处理图片文字等功能
解析jsx解析bable
13、函数组合继承
原型继承，构造函数继承，callapply继承
作用域链的作用是保证执行环境里有权访问的变量和函数是有序耳朵，作用域链额变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的
15、js垃圾回收方法
标记清除（markandsweep）
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引用计数(referencecounting)
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。
16、js继承方式及其优缺点
原型链继承的缺点
一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数
借用构造函数（类试继承）
借用构造函数虽然解决了刚才两种问题，但是没有原型，则复用无从谈起，需要原型链+借用构造函数的模式，这种模式成为组合继承
组合式继承
组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，这样，即通过在原型上定义方法实现了函数复用，有保证每个实例都有它自己的属性
ES6
1、let和const的区别？
2、平时用了es6的哪些内容，和es5有什么不同？
let,const,箭头函数，字符串模板，class类，模块化，promise
ES5reuqire,react,createclass
3、介绍promise
就是一个对象，用来传递异步操作的消息。有三种状态：pending(进行中)，resolved(已完成)和rejected(失败)
有了promise对象，就可以将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数
前端框架
模块化
1、使用模块化加载时，模块记载的顺序是怎么样的，如果不知道，根据已有的知识，加载顺序是怎么样的
commonjs同步循序执行
AMD提前加载，不管是否调用模块，先解析所有模块require速度快有可能浪费资源
CMD提前加载，在正真需要使用（依赖）模块时才解析该模块
seajs按需解析，性能比AMD差
框架问题
1、什么是MVVM，和MVC有什么区别，原理是什么？
mvc的界面和逻辑关联紧密，数据直接从数据库读取，必须通过controller来承上启下，通信都是单向的
mvvm的view和viewModel可以互相通信，界面数据从viewmodel中获取
2、父子组件通信
vue：父组件是通过props属性给子组件通信，在子组件里面emit，在父组件监听
react：props传递父给子穿一个回调函数，将数据传给父亲处理
3、兄弟组件怎么通信的？
redux子A->父->子B
4、生命周期有哪些，怎么用？
beforecreated:el和data并未初始化
created：完成了data数据的舒适化，el没有
beforeMount：完成了el和data初始化
mounted：完成挂载，updated,destroyed
浏览器
1、跨域通信有哪些解决方案？
（1）JSONP
由于同源策略的限制，XMLHttpRequest只允许请求当前资源（域名、协议、端口）的资源，script标签没有同源限制，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
通过动态
优点：兼容性好，简单易用，支持浏览器与服务器双向通信
缺点：只支持GET请求
服务器端对于CORS的支持，只要就是通过设置Access-Control-Allow-Orgin来进行的。如果浏览器检测到响应的设置，就可以允许ajax进行跨域访问。
通过设置Access-Control-Allow-Orgin来允许跨域，cors可以用ajax发请求获取数据，但是兼容性没有jsonp好
（3）通过修改document.domain来跨子域
将子域和主域的doucment.domain设为同一个主域，前提条件：这两个域名必须属于同一个基础域名！而且所用的协议，端口都要一致
主域相同的使用document.domain
（4）使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name。每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
（5）使用HTML5中心引进的window.postMessage方法来跨域传送数据
（6）还有flash，在服务器上设置代理页面等跨域方式。
2、移动端兼容问题
3、XML和JSON的区别？
数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些
数据交互方面：JSON与js的交互更加方便，更容易解析处理，更好的数据交互
数据描述方面：JSON对数据的描述性比XML较差
传输速度方面：JSON的速度远远要快于XML
4、渐进增强和优雅降级
渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验效果
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
构建工具
1、webpack的理解，和gulp有什么不同？
webpack是模块打包工具，会分析模块间的依赖关系，然后使用Loaders处理他们，最后生成一个优化并且合并后的静态资源
gulp是前端自动化工具，能够优化前端工作流程，比如文件合并压缩
2、webpack打包速度很慢，为什么？怎么解决？
模块太多
webpck可以配置externals来将依赖的库指向全局变量，从而不再打包这个库
网络&存储
请求中的消息主题是用何种方式解码
application/x-www-form-urlencoded
这是最常见的post提交数据的方式，按照key1=val1&key2=val2的方式进行编码
application/json
告诉服务器端消息主体是序列化后json字符串
2、get和post有什么不同？
get是从服务器上获取数据，post是像服务器传送数据
get请求可以将查询字符串参数追加到url的末尾；post请求英国把数据作为请求的主体提交
get请求数据有大小限制；
post没有post比get安全性更高
3、cookie和session有什么联系和区别？
cookie数据存放在客户的浏览器上，session数据放在服务器上
session比cookie更安全
单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie
一般用cookie来存储sessionid
4、多页面通信有哪些方案，各有什么不同？
localstroge在一个标签页里呗添加、修改、删除时，都会触发一个storage事件，通过另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信
settimeout+cookie
5、输入网站后到页面展现是过程？
通过dns解析获取ip
tcp链接
tcp传输报文
6、客户端解析渲染页面
构建DOM树->构建渲染树->布局渲染树：计算盒模型位置和大小->绘制渲染树
7、前端性能优化
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器
缓存利用：缓存ajax，使用CDN，使用外部js和css文件以便缓存
添加expires头，服务器配置Etag，减少DNS查找
请数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载
请求带宽：压缩文件，开始GZIP
样式放在顶部，脚本放在底部
8、移动端性能优化
尽量使用css3动画，开启硬件加速
避免使用css3渐变阴影效果
可以用transform:translateZ(0)来开启硬件加速
不滥用float。float在渲染时计算量比较大，尽量减少使用
不滥用web字体。web字体需要下载，解析，重绘当前页面
合理使用requestAnimationFrame动画代替setTimeout
css中的属性（css3transitions、css33Dtransforms、opacity、webGL、video）会触发GUP渲染，耗电
9、HTTP和HTTPS
HTTP协议通常承载与TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS
默认HTTP的端口号为80，HTTPS的端口号为443
10、为什么HTTPS安全
11、defer和async
defer并行加载js文件，会按照页面上script标签的顺序执行
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行
IE6浏览器常见的BUG
1、IE6不支持min-height，解决办法使用csshack
为li设置样式display:list-item
3、未定位父元素overflow:auto;，包含position:relative；子元素，子元素高于父元素时会溢出
子元素去掉position:relative
不能为子元素取消定位时，父元素position：relative
4、IE6只支持a标签的:hover伪类
使用js为元素监听mouseenter,mouseleave事件，添加类实现效果
5、IE5-8不支持opacity
font-size:0;
7、IE6不支持PNG透明背景
IE6下使用gif图片
8、IE6-7不支持display:inline-block
设置inline并处罚hasLayout
使用padding控制边距
浮动元素display:inline;
10、通过块级元素设置宽度和左右margin为auto时，IE6不能实现水平居中