文档介绍：web前端优化知识总结+笔试+面试总结
web前端优化知识总结+笔试+面试总结
2 / 50
web前端优化知识总结+笔试+面试总结
前端是庞大的，包括ＨTML、CSＳ、Jaｖascrｉpt、Ｉｍage、Flaｓｈ等等各种各样的而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多,在这里有比较详细的介绍(这里是译文和更详细的例子),而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。
3． 异步执行iｎline脚本
ｉnline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页,与外部脚本一样，inlｉnｅ脚本在执行的时候一样会阻塞并发请求,除此之外,由于浏览器在页面处理方面是
web前端优化知识总结+笔试+面试总结
web前端优化知识总结+笔试+面试总结
2 / 50
web前端优化知识总结+笔试+面试总结
单线程的，当ｉnｌine脚本在页面渲染之前执行时,页面的渲染工作则会被推迟。简而言之，iｎline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因,建议将执行时间较长的inlｉnｅ脚本异步执行,异步的方式有很多种,例如使用scriｐｔ元素的dｅｆｅr属性(存在兼容性问题和其他一些问题，)、使用setTｉmeout,此外,在HTML5中引入了Wｅb Woｒｋｅrｓ的机制，恰恰可以解决此类问题。
4. Lazy Load Jaｖasｃript
随着Ｊaｖascripｔ框架的流行，越来越多的站点也使用起了框架。不过，一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的，如果下载了不需要的脚本则算得上是一种资源浪费－既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的minｉ版框架,另一种则是Lazy Ｌｏad。YUI则使用了第二种方式,在ＹUI的实现中,最初只加载核心模块,其他模块可以等到需要使用的时候才加载。
5. 将CSS放在HＥAD中
如果将CSＳ放在其他地方比如BODＹ中，则浏览器有可能还未下载和解析到CSＳ就已经开始渲染页面了,这就导致页面由无ＣＳS状态跳转到CSS状态，用户体验比较糟糕。除此之外,有些浏览器会在CSS下载完成后才开始渲染页面，如果CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
6. 异步请求Ｃａllback
在某些页面中可能存在这样一种需求，需要使用ｓcrｉｐｔ标签来异步的请求数据。类似：
Javascript:
/*Cａllback函数*/  ﻫfuｎｃtion myＣallback(info）｛  ﻫ/／dｏ somｅｔｈiｎg ｈeｒe 
｝ 
HTML:
<scrｉpt tｙpｅ="text／javascriｐt" src＝"">＜/scrｉpｔ＞
cb返回的内容:
myCallbａcｋ('Heｌlo world!');
      像以上这种方式直接在页面上写＜scrｉpt>对页面的性能也是有影响的,即增加了页面首次加载的负担,推迟了DOMLoａｄed和window．onｌoａｄ事件的触发时机。如果时效性允许的话，可以考虑在DOMLoaｄed事件触发的时候加载,或者使用seｔTｉｍｅoｕｔ方式来灵活的控制加载的时机。
7. 减少不必要的ＨTＴP跳转
对于以目录形式访问的ＨTＴP链接，很多人都会忽略链接最后是否带’/',假如你的服务器对此是区别对待的话，那么你也需要注意,这其中很可能隐藏了3０１跳转,增加了多余请求。具体参见下图，其中第一个链接是以无’/＇结尾的方式访问的，于是服务器有了一次跳转。
８. 避免重复的资源请求
这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求
二、代码级优化
1． Ｊavascrｉpt
（1)． DＯＭ
DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除ＤOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DＯＭ操作则需要注意以下几点：
a. HＴML Colｌection
、、gｅtElementsByTagNamｅ()返回的都是HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有lenｇth属性,也可以使用索引访