Web前端面试题汇总

1.说一下http和https

- http和https的基本概念
 
http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
 
https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
 
https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

- http和https的区别
http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
 
主要的区别如下：

• Https协议需要ca证书，费用较高。
• http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
• 使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
• http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
• 默认HTTP的端口号为80，HTTPS的端口号为443。

https协议的优点

• 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
• HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
• HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

https协议的缺点

• https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。
• https缓存不如http高效，会增加数据开销。
• SSL证书也需要钱，功能越强大的证书费用越高。

2.TCP传输的三次握手四次挥手策略

三次握手

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。

• 发送端首先发送一个带SYN标志的数据包给对方。
• 接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
• 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
   
  (若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包)

四次挥手

断开一个TCP连接则需要“四次握手”

• 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
• 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
• 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
• 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

3.TCP和UDP的区别

• TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。
• TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
• TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
• TCP只能是1对1的，UDP支持1对1,1对多。
• TCP的首部较大为20字节，而UDP只有8字节。
• TCP是面向连接的可靠性传输，而UDP是不可靠的。

4.创建ajax过程

• 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
• 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
• 设置响应HTTP请求状态变化的函数.
• 发送HTTP请求.
• 获取异步调用返回的数据.
• 使用JavaScript和DOM实现局部刷新.

5.WebSocket的实现和应用

WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个
 
WebSocket的优点
HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。

6.HTML5 drag api

拖放元素，是一个可拖放元素，img和a默认可拖放,其他元素可设置 draggable = "true"

• dragstart 拖放开始
• drag 正在拖放
• dragend 拖放结束

 
目标元素，放置拖放元素，设置可放置的目标元素

• dragenter 进入目标元素
• dragover 在目标元素内部活动 ---- event.preventDefault() 阻止默认行为
• drop 将拖放元素放置在目标元素内部 ----event.stopPropagation() 阻止冒泡

 
拖放事件生命周期
 
dragstart-->drag-->dragenter-->dragover-->drop-->dragend

7.HTTP状态码分类

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。
HTTP状态码共分为5种类型：

• 1** 信息，服务器收到请求，需要请求者继续执行操作
• 2** 信息，成功，操作被成功接收并处理
• 3** 重定向，需要进一步的操作以完成请求
• 4** 客户端错误，请求包含语法错误或无法完成请求
• 5** 服务器错误，服务器在处理请求的过程中发生了错误

8.Cookie、sessionStorage、localStorage的区别

共同点：都是保存在浏览器端，并且是同源的。

• cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递
• cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下
• 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。
• webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大
• 数据的有效期不同sessionStorage：仅在当前的浏览器窗口关闭有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭
• 作用域不同sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；localStorage：在所有同源窗口都是共享的；cookie：也是在所有同源窗口中共享的

9.说一下web worker

在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
 
worker主线程:

• 通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
• 通过worker.postMessage( data) 方法来向worker发送数据。
• 绑定worker.onmessage方法来接收worker发送过来的数据。
• 可以使用 worker.terminate() 来终止一个worker的执行。

10.iframe是什么？有什么优缺点？

定义：iframe元素会创建包含另一个文档的内联框架
 
优点:

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• iframe无刷新文件上传
• iframe跨域通信
   
  缺点：
• 会阻塞主页面的onload事件
• 搜索引擎无法解读这种页面，不利于SEO
• 页面会增加服务器的http请求
• iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

11.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
 
严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。
 
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

12.XSS与CSRF有什么区别吗？

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。
 
CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
 
CSRF的防御

• 服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。
• 通过验证码的方法

13.cookie session区别

• cookie数据存放在客户的浏览器上，session数据放在服务器上。
• cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
  考虑到安全应当使用session。
• session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
  考虑到减轻服务器性能方面，应当使用COOKIE。
• 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

14.前端优化

• 降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
• 加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
• 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。
• 渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。
• 减少DOM操作次数
• 合并样式和脚本，使用css图片精灵

15.GET和POST的区别

• get参数通过url传递，post放在request body中。
• get请求在url中传递的参数是有长度限制的，而post没有。
• get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
• get请求只能进行url编码，而post支持多种编码方式
• get请求会浏览器主动cache，而post支持多种编码方式。
• get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
• GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
• GET产生一个TCP数据包；POST产生两个TCP数据包。

16.HTTP支持的方法

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

17. 说一下浏览器缓存

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。
 

• 强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。
• 协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match

18.HTML5新增的元素

• 标签增删
  
• canvas绘图，支持内联SVG。支持MathML
• 多媒体audio video source embed track
• 本地离线存储，把需要离线存储在本地的文件列在一个manifest配置文件
• web存储。localStorage、SessionStorage

19.CSS3新特性

圆角（border-radius），阴影（box-shadow），文本阴影（text-shadow），线性渐变（gradient），旋转（transform）， 变形（transform），translate（移动 长度值或百分数值），scale（缩放 数值），rotate（旋转 角度），skew（倾斜 角度），opacity，rgba()，hsla()，word-wrap，background-image，background-origin，border-image，font-face，selection（伪元素），媒体查询，多栏布局。

20.javascript对象的几种创建方式

• 工厂模式
• 构造函数模式
• 原型模式
• 混合构造函数和原型模式
• 动态原型模式
• 寄生构造函数模式
• 稳妥构造函数模式

21.javascript继承的6种方法

• 原型链继承，将父类的实例作为子类的原型，他的特点是实例是子类的实例也是父类的实例，父类新增的原型方法/属性，子类都能够访问，并且原型链继承简单易于实现，缺点是来自原型对象的所有属性被所有实例共享，无法实现多继承，无法向父类构造函数传参。
• 构造继承，使用父类的构造函数来增强子类实例，即复制父类的实例属性给子类，构造继承可以向父类传递参数，可以实现多继承，通过call多个父类对象。但是构造继承只能继承父类的实例属性和方法，不能继承原型属性和方法，无法实现函数服用，每个子类都有父类实例函数的副本，影响性能。
• 实例继承，为父类实例添加新特性，作为子类实例返回，实例继承的特点是不限制调用方法，不管是new 子类（）还是子类（）返回的对象具有相同的效果，缺点是实例是父类的实例，不是子类的实例，不支持多继承。
• 拷贝继承：特点：支持多继承，缺点：效率较低，内存占用高（因为要拷贝父类的属性）无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）。
• 组合继承：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。
• 寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点。

22.页面导入样式时，使用link和@import有什么区别

• 本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
• 加载顺序的差别：当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
• 兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
• 使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

23.HTML与XHTML二者有什么区别?

• HTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML文档必须拥有根元素。

24.简述一下你对HTML语义化的理解

• 用正确的标签做正确的事情。
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析;
• 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
• 搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利用SEO;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

25.position的值

• absolute 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
• fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
• static 默认值。没有定位，元素出现在正常的流中
• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
• inherit 规定应该从父元素继承position 属性的值

26.如何解决跨域问题

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

• 使用spring拦截器解决跨域问题
• nginx 转发
• JSONP
  原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。（由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理）
• CORS（跨域资源共享），服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求，前后端都需要设置。
• 服务器代理，启一个代理服务器，实现数据的转发，浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。
• document.domain 跨域
• window.name + iframe跨域：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。
• location.hash + iframe跨域：a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
• postMessage跨域：可以跨域操作的window属性之一。

27.同源策略

同源策略是客户端脚本的重要安全度量标准。目的是防止某个文档或脚本从多个不同的源装载,是用于隔离潜在恶意文件的重要安全机制。
 
同源定义: 域名（Host）、端口（Port）、协议（Protocol）

28.XML和JSON的区别

• 数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些。
• 数据交互方面：JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
• 数据描述方面：JSON对数据的描述性比XML较差。
• 传输速度方面：JSON的速度要远远快于XML。

29.谈谈你对webpack的看法

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。
 
webpack的两大特色：

• code splitting（可以自动完成）
• loader 可以处理各种类型的静态文件，并且支持串联操作
   

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

• 对 CommonJS 、 AMD、ES6的语法做了兼容
• 对js、css、图片等资源文件都支持打包
• 有独立的配置文件webpack.config.js
• 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
• 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
• 支持 SourceUrls 和SourceMaps，易于调试
• 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
• webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

30.渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
 
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

31. 输入URL到页面加载显示完成发生了什么?

• DNS解析
• TCP连接
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器解析渲染页面
• 连接结束

32.css盒模型

标准盒子模型

标准盒子模型的盒子宽度：左右border+左右padding+width
 
IE盒子模型

IE盒子模型的盒子宽度：width
 
在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型
 
区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

33.BFC

**BFC全称为块格式化上下文 (Block Formatting Context) **
 
直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

• 用于清楚浮动，防止margin重叠，自适应的两栏布局等
• BFC区域不会与float box重叠
• BFC是页面上的一个独立容器，子元素不会影响到外面

34.垂直居中的方法

• margin:auto法

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

• margin负值法

position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;    /*父元素height的一半*/
margin-left: -100px;   /*父元素width的一半*/

• transform变形

position: absolute;
top: 50%;
left: 50%;
transform：translateX(-50%);
transform：translateY(-50%);
/*可以合起来写  transform: translate(-50%, -50%); */

• table-cell（未脱离文档流的）

display: table-cell;
vertical-align: middle;
text-align: center;

• 利用flex

display: flex;
align-items: center;
justify-content: center;

• calc计算位置

position: absolute;
left:calc((父元素的宽 - 子元素的宽)/2)
top:calc((父元素的高 - 子元素的高)/2)

35.怎么清除浮动

• 使用带clear属性的空元素
  在浮动元素后使用一个空元素如，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
或

  ---

  来进行清理。
• 使用CSS的overflow属性
  给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
• 给浮动的元素的容器添加浮动
  给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
• 使用邻接元素处理
  什么都不做，给浮动元素后面的元素添加clear属性。
• 使用CSS的:after伪元素
  结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

36.回流和重绘

回流(Reflow)：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
 
会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如:hover）
• 查询某些属性或调用某些方法，包括offsetLeft、offsetTop、offsetWidth、offsetHeight、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、调用了getComputedStyle()或者IE的currentStyle时，浏览器为了返回最新值，会触发回流。

 
重绘 (Repaint)：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

• reflow回流必定引起repaint重绘，重绘可以单独触发
• 背景色、颜色、字体改变（注意：字体大小发生变化时，会触发回流）
   

性能影响：回流比重绘的代价要更高。
有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。
 
优化渲染性能，减少回流和重绘

• 尽量避免改变布局属性。如width, height, left, top。
• 除了transforms 或者 opacity属性都会引起重绘，做动画的时候要注意，尽量使用这两个属性；
• 使用Flexbox。
• 避免多次读取部分布局属性（同上）
• 将复杂的节点元素脱离文档流，降低回流成本

37.使元素消失的方法有哪些？

• opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。（保留占据的空间）
• visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。（保留占据的空间）
• display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。 (元素原来占据的空间位置不保留； 产生回流和重绘。)

38.常用的布局

• 固宽布局：各个模块是固定宽度
  特点：设计简单，不会受到图片等固定宽度内容的影响。对比高分辨率的用户，固定宽度会留下很多空白，屏幕小出现滚动条。
• 流动布局：使用百分比的方式自适应不同的分辨率
  特点：对用户友好，能够部分自适应用户的设置。网页周围的空白区域在所有分辨率和显示器下都是相同，视觉上美观。设计者需要进行不同的测试，准备不同的对应素材
• 弹性布局：使用em作为单位，em是相对单位，随用户字体大小变化而改变
  特点：页面中所有元素可以随着用户的偏好缩放，需要花更多的事件测试，让布局适合所有的用户
• 栅格化布局：也分为固定式栅格，流式栅格
  在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W =（a*n）+（n-1）*I，由于a+i=A，因此可得：(A×n) – i = W。注：最左右边没有边距(margin-left,marign-right)。
  特点：可以提高网页的规范性和可用性。在栅格系统下，页面模块的尺寸标准化。整个网站的各个页面布局一致，增加页面的相似度。
• 响应式布局
  允许页面宽度自动调整，利用媒体查询根据不同的宽度设置不同的样式，液态布局，自适应媒体（图片，视频）。

39.css布局

• 圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。
• 双飞翼布局给center 部分包裹了一个 main 通过设置margin主动地把页面撑开。
• Flex布局是由CSS3提供的一种方便的布局方式。
• 绝对定位布局是给container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动，right 向右浮动。center 使用绝对定位，通过设置left和right并把两边撑开。 center 设置top: 0和bottom: 0使其高度撑开。
• 表格布局的好处是能使三栏的高度统一。
• 网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

40.说一下事件委托

事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
 
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
 
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

41.图片的懒加载和预加载

预加载：就是在网页全部加载之前，提前加载图片，当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。
 
预加载方法

• 使用css背景图片
• 使用JavaScript配合css背景图片
• 用JavaScript创建图片
• 使用Ajax

 
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。延迟加载图片或符合某些条件时才加载某些图片。
 
懒加载方法

• 使用定时器或者计时器
• 条件加载
• 可视区域加载

 
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

42.js的new操作符做了哪些事情

• 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
• 属性和方法被加入到 this 引用的对象中。
• 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

43.改变函数内部this指针的指向函数（bind，apply，call的区别）

通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2…（参数列表）这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。

44.js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

• clientHeight：表示的是可视区域的高度，不包含border和滚动条
• offsetHeight：表示可视区域的高度，包含了border和滚动条
• scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
• clientTop：表示边框border的厚度，在未指定的情况下一般为0
• scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

45.异步加载js的方法

defer：只支持IE如果您的脚本不会改变文档的内容，可将 defer 属性加入到