[转] 网页浏览毫秒必争，超强前端网页性能总结三

用 link 代替@import
避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

避免使用Filters
AlphaImageLoad也是IE5.5 – IE8中支持，这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。

Javascript

将脚本置底
HTTP/1.1 specification建议浏览器对同一个hostname不要超过两个并行下载连接， 所以当你从多个domain下载图片的时候可以提高并行下载连接数量。但是当脚本在下载的时候，即使是来自不同的hostname浏览器也不会下载其他资源，因为浏览器要在脚本下载之后依次解析和执行。

因此对于脚本提速，我们可以考虑以下方式，

• 把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。
• 现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。
• HTML5中新加了async关键字，可以让脚本异步执行。

使用外部Javascirpt和CSS文件
使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。

同时将Javascript和CSS从inline变为external也减小了网页内容的大小。

使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页 面，那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面，例如microsoft.com首页，那inline的 javascript和css相对来说可以提供更高的效率。

精简Javascript和CSS
精简就是将Javascript或CSS中的空格和注释全去掉，

统计表明精简后的文件大小平均减少了21%，即使在应用Gzip的文件也会减少5%。

例如我的网站上有5个CSS，4个Javascirpt，下面是分别经过bundling和minify之后的结果。

没有任何处理之前

捆绑Javascript和CSS之后

精简Javascript和CSS之后

用来帮助我们做精简的工具很多，主要可以参考如下：

JS compressors:

• Packer
• JSMin
• Closure compiler
• YUICompressor(also does CSS)
• AjaxMin(also does CSS)

CSS compressors:

• CSSTidy
• Minify
• YUICompressor(also does JS)
• AjaxMin(also does JS)
• CSSCompressor

与VS集成比较好的工具如下：

• YUICompressor- 编译集成，包含在NuGet.
• AjaxMin – 编译集成

去除重复脚本
重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。

减少DOM访问
通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意

• 缓存已经访问过的元素
• Offline更新节点然后再加回DOM Tree
• 避免通过Javascript修复layout

使用智能事件处理
这里说智能的事件处理需要开发者对事件处理有更深入的了解，通过不同的方式尽量少去触发事件，如果必要就尽早的去处理事件。

比如一个div中10个按钮都需要事件句柄，那么我们可以将事件放在div上，在事件冒泡过程中捕获该事件然后判断事件来源。

图片

优化图像
当美工完成了网站的图片设计后，我们可以在上传图片之前对其做以下优化

• 检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。可以使用imagemagick检查：
  identify -verbose image.gif
• 尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
  convert image.gif image.png
• 在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
  pngcrush image.png -rem alla -reduce -brute result.png
• 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

优化CSS Sprite

• Spirite中水平排列图片，垂直排列会增加文件大小；
• Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
• 不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素。

不要在HTML中缩放图片
不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。

使用小且可缓存的favicon.ico
网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标

• 存在
• 文件尽量小，最好小于1k
• 设置一个长的过期时间

移动客户端

保持单个内容小于25KB
这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精简文件工具要用上了。

打包组建成符合文档
把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组建。当你使用这条规则时，首先要确定用户代理是否支持（iPhone不支持）。

文章有点长，能看到这里不容易，谢谢大家捧场，疏漏或补充欢迎留言讨论。

最后编辑：2014-11-05

作者：管理员

这个作者貌似有点懒，什么都没有留下。

站内专栏