前端性能优化---读书笔记

1.减少HTTP请求

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

如果网页中有很多图片，css，js信息，将会频繁的语服务器建立连接和释放连接，必然会造成资源浪费。

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

解决办法：

合并图片（css sprites）,合并css和js文件，图片较多的页面可以使用lazyLoad等技术进行优化
从设计层面简化页面
合理设置HTTP缓存：当浏览器没有缓存的时候访问访问一个网页（**）一共发出78个请求，共600K数据，而当第二次即浏览器已经缓存之后访问仅有10个请求。（直接F5刷新页面的话效果是不一样的，这种情况下请求还是一样，不过被缓存资源的请求服务器是304响应。只有header没有body，可以节省带宽）

2. 正确理解repaint和reflow

repaint意思是重绘，reflow意思是重排。

重绘就是一个元素的外观被改变，但是没有改变布局（宽高）的情况下，如改变visibility,outline,背景色等等。

重排就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上所有其他结点的visibility属性，这也是reflow低效的原因。如：改变窗口的大小，改变文字大小，内容的改变，浏览器窗口的变化，style属性的改变等。

解决办法：

设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式。有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其他元素的布局。

3 减少DOM的操作

在《高性能JavaScript》中这么比喻：把DOM看成一个岛屿，javascript看成另一个岛屿，两者之间以一座收费桥连接。所以每次访问DOM都会交过路费，访问的次数越多，交的费用越多。

解决办法：
修改和访问DOM元素会造成页面的重绘和重排。合理使用javascript变量存储内容，考虑大量DOM元素中循环的性能开销，所以在循环结束时一次性写入。
减少对DOM元素的查询和修改，查询时可将 其赋值给局部变量。

4 使用JSON格式来进行数据交换

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。

5 高效使用HTML标签和CSS样式
将样式表置顶，避免css表达式，
使用<link>代替@import，避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

6 使用CDN加速（内容分发网络）

7 将CSS和JS放在外部文件中引用，css放在head部分，js放在body的末尾

<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。　因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

8 精简CSS和JS文件

CSS和JavaScript的压缩，直接减少下载的文件体积。

9 要锁图片和使用图片sprite技术

一般的图片压缩的方式有：缩小图片的分辨率，改变图片格式，降低图片保存质量。

图片精灵（css sprite）就是把许多图片放到一张大图片里面，通过css来显示图片的一部分。

10 注意控制cookie大小和污染

 因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Cookie，使Cookie体积尽量小以减少对用户响应的影响；

　　使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

　　Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

参考资料：
http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.html

https://www.zhihu.com/question/21658448