前端性能优化笔记

前端性能优化工具集锦

##避免坏请求
有时页面中的HTML或CSS会向服务器请求一个不存在的资源，比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求。

可以通过Google的PageSpeed工具 来检测，找到问题后，补充相应的资源文件或者修改资源的链接地址即可。

##避免CSS@import
使用 @import方法引用CSS文件可以能会带来一些影响页面加载速度的问题，比如导致文件按顺序加载（一个加载完后才会加载另一个），而无法并行加载。

可以通过CSS delivery工具 来检测页面代码中是否存在@import方法。比如，如果检测结果中存在

1
@import url("style.css")

建议用

1
<link rel="stylesheet" type="text/css" href="style.css">

来代替

##合并多个外部css文件
可以通过 CSS delivery工具 来检测页面代码中的CSS文件，然后通过复制粘贴的方式将它们合并为一个。合并后记得修改页面中的引用代码，并删除旧的引用代码。

##合并多个外部JavaScript文件
可以通过resource check工具 来检测页面中所引用的JavaScript文件数，然后可以通过复制粘贴的方式将多个文件合并为一个。

##启用压缩/GZIP
使用gzip对HTML和CSS文件进行压缩，通常可以节省大约50％到70％的大小，这样加载页面只需要更少的带宽和更少的时间。

可以通过这个Gzip压缩工具来检测页面是否已经经过Gzip压缩。

##压缩css代码
不管在页面中如何使用CSS，CSS文件都是越小越好，这会帮助提升网页的加载速度。

可以通过 Minify CSS工具 来压缩CSS代码。

##尽量减少DNS查询次数
当浏览器与Web服务器建立连接时，它需要进行DNS解析，将域名解析为IP地址。然而，一旦客户端需要执行DNS lookup时，等待时间将会取决于域名服务器的有效响应的速度。

虽然所有的ISP的DNS服务器都能缓存域名和IP地址映射表，但如果缓存的DNS记录过期了而需要更新，则可能需要通过遍历多个DNS节点，有时候需要通过全球范围内来找到可信任的域名服务器。一旦域名服务器工作繁忙，请求解析时就需要排队，则进一步延迟等待时间。

因此，减少DNS的查询次数非常重要，页面加载时就尽量避免额外耗时。为了减少DNS查询次数，最好的解决方法就是在页面中减少不同的域名请求的机会。

可以通过request checker工具 来检测页面中存在多少请求，然后进行优化。

##补充
1.css sprites
2.延迟js加载
尽管可以使用defer、异步或将JavaScript代码放到页面底部来延迟JavaScript的加载，但这些都不是一个好的解决方案。

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">  
function downloadJSAtOnload() {  
var element = document.createElement("script");  
element.src = "defer.js";  
document.body.appendChild(element);  
}  
if (window.addEventListener)  
window.addEventListener("load", downloadJSAtOnload, false);  
else if (window.attachEvent)  
window.attachEvent("onload", downloadJSAtOnload);  
else window.onload = downloadJSAtOnload;  
</script>

意思是等待页面加载完成该后，然后再加载外部的”defer.js”文件
3.启用Keep-Alive
HTTP协议采用“请求-应答”模式，当使用普通模式（非KeepAlive模式）时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用 Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

在HTTP 1.0中Keep-Alive默认是关闭的，需要在HTTP头中加入“Connection: Keep-Alive”，才能启用Keep-Alive；在 HTTP1.1中Keep-Alive默认启用，加入“Connection: close”可关闭。目前大部分浏览器都是用HTTP 1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep- Alive连接就看Web服务器的设置情况。

4.尽量减少重定向

5.优化样式表和脚本的顺序

6.避免javascripts阻塞渲染
浏览器在遇到一个引入外部JS文件的script标签时，会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了。这时页面加载就会停止。

7.指定图像尺寸
当浏览器加载页面的HTML代码时，有时候需要在图片下载完成前就对页面布局进行定位。如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示，这将消耗额外的时间）。

所以，最好为页面中的每一张图片都指定尺寸，不管是在HTML里的标签中，还是在CSS中。

##参考文章
[1]https://developers.google.com/speed/docs/insights/rules
[2]http://developer.yahoo.com/performance/rules.html(英)
[3]http://dudo.org/archives/2008051211216.html(中)
[4]https://varvy.com/

[5]http://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization

性能优化
前端