优化方向 | 优化手段 |
---|---|
请求数量 | 合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域 |
请求带宽 | 开启 GZip,精简 JavaScript,移除重复脚本,图像优化 |
缓存利用 | 使用 CDN,使用外部 JavaScript 和 CSS,添加 Expires 头,减少 DNS 查找,配置 ETag,使 AjaX 可缓存 |
页面结构 | 将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出 |
代码校验 | 避免 CSS 表达式,避免重定向 |
压缩源码和图片
合适的图片格式
图片占网站的流量比重很大,如果颜色数较多选用 JPG,颜色数教授使用 PNG,另外可以根据浏览器的支持情况使用 WebP 或 SVG 格式
静态资源的合并
浏览器常常限定了对同一域名发起的并发连接数的上限,所以我们合并合并小图片、CSS、JS 文件,减少 HTTP 请求
使用 Gzip 压缩
文本资源的Gzip压缩比很可观,不过图片资源没有很高的压缩比例
使用 CDN 引入开源库、图片
使用一些开源库、第三方的静态资源地址(jQuery、Moment.js、bootstrap等)。一方面可以增加并发下载量,另一方面可以和其他网站共享内存。另外图片也有 CDN 加速,国内有很多图片云存储提供商
延长静态资源的缓存时间
使用缓存,频繁访问网站的访客可以更快地访问。当需要更新资源的时候,可以通过修改文件名的方式,使得用户能拉取到最新内容
CSS 放置在页面头部,JS 放置在页面底部
资源文件这样放置不会阻塞页面渲染,页面不会出现长时间的空白