网页性能优化建议

通常,实现网页功能并不难,难在如何用简洁高效的代码实现所需功能,并且有着良好的健壮性、可扩展性、可维护性。从用户角度看,网页打开速度快,各种操作都很流畅,这是很重要的问题(网页性能优化)。

下面简单的罗列一下网页性能优化的几点建议:

1. 减少http请求数

​合并图片(css sprites),尽可能地合并css和js文件。css sprites是指只用将页面上的背景元素合并成一张图,然后通过调整css的background-position属性获取对应的背景图。

2. css文件放在页面头部,js文件放置页面底部

ie,firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。css全称Cascading Style Sheets(层叠样式表),层叠,顾名思义,后面的样式可以覆盖前面的样式,优先级高的样式可以覆盖优先级低的样式,所以为了避免页面加载过程中重画某些页面元素,导致闪烁和性能问题,浏览器这么做也是合理的。

不带特殊属性的script标签。当html页面解析到该标签时会停止,然后浏览器立即发出请求去下载该脚本(如果该脚本是外部脚本的话),等到脚本下载完成,马上解析执行该脚本。脚本执行完毕再接着解析html文档。如果该脚本中有耗时任务,那么页面视觉上加载就比较慢了。考虑到页面内容和脚本之间的依赖关系,我们并不能做到把所有脚本放置页面底部,所以,还是尽可能地往后放吧。

3. 精简css和js文件,即压缩文件体积

4. 使用cdn,图片、css、js等静态资源使用cdn分发

5. 避免空的href和src等属性值为空

当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。

6. 合理利用缓存(Expires 或者 Cache-Control)

前提是css和js写在外部文件中。例如,用Exipres是用来设置css、js、图片资源文件的过期时间,可以使这些内容在指定时间内具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求(用户强制刷新页面除外)。不过哪些文件应该缓存,哪些文件应该实时更新给用户还是应该斟酌一下。

7. 避免404,减少dns查询时间(减少资源域名数量)

比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。一次DNS的解析过程会消耗一定的时间,在dns查询结束之前,浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度,也就是减少页面包含的资源域名数量。

8. 避免重定向

每增加一次重定向就会增加一次web请求,应该尽量减少。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问 http://baidu.com 时,实际上返回的是一个包含307临时重定向的跳转,它指向的是 http://baidu.com/

9. 使用无cookie的域存放静态资源,同时减少主域名cookie数量

比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。

10. js尽量使用“异步加载”,非首屏模块使用“惰性加载”

首屏一定要快!能不加载的先不加载,能不执行的先不执行!

参考:
[1] http://developer.51cto.com/art/201207/347525_all.htm
[2] http://div.io/topic/371

views