web前端性能优化

跟踪web性能从以下几个方面：

1、浏览器请求和响应过程

2、查询DNS--建立连接--发送请求

3、等待响应--接收数据--读取cache--处理元素

4.、渲染元素

5、时间花在哪里了？

6、性能黄金法则

建议一：减少DNS查询

理想方案：单个域名

带来的问题：浏览器下载并发

折衷的做法：2-4个域名

建议二：使用内容分发网路

CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上

建议三：减少HTTP请求

[align=left]1）合并文件[/align]
通过把多个脚本文件或者多个样式文件合并到单个的脚本/样式文件中来达到减少http请求的目的。当然这个合并的过程是有一定的难度的，但这样做可以改善页面的相应时间。

[align=left]2）CSS Sprites[/align]
[align=left][/align]
[align=left] CSS Sprites是减少图片请求的最好的方法。通过合并网页的背景图片到一个图片中，然后利用css中的background-image和backgroud-position属性调整背景图片显示到你希望的位置[/align]
[align=left][/align]
[align=left]3）image maps(图片映射)[/align]
[align=left]它也是把多个图片合并到单一图片中，虽然总体大小大约是一样的，但同样可以减少请求数量加速网页。这种方式只在图片连续出现如：导航栏使用。定义该图的坐标可能是最烦的并且由于浏览器兼容问题也是最容易出错的。在导航栏中用图片映射的方式并不被推荐[/align]
[align=left][/align]
4)网页中的图片

网页中的图片通过img src属性嵌入到你的网页中，这样会增加网页中Dom节点的数量最好的做法也是把它合并到样式文件中。

5）添加http expires头

为图片视频之类很少改变的资源设置长的Expires时间将直接减少http请求

如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求

建议四：减少数据传输


压缩文件(Js,Css,Images,Gzip)

混淆脚本

合理的Dom结构

按需加载

建议五：脚本放在页面底部

组件并行下载

脚本阻塞并行下载

异步加载方案（defer延迟，直到页面加载为止，async异步执行，创建script）

加载器（SeaJs，RequireJs）

建议六：高效渲染

优化脚本性能（减少Dom操作，避免内存泄露，缓存Dom，模块化，异步加载RequireJs）

图片（懒加载，指定图片尺寸）

高效css选择器（权重优化）