web 性能优化

着手三个部分：

js部分：

（1）减少http请求：

　     web中一次请求要经历发起请求，服务器响应，返回数据，浏览器渲染，才能把数据展示在页面上，其中80%的时间都耗在http请求中，只有20%是浏览器渲染时间。。。

（2）减少对dom的访问和操作，改为创建文档碎片，进行虚拟dom操作

        在浏览器中访问dom节点需要调用查找方法，每个找都是要进行循环遍历才能找到，特别是对于嵌套比较深的dom节点进行查找，过程非常缓慢，于此同时，对dom进行增删改的操作耗费浏览器的性能更大，这也是vue最近比较火，jq越来越少有人用的原因。

（3）dns缓存，浏览器缓存（localstorage、sessionstroage）

        dns缓存是当正常访问ip后系统会将这个ip存储起来，当再次访问的时候，系统就会直接把本地的DNS缓存提取显示，等于是加速了网址的解析；浏览器缓存包括页面html缓存和图片, js，css等资源的缓存到用户本地电脑硬盘里，是服务器响应更快和减少网络带宽消耗。

（4）使用异步加载外部js资源和外部资源本地化

        对于一些外部资源使用非阻塞异步加载的方法，不阻塞页面加载，比较大的资源下载到本地加载，提高资源加载稳定性。

HTML部分：

（1）标签语义化：

          即用合理、正确的标签来展示内容，比如 h1-h6 定义标题，使其易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。

（2）合理规划页面结构：

         使用合理的页面结构，使代码更加清晰，有利于后期的维护，图片较小和不重要的转为base64格式，提升加载速度，尽量减少DOM元素的数量与层级。

（3）选择器的合理使用

　　根据项目大小，选择主要使用class还是id。id选择器优先级最高，访问速度最快。但是在html中每声明一个id，就会在JS底层声明一个全局变量，而全局变量的增多，将会拖慢JS中变量遍历的效率，若变量遍历达到十万次以上，就会出现较显著的延迟，而且容易造成全局变量污染。对于小项目，并无影响，但是对中大型项目来说，尤其是游戏项目，影响很大。个人推荐，当项目较小时，灵活使用class和id，当项目较大时，尽量少使用id。

（4）使用异步加载iframe标签和尽量避免使用table标签

         浏览器加载iframe标签时，会阻塞父页面渲染树的构建及HTTP请求，因此尽量使用异步加载iframe；浏览器对table标签的解析是全部生成后再一次性绘制的，因此会造成表格位置较长时间的空白，推荐使用ul及li标签绘制表格。

CSS样式：

（1）禁止使用样式表达式：

　　CSS表达式从IE5起开始支持，但仅有IE支持。它的解析速度较慢，而且运算次数远比我们想象的要大，随意动动鼠标就能轻松达到上万次运算，会对页面性能造成影响。譬如："#myDiv{width:expression(document.body.offsetWidth - 110 + "px"); }"。

（2）优化关键选择器：

         去掉无效的父级选择器，尽量少在选择器末尾使用通配符，浏览器对CSS选择器的解析式从右往左进行的，减少中间的无效的父级选择器，大大提高效率。

（3）将CSS放在HTML的上面部分

       这个策略不能提高网站的加载速度，但它不会让访问者长时间看着空白屏幕或者无格式的文本（FOUT）等待。如果网页大部分可见元素已经加载出来了，访问者才更有可能等待加载整个页面，从而带来对前端的优化效果。这就是知觉性能。

（4）使用CSS雪碧图

        将多个图片合并成一个图片（即将多个HTTP请求减少为一个HTTP请求），然后以位置信息定位超链接；

（5）使用 link 而不是@import

　　加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载，也就是说，@import会组织浏览器的并行下载；link是HTML的元素，不存在兼容性问题；@import只有IE5+才能识别；

（6）减少重排和减少重绘

希望对各位有用！谢谢

       重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。

我们应该避免发生重排，下面是触发重排的例子

　　　　改变 font-size 和 font-family；

　　　　改变元素的内外边距；

　　　　通过JS改变CSS类；

　　　　通过JS获取DOM元素的位置相关属性（如width、height、left等）；

　　　　CSS伪类激活；

　　　　滚动滚动条或者改变窗口大小；

        减少重绘，当元素的外观（如color、background、visibility等属性）发生改变时，会触发重绘。在网站的使用过程中，重绘是无法避免的。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。不过我们仍需要避免不必要的重绘，如页面滚动时触发的hover事件，可以在滚动的时候禁用 hover 事件，这样页面在滚动时会更加流畅；

（7）合并、压缩CSS文件