HTML5面试题总结
1.基础问题

1. = 和 == 和 === 的区别？
   = : 用于赋值 == : 用于判断 === : 用于判断，必须类型
   和值
   同时相等才是等

2.有几种方式清除浮动？
父级元素 overflow: hidden;

浮动元素后面的元素 clear: both;

伪元素选择器: .clear:after { content: ''; display: block; clear: both; }

父级元素设置高度

父级元素 display: table;

3.请解释JS中的闭包？
闭包，一个概念，在一个函数中，返回另一个函数，里面的函数即成为闭包 闭包限制了一定的作用域，保证变量不被释放掉

// 示例代码var add = (function () { var count = 0; return function () { return ++count; };})();​add(); // 1add(); // 2add(); // 3
4.常见兼容性问题？
1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8
2.浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。
3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 浮动ie产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 10px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css.bb{background-color:#f1ee18;/所有识别/.background-color:#00deff\9;/IE6、7、8识别/+background-color:#a200ff;/IE6、7识别/_background-color:#1e0bd1;/IE6识别*/}
4.IE下,既可以使用获取常规属性的方法来获取自定义属性, 又可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.
5.IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust:none; 解决. 如果这一属性也不成 使用 transform:scale 来实施
7.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active样式了 解决方法是改变CSS属性的排列顺序:LoVe-HA🅰️link{}a:visited{}a:hover{}a:active{}

5.如何实现浏览器内多个标签页之间同域页面的通信?
调用localstorge
、cookies
等本地存储方式

2.HTML相关问题
1.HTML5新标签？
nav
/ header
/ footer
/ section
/ article
/ aside
/ detail
/ summary

video
/ audio
/ source
/ canvas
/ figure
/ figcaption

time
/ progress
/ mark

2.HTML5新表单元素?
url
/ email
/ date
/ datetime
/ time
/ week
/ month
/ search
/ range
/ color

3.HTML5中有哪些新功能？
本地存储： localStorage
/ sessionStorage

离线缓存： Manifest

新标签： canvas
/ video
/ audio

拖放API： drag drop

地理位置： geolocation

浏览器后台执行：web worker

4.请解释Cookie、sessionStroage、localStroage的区别？
Cookie
: 存储数据量小，可以设置存储时间，到期自动删除 sessionStroage
: 将数据临时存储，离开当前页面就删除 localStroage
: 将数据保存到设备上，可以实现永久存储，需要主动删除

5.描述application cache更新的过程?
第一次访问缓存manifest文件里列的文件，之后访问先加载缓存，在后台加载manifest文件按字节对比看是否有变化，如果没变化则说明缓存未失效，否则在后台按列表更新缓存，在下一次刷新页面的时候使用新的资源

6.iframe有那些缺点?
1.iframe会阻塞主页面的Onload事件
2.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
3.iframe 会降低页面整体性能， 之前QQ空间的数据是页面每新增一个iframe，性能下降10%。 更多详细内容， 参见知乎问答： http://www.zhihu.com/question/20653055

3.CSS相关问题
1.CSS3新属性？
更多的选择器

弹性布局： flex

帧动画： keyframes
/ animations

过渡动画： transition

多列布局： column

背景渐变： linear-gradient
/ radial-gradient

背景属性： background-image
/ background-size
/ background-clip
/ background-origin

边框、阴影： border-image
/ border-radius
/ box-shadow

2D、3D变换： transform
/ transform-origin

用户界面属性添加： box-sizing
/ outline-offset
/ cursor更多属性值

2.请简述flex布局？
CSS3中的新增的特性，也称为弹性布局。
使用flex布局，会更加快速与方便，但是有一定的兼容问题（display: -webkit-flex）。
主要含有主轴
、交叉轴
的概念，通过弹性布局，可以非常方便的设置元素的左对齐
、右对齐
、上对齐
、下对齐
、居中对齐
等等各种对齐方式，快速实现页面效果。
常用属性有: flex-direction
/ flex-wrap
/ justify-content
/ align-items
/ align-content
/ flex-grow
/ flex-shrink
/ flex-basis
/ align-self
/ 等等

3.rem如何使用？
CSS3中的一个新单位
和em的区别是rem单位只针对HTML根元素，而em是根据父标签的大小进行计算
通常都是给html
标签设置好font-size
之后，然后其它的单位都换算为rem
进行使用。这样，当根标签的font-size
发生改变了之后，页面中所有根据rem
设置的元素都会发生改变。
html的font-size
会根据屏幕的宽度进行调整，可以使用媒体查询，根据屏幕宽度进行font-size
的设置。 或者使用JS，根据屏幕宽度，计算出html
的font-size
的大小

4.Less和Sass分别是什么？
CSS预处理工具
使用编程的思路编写CSS代码，更加高效、快速、便捷
可以使用变量
、嵌套规则
、混入（函数）
、参数混入
、运算
、颜色功能
、作用域
等等类似编程中的功能
Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation

5.什么是样式重置文件（重置样式表）？
reset.css

由于各个浏览器对标签的默认样式支持方式不同，所以样子都不太一样。为了实现不同浏览器效果一致，开发者会主动清掉默认样式，这些代码就放到reset.css文件中，叫样式重置文件（重置样式表）。

6.em和rem的区别？
em
是相对于父级标签字体大小 rem
是CSS3新的单位，相对根标签(HTML)
字体大小，通常用来做移动端适配

7.如何做水平垂直居中？
方案一：已知宽高，设置position: absolute;
，然后left
和top
都设置为50%
，再根据margin的负值来调正 方案二：类似方案一，最后一步用transform:translate(-50%,-50%);
方案三：绝对定位，top
、bottom
、left
、right
都设置为0
，设置好宽高，然后margin: auto;
方案四：display:table-cell;

• vertical-align:middle;
  方案五：使用flex
  弹性盒模型

8.transition、animation、transform有什么区别?
transition
: 处理过渡效果 animation
: CSS3动画，和keyframes
一起使用 transform
: 处理元素的形变，位移
、旋转
、缩放
、倾斜

9.display: inline-block;
显示的缝隙如何去掉？
1.移除空格 2.使用margin负值 3.使用font-size:0 4.letter-spacing 5.word-spacing 6.float

10.rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果 但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

11.inline、block、inline-block的区别是什么？
inline
元素和其他inline元素在同一行展示，宽度由内容决定，无法设置宽度
block
元素在新行开始，默认宽度为容器的宽度，可以设置宽度
inline-block
从外面看是inline，里面看是block，可以设置宽度

12.display:none与visibility:hidden的区别是什么？
display
: 隐藏对应的元素但不挤占该元素原来的空间 visibility
:隐藏对应的元素并且挤占该元素原来的空间
即是，使用CSS display:none;
属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden;
属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在

13.知道css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应用在 before/after伪元素上，用于来插入生成内容
最常见的应用是利用伪类清除浮动
一种常见利用伪类清除浮动的代码

.clearfix::after { content: ".";//这里利用到了content属性 display: block; height: 0; visibility: hidden; clear: both;}.clearfix { *zoom: 1;}
14.有几种方式可以对一个DOM设置它的CSS样式？
外部样式表
，引入一个外部css文件
内部样式表
，将css代码放在 标签内部
内联样式
，将css样式直接定义在 HTML 元素内部

15.什么是Css Hack？ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS code的过程，就是CSS hack

test{ width:300px; height:300px; background-color:blue; /firefox/ background-color:red\9; /all ie/ background-color:yellow; /ie8/ +background-color:pink; /ie7/ _background-color:orange; /ie6/} :root #test { background-color:purple\9; /ie9/} @media all and (min-width:0px) { #test { background-color: black; /opera/ } } @media screen and (-webkit-min-device-pixel-ratio:0) { #test { background-color: gray; /chrome and safari/ } }

16.CSS中link和@import的区别?
link
属于html标签，而@import
是CSS中提供的
在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

4.JavaScript相关问题
1.说说你了解的ES6新特性？
let关键字

模板字符串

箭头函数

函数默认值的设置

for..of.. 更多内容参照博客：http://es6.ruanyifeng.com/

2.JQ如何扩展插件？
jQuery.extend()
: 给JQuery对象本身扩展方法

jQuery.fn.extend()
: 给JQ元素扩展方法

3.AJAX兼容问题？
AJAX用于请求网络数据
正常情况下使用XMLHttpRequest
对象即可，但是在IE浏览器下需要使用ActiveXObject
对象处理兼容问题
如果使用JQ，则直接使用$.get()
/ $.post()
/ $.getJSON()
/ $.ajax()
即可处理网络请求问题

4.JQ和Zepto的区别？
Zepto更加的轻量级，专为移动端开发
Zepto并不是包含JQ所有的功能，只是封装JQ常用的一些方法
Zepto内部划分模块，不同的功能放到了不同的文件中，需要使用的时候引入，否则不引入。
JQ则是所有功能都放到一个文件中。JQ会更加占用项目体积，而Zepto的使用率更高

5.JQ的优势？
代码简介，语法简单

强大的选择器支持

封装了常用功能，例如：slideUp()
、$.each()
等等

很好的兼容处理

丰富强大的插件库

完善的AJAX

链式语法

完善的文档、开源

6.JavaScript严格模式是什么？
ECMAScript5添加了“严格模式” 这种模式下JavaScript在更严格的条件下运行
主要目的： 1.消除JavaScript语法的一些不合理，不严谨，减少一些怪异行为 2.消除代码运行的一些不安全之处，保证代码运行的安全 3.提高编译器效率，增加运行速度 4.为未来新版JavaScript做好铺垫
注意： 同样的代码，在“严格模式下”，可能会有不一样的运行结果；一些“正常模式”可以运行的语句，在严格模式下将不能运行
“use strict”;
，进入严格模式的标志，老版本浏览器会当做一行普通字符串，加以忽略 将“use strict”;
放到第一行，则整个脚本都将以严格模式运行。也可以放到函数中的第一行，则只作用当前函数，

// 优化写法(function () { "use strict"; // some code ...})();
严格模式的一些限制： 1.全局变量必须显示声明 2.禁止this指向全局对象(构造函数，必须加new
) 3.函数不能有重复的形参名 4.保留字(let、interface、package、private、protected、public、static、yield、implements)

7.JavaScript中常用的设计模式？
1.单例模式 2.原型模式 3.构造函数 4.工厂模式 5.适配器模式 6.策略模式

8.什么是作用域链？
作用域的范围是函数，函数嵌套函数，查找变量从内层函数依次向外层找，最后找不到在window上找

9.解释call、apply、bind的区别?
call
和apply
都是调用一个函数，并指定this和参数，call
和apply
第一个参数都是指定的this的值，区别在于call
第二个参数开始的参数是替换的参数，而apply
的第二个参数是一个数组。
bind
是由一个函数创建一个新函数，并绑定this和部分参数，参数形式和call
类似

10.描述事件委派(delegate)的原理和优点?
原理: 在容器节点上绑定事件，利用冒泡，判断事件是否在匹配指定的选择器的节点上被触发
优点: 只用绑定一次，不用对每个目标做绑定，还有对动态插入的节点也生效，无需重新绑定

11.有哪些原生触屏事件？
touchstart
，touchmove
，touchend
，touchcancel

12.为什么老版本的webkit的click事件有300ms延迟？
为了支持双击放大，如果300ms以内有两次点击则触发放大操作，而不是click。 chromium较新版本在没有双击放大的页面去掉了click事件的300ms延迟

13.ajax和jsonp哪个可以跨域，原理是什么？
ajax默认无法跨域，xhr2新增的CORS让ajax也可以跨域，需要输出http头(Access-Control-Allow-Origin)
jsonp可以跨域，原理是script元素的src可以跨域

14.JavaScript基本数据类型？
基本数据类型： number
, string
, boolean
, undefined
, null

引用数据类型： object(Array
, Date
, RegExp
, Function
)

15.谈谈This对象的理解?
this是JavaScript的一个关键字，随着函数使用场合不同，this的值会发生变化
但是有一个总原则，那就是this指的是调用函数的那个对象。 this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

16.new操作符具体干了什么?
1.创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型 2.属性和方法被加入到 this 引用的对象中 3.新创建的对象由 this 所引用，并且最后隐式的返回 this

var obj = {};obj.proto = Base.prototype;Base.call(obj);
5.Other问题
1.AngularJS中与项目压缩的问题？
在写控制器的时候，有一种写法，会在使用压缩工具的时候出问题

// 在进行代码压缩的时候，参数$scope/$css等服务名称会被压缩工具替换掉，就造成无法使用的错误app.controller("homeCtrl", function ($scope, $css) {​});​// 换成如下写法即可：app.controller('homeCtrl', ['$scope', '$css', function ($scope, $css) {​}]);
2.什么是模块化开发？AMD和CMD是什么？
NodeJS
实现了JavaScript语言编写后台，其中使用CommonJS
规范实现了模块化开发
模块化开发其实就是让JavaScript文件可以互相引用，每个文档代表一个模块，提高代码的使用频率。 在HTML中引入JS文件也会方便很多。 原生JavaScript中并不支持模块化开发，出现了一些规范，就是所说的AMD
和CMD
，这两种方式适合使用桌面端，可以进行异步加载
，而在NodeJS
中使用CommonJS
是同步的，所以CommonJS
并不适合桌面端
在require.js推广的过程中，产生了一种模块化规范，叫AMD

在sea.js推广的过程中，产生了一种模块化规范，叫CMD

sea.js
是淘宝的前端开发工程师，网名叫玉伯
的人编写的。 require.js
而是国外朋友编写。 sea.js
是根据CommonJS
规范来编写的，和CommonJS
语法类似，而require.js
的写法则教特殊一些

3.微信JSSDK是什么？以及使用流程？
如果项目需要使用微信提供的一些功能，例如：分享、定位、扫一扫、支付、等，就需要借助微信JSSDK来实现这些功能
使用流程： 1.将自己项目的域名添加到微信公众账号中，设置为安全域名 2.在代码中引入JSSDK所需的js文件 3.进行配置: wx.config({debug: true, appId: '', timestamp: '', nonceStr: '', signature: '', jsApiList: []}); 4.调用JSSDK提供的方法进行调用

4.什么是SPA？
Single Page Application 单页应用程序
打开SPA项目的时候，通常只有一个主页面，然后根据点击不同的按钮，切换主页面中显示的内容。
通过点击不同的按钮(a标签)
，来修改锚点
的值，然后使用路由
根据锚点，实现加载不同的页面 不需要进行网页跳转，即可切换页面

5.什么是懒加载？什么是预加载?
懒加载 懒加载又称延迟加载
，当图片需要显示到页面上的时候，才开始真正的发起图片的网络请求，否则不请求。
懒加载原理： \1. 将图片地址不写入src
属性，而是写入其它的属性(data-original)
中 \2. 页面onload时候，根据图片的offsetTop
值，判断哪些图片显示在用户视野范围内，然后把这些图片的地址从data-original
中取出，放到src
属性中，图片会自动请求 \3. 设置好onscroll
函数，监测屏幕的滚动，如果有图片即将进入用户视野，则同样将图片的地址从data-original
取出，放到src
属性中取出即可

预加载 在页面正式显示之前，先把所需要的图片资源全部加载下来，然后再显示界面，用户就不会看到图片加载的过程，提高了用户体验
预加载原理 1.拿到所有图片的地址，分别创建Image对象，并赋值给src 2.在imgObj.onload方法中，判断是否所有图片都已经加载完毕 3.当所有图片加载完毕之后，调用回调函数，处理页面的显示

6.如何提高网页加载速度？（网站如何优化？）
上线的时候，使用压缩后三方库（带有min的文件: jquery.min.js）

尽可能使用CDN来加载你的三方库

选取图片的时候，能选择jpg就不选择png（只有镂空图才选择png图片）

图片搞定之后，使用网站进行二次压缩（TinyPNG）

减少网路请求，比如使用懒加载等等

优化代码

7.如何解决跨域问题？
由于浏览器同源策略
的限制，访问非同源的数据需要进行跨域处理
实现跨域的几种方式: \1. JSONP \2. 后台设置访问源限制 \3. 使用后台代理

JSONP 实现跨域问题最常用的一种方式 利用了script标签src属性没有域的限制而完成 需要前端、后台
配合完成
JSONP使用步骤: \1. 动态创建script标签 \2. 将目标数据的地址放到script标签的src属性中，并在请求地址中拼接callback参数并携带回调函数名 \3. 定义回调函数，当数据请求成功之后，回调函数被调用 \4. 数据完成之后，移除script标签 注意：后台返回的数据不是真正的JSON数据，而是一个函数调用，数据为参数的一段字符串。( callbackFun('jsonString'); )
如果使用JQ，直接使用$.getJSON()
函数即可进行跨域请求，JQ已经对跨域请求做了封装。

后台设置访问源限制： 只需后台做访问源(Access-Control-Allow-Origin)
的设置，前端就可以正常访问跨域的数据。
NodeJS设置方式: response.setHeader("Access-Control-Allow-Origin", "*");
*****号代表了所有域名，设置好之后代表任何域名都可以访问，也可以对域名进行单独控制
此种方式不够安全

使用后台代理: 前端不直接访问跨域的数据，而是交给服务器去做 服务器去请求别的站点的数据，后台服务器是没有域的限制的，所以很方便 当后台获取到数据之后，前端从自己的服务器请求到数据，无需做跨域处理 此种方式，主要内容都在后台，前端进行正常AJAX请求

8.请解释baiduTemplate.js模板引擎？
模板引擎 根据数据，快速生成HTML代码片段，插入到HTML结构中显示
首先编写结构，可以将HTML和JavaScript混写，然后赋值数据，就可以生成HTML代码片段

<script type="text/template" id="li"> <%for (var i = 0; i < data.length; i++) {%> <li><%= data[i] %></li> <%}%></script>​// 根据数据，生成HTML代码片段var data = ['小明', '小红', '小黑'];var html = baidu.template('li', {data: data});document.getElementById("result").innerHTML = html;
和baiduTemplate相似模板引擎还有很多，还会使用artTemplate.js
，语法相似 http://www.jq22.com/jquery-info1097

9.请解释MVC和MVVM设计模式？
10.XSS是什么？
跨站脚本攻击（Cross-site scripting, XSS）
是一种网站应用程序的安全漏洞攻击，是代码注入的一种。允许用户将恶意代码注入到网页上，影响网页。
这类攻击通常包含了HTML以及用户端脚本语言。

11.移动端性能优化？
加载优化 1.减少HTTP请求 2.压缩JS、CSS、HTML静态资源并在服务器设置gzip 3.首屏加载，不超过120k 4.压缩图片 5.避免重定向 6.异步加载第三方资源: async / 动态创建script / defer 7.oneRequest: 首次内联CSS，JavaScript，存localStroage，第二次读取localStroage 8.按需加载: 滚动加载、点击加载
CSS优化 1.层次不超过3 2.合并CSS规则，合并margin、background等属性 3.移除空的CSS规则 4.去掉0的单位 5.不要声明过多的font-size
脚本执行优化 1.避免iframe、img等src为空 2.图片尽量避免使用DataURI 3.避免重设图片大小 4.点击事件优化 5.注意scroll resize事件绑定时机
渲染优化 1.动画优化: 使用CSS3动画、使用requestAnimationFrame替代setTimeout 2.高频事件优化: touch事件、scroll事件 3.图片优化: 压缩图片、webp优于jpg、png8优于gif、对图片使用lazyload、避免使用DataURI 4.GPU加速: 使用transition触发、tranform触发、opacity 5.DOM层次不宜过多 6.JS主动的释放内存

12.Tween.JS如何使用？
// 首先获取所需要的4个数字var currentStep = 0; // 当前步数var allStep = 100; // 总步数var startValue = $(window).scrollTop(); // 开始的值var changeValue = 0 - startValue; // 改变的值​// 使用定时器进行改变var timer = setInterval(function () { // 当前步数增加 currentStep++; // 判断结束时间 if (currentStep > allStep) { clearInterval(timer); } // 四个参数（当前步数、开始值、变化值、总步数） var v = Tween.Bounce.easeIn(currentStep, startValue, changeValue, allStep);​ // 使用Tween.js实现效果 $(window).scrollTop(v);}, 10);
13.什么是Cordova？
hybrid App
开发平台 一个工具，正常编写HTML、CSS、JavaScript代码，即可通过Cordova生成各个平台的Native App

可以通过编写JavaScript代码调用设备的功能
常用命令 1.cordova create ProjectPath com.lidaze.www HelloCordova
2.cordova platform add ios
3.cordova platform rm ios
4.cordova build ios
5.cordova emulate ios
6.cordova plugin add cordova-plugin-dialogs
7.cordova plugin remove cordova-plugin-dialogs

14.什么是Web App
? 什么是hybrid App
?
Web App
: 移动App，通过编写HTML、CSS、JavaScript实现Native App的功能外观，还是运行在浏览器中。有时会被嵌入到Native App中
hybrid App
: 混合App，通过编写HTML、CSS、JavaScript实现Navtive App的功能和外观，可直接生成各个操作系统的Native App，可直接安装到手机中

15.http状态码有那些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作
200-299 用于表示请求成功
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
400-499 用于指出客户端的错误。 400 语义有误，当前请求无法被服务器理解。 401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

16.你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强progressive enhancement
：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级graceful degradation
：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别： 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
优雅降级观点 “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
渐进增强观点 “渐进增强”观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

17.简述一下src与href的区别？
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。 href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

18.描述下重绘和回流是什么
浏览器在加载⼀个⻚⾯的时候，会绘制⼀个节点树，⻚⾯中的标签等元素都会称为节点树的⼀部分，当这些元素的规模尺⼨，布局，隐藏等改变⽽需要重新构建。这就称之为回流。每个⻚⾯⾄少需要⼀次回流，就是在⻚⾯第⼀次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。例如：当⻚⾯中的部分或者全部元素改变宽度和⾼度、或者位置发⽣变化、删除或者增加某个或者某些元素时、某个元素隐藏或者显示时，这时⻚⾯就需要重新加载了，这就叫做回流。当⻚⾯中元素的可⻅性发⽣变化时，⽐如：背景颜⾊，⽂字颜⾊等等，就会形成重绘。需要注意的是回流必将引起重绘，⽽重绘不⼀定会引起回流

19. 对BFC理解吗？
    应该是 Block Formatting Context信息来源⽹络，什么是Block Formatting Context？当涉及到可视化布局的时候，Block Formatting Context提供了⼀个环境，HTML元素在这个环境中按照⼀定规则进⾏布局。⼀个环境中的元素不会影响到其它环境中的布局。为了让我们有个感性的认识，举个不太合适的例⼦。你可以把⼀个⻚⾯想象成⼤的集装箱，这个集装箱⾥装的货物就是HTML元素。在现实⽣活中为了避免不同⼈的货物相互混淆，都是把货物打好包装再装⼊集装箱，这样的话⽆论你包装⾥⾯的货物怎么摆放，都不会影响到其他⼈的货物。那么这个包装就可以被想象成Block Formatting Context。怎样才能形成Block Formatting Context当⼀个HTML元素满⾜下⾯条件的任何⼀点，都可以产⽣Block Formatting Context•float的值不为none。•overflow的值不为visible。•display的值为table-cell, table-caption, inline-block中的任何⼀个。•position的值不为relative和static

20.请用js实现一个继承？
// ⽗类function Person(name, age) { this.name = name; this.age = age;}Person.prototype.say = function () { console.log('my name is ' + this.name);};// ⼦类function Student(name, age, gender) { Person.apply(this, arguments); this.gender = gender;}Student.prototype = new Person;Student.prototype.constructor = Student;

21.谈谈你对闭包的理解
闭包，⼀个概念，在⼀个函数中，返回另⼀个函数，⾥⾯的函数即成为闭包 闭包限制了⼀定的作⽤域，保证变量不被释放掉

// 示例代码var add = (function () { var count = 0; return function () { return ++count; };})();​add(); // 1add(); // 2add(); // 3
22.JS做动画的方式有哪些？
使⽤setInterval/setTimeout类的定时期，执⾏元素的状态改变

使⽤jQuery的animate/show/fade/slide等动画⽅法

使⽤requestAnimationFrame⽅法替代旧的定时器⽅法

5.非技术问题
1.使用过哪些开发工具？
编辑器:
Sublime Text

Atom (GitHub)

VS Code(微软)

IDE（集成开发环境）:
HBuilder(国内)

WebStorm(国外）

2.前公司技术团队多少人？H5开发有几个？
3.谈谈以前端角度出发做好SEO需要考虑什么？
了解搜索引擎如何抓取网页和如何索引网页 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SErobot或叫webcrawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
Meta标签优化 主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
如何选取关键词并在网页中放置关键词 搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎 虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。
主要的互联网目录 OpenDirectory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
按点击付费的搜索引擎 搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目GoogleAdwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。
搜索引擎登录 网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。
链接交换和链接广泛度（LinkPopularity） 网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
合理的标签使用

4.“有什么想问我的？”， 面试官说。
目前关注哪些最新的Web前端技术（未来的发展方向）？
前端团队如何工作的（实现一个产品的流程）？
公司的薪资结构是什么样子的？

一、webpack四个核心概念

1、入口【Entry】
webpack将创建所有应用程序 依赖关系图表。图表的起点被称之为 入口起点。入口起点告诉webpack从哪里开始，并遵循着依赖关系图表知道打包什么。可以将您的应用入口起点认为是跟上下文或app的第一个启动文件。
const config = { entry: { app: './src/app.js' }}​module.exports = config;
2、出口【Output】
将所有资源打包在一起，仍然告诉webpack在哪里打包我们的应用，即将打包资源输出到什么地方。
const config = { entry: { app: './src/app.js' }, output: { filename: 'webpack.bundle.js', path: './dist' }}​module.exports = config;
3、加载器【Loader】
webpack的目标是，让项目中的所有资源都成为webpack的关注点，而浏览器不需要考虑这些（这并不意味着资源都必须打包在一起）。webpack把每个文件（.css, .html, .scss, .jpg, .etc）都作为模块处理。然而webpack只了解JavaScript，所有需要加载器来处理其它类型的文件。因为文件已被添加到了依赖图表，所有webpack加载器会将这些文件转换为模块。loader属性要实现的两个目标：（1）识别出应该被特定的加载器转换的文件；（2）转换能够被添加到依赖图表的文件（并且最终打包）
const config = { entry: { app: './src/app.js' }, output: { filename: 'webpack.bundle.js', path: './dist' }, module: { loaders: [ { test: /.(js|jsx)$/, loader: 'babel-loader' }, { test: /.css$/, loaders: ['style', 'css'] } ] }}​module.exports = config;
loader的两个必选属性test和loader告诉了webpack如下行为：webpack编译器，当你碰到在require()/import
语句中被解析为.js
或.jsx
的路径时，在你把它们添加并打包之前，要先使用babel-loader去转换。同理，css也是这个样子，只不过使用的loader模块不同。
4、插件【Plugins]
加载器仅基于单个文件执行转换，插件最常用于（但不限于）在打包模块的“编译”和“组块”时执行操作和自定义功能。webpack的插件系统极其强大和可定制。为了使用插件，需要require它们，并且把它们添加到plugins数组。多数插件可以通过potion来自定义。由于你可以在一个配置多次使用插件用于不同的目的，因此你需要使用new来创建插件的实例，并且调用插件。
const HtmlWebpackPlugin = require('html-webpack-plugin');const htmlWP = new HtmlWebpackPlugin({template: './src/index.html'});const config = { entry: { app: './src/app.js' }, output: { filename: 'webpack.bundle.js', path: './dist' }, module: { loaders: [ { test: /.(js|jsx)$/, loader: 'babel-loader' }, { test: /.css$/, loaders: ['style', 'css'] } ] }, plugins: [ htmlWP ]}​module.exports = config;
二、webpack解析三种文件路径
（1）绝对路径（2）相对路径（3）模块路径