网页加载性能调优
Posted CTO老王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页加载性能调优相关的知识，希望对你有一定的参考价值。
减少HTTP的请求数
合并Js、CSS文件，使用CSS sprites，使用Inline images（将base64的图片数据放在页面中会加大页面大小，可以放在可缓存的css中），使用iconfont。
CDN
用户80%~90%的时间是用来下载图片、样式、脚本、Flash等静态资源，将静态资源分发到离用户最近的服务器上，可加快下载速度。
使用缓存
某站点设置静态资源缓存后，浏览网页时，一些公用的静态资源已经在浏览其它页面时下载缓存了，不用再发起请求。在缓存过期前，网页内容也没变动时，再次访问网页，所有静态资源都可以从缓存读取。
合理配置缓存策略，在公用的静态资源和请求数之间达到平衡，站点的不同页面间可以共用更多的公用的静态资源。站点更新不仅能即时反馈，而且做到网页只需加载有变动的文件。
http响应头信息Expires、Cache-Control是缓存字段。这里的缓存是指浏览器缓存，缓存过期前不用发起请求。
Gzip压缩
服务端收到浏览器请求后，经gzip压缩后传输的大小可减小70%，浏览器接收后解压。pdf、图片本身已经压缩了不再需要gzip。一般文档类型默认启用了gzip，其它静态资源，比如样式、脚本要单独配置启用gzip。
将样式表放在页面上方
网页渲染是从上往下执行，边下载边解析页面元素，将样式放在页尾，下载完样式后执行会使页面样式闪烁。
貌似有些浏览器只有等css下载好了之后，才展示出页面。chrome访问过国外网站，出现过css没下载好，整个页面都是空白。
将脚本放在底部
浏览器中javascript与UI共用一个线程，现在的浏览器Js下载是并行的（IE8、Firefox3、Chrome2是串行），下载时会阻止页面一些资源加载（google说下载、解释、执行都会阻止），如图片；执行是阻塞浏览器的页面的下载和渲染，所以引入的Js要放在页末。
Ps:
css文件下载是并行的，不阻碍其它文件下载。而Js基本都用来操作Dom的，代码的执行要等Dom渲染完成，所以一般Js代码可以直接放在页尾，如果放在页首，处理Dom元素的Js代码要放在Dom下载完成的事件回调内。
除非你在DOM标签内部指定事件类型和回调函数名（不推荐），不然把Js放在页首没意义。
避免使用CSS中的Expressions
|
1
以上是关于网页加载性能调优的主要内容，如果未能解决你的问题，请参考以下文章 |