关于前端页面性能的一些简单的看法，当然web标准中提到的结构，表现，行为，我们工作说的xhtml、css、js其实他们还有很多东西，需要我们去学习，比如结构语义化就是一个深入研究的课题，性能优化也是如此，不过只有我们不断的去挖崛，我们才可能进步。

1、请减少HTTP请求

基本原理：在浏览器（客户端）和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。

一个正常HTTP请求的流程简述：如在浏览器中输入"www.xx.cn"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快，所以，请减少HTTP请求。

解决办法：合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用lazyLoad等技术进行优化。

2、请正确理解Repaint和Reflow

基本原理：Repaint（重绘）就是在一个元素的外观被改变，但没有改变布局（宽高）的情况下发生，如改变visibility、outline、背景色等等。

Reflow（重排）就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。

如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道Repaint和Reflow的知识。

减少性能影响的办法：上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为Reflow有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

3、请减少对DOM的操作

基本原理：对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript（ECMAScript）看成另一个岛屿，两者之间以一座收费桥连接”，所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多，所以一般建议尽量减少过桥次数。

解决办法：修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为，所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

注：在IE中，hover会降低响应速度。

株洲云瑞电子商务有限公司位于株洲市荷塘区是一家从事互联网行业的创新型和创造型企业，主营云终端、网站建站、百度等搜索引擎排名、网站后台代运维、株洲荷塘新闻资讯、株洲论坛发帖、微信公众号、微官网、微商城、微营销等，提供专业的网站设计与制作服务。联系电话：15608405025

欢迎关注“云瑞电子商务”公众号