Web前端性能优化

1、CSS方面：

1.精简css文件

　　移除额外的空格；细微优化等，减少文件体积。

2. 高效使用HTML标签和CSS样式
　　HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，好比Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
　　CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：
　　ID选择符 #box
　　类选择符 .box
　　标签 div
　　伪类和伪元素 a:hover

　　body .box .border ul li p strong span{color:#000}
　　以上都是对HTML和CSS很是糟糕的使用方法。
　　当页面被触发引发回流（reflow）的时候，低效的选择符依然会引起更高的开销，因此请避免低效。

3. 请正确理解 Repaint 和 Reflow，尽量限制Reflow的影响范围。

　　Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的状况下发生，如改变visibility、outline、背景色等等。
　　Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会从新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的全部其它结点的visibility属性，这也是Reflow低效的缘由。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。若是Reflow的过于频繁，CPU使用率就会噌噌的往上涨。
　　减小性能影响的办法：
　　上面提到经过设置style属性改变结点样式的话，每设置一次都会致使一次reflow，因此最好经过设置class的方式； 有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；若是功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。
总之，由于 Reflow 有时确实不可避免，因此只能尽量限制Reflow的影响范围。

2、JS方面：

1.精简js文件

　　JavaScript的压缩，直接减小下载的文件体积。

2.请减小对DOM的操做

　　对DOM操做的代价是高昂的，这在网页应用中的一般是一个性能瓶颈。修改和访问DOM元素会形成页面的Repaint和Reflow，循环对DOM操做更是罪恶的行为。因此请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减小对DOM元素的查询和修改，查询时可将其赋值给局部变量

3. 使用JSON格式来进行数据交换
　　JSON是一种轻量级的数据交换格式，采用彻底独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
　　与XML序列化相比，JSON序列化后产生的数据通常要比XML序列化后数据体积小，因此在Facebook等知名网站中都采用了JSON做为数据交换方式。

3、图片方面

1.压缩图片大小

　　1.缩小图片分辨率；
　　2.改变图片格式；
　　3.下降图片保存质量。

2.合并图片（css sprites）

　　把许多图片放到一张大图片里面，经过CSS来显示图片的一部分。

4、其它方面

1.减小HTTP请求

　　在浏览器(客户端)和服务器发生通讯时，就已经消耗了大量的时间，尤为是在网络状况比较糟糕的时候，这个问题尤为的突出。
一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器创建链接，而后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
而当咱们请求的网页文件中有不少图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器创建链接，与释放链接，这一定会形成资源的浪费，且每一个HTTP请求都会对服务器和浏览器产生性能负担。
　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。因此，请减小HTTP请求。
　　解决办法：
　　合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可使用 lazyLoad 等技术进行优化。

2.将CSS和JS放到外部文件中引用，CSS放头，JS放尾

　　引入外部文件好处是显而易见的，并且是项目稍稍复杂一点的时候就有必要了这样作了。易维护、易扩展，方便管理和重复利用。

　　在浏览器在执行JavaScript代码时，不能同时作其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的仍是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。由于这个阻塞的特色，建议把JavaScript代码放到</body>标签之前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

3. 注意控制Cookie大小和污染

　　由于Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，因此建议去除没必要要的Coockie，使Coockie体积尽可能小以减小对用户响应的影响；　　使用Cookie跨域操做时注意在适应级别的域名上设置coockie以便使子域名不受其影响；　　Cookie是有生命周期的，因此请注意设置合理的过时时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。