关键性能指标统计

内容

尽量减少HTTP请求数

减少DNS查找

从输入 URL 地址栏到所有内容显示到界面上的其中一个步骤就是查找 DNS。

DNS解析：将域名解析为 ip 地址，由上往下匹配，只要命中便停止。

  • 走缓存
  • 浏览器 DNS 缓存
  • 本机 DNS 缓存
  • 路由器 DNS 缓存
  • 网络运营商服务器 DNS 缓存（80%的 DNS 解析在这完成的）
  • 递归查询

优化策略：尽量允许使用浏览器的缓存，能给我们节省时间。

避免重定向

让Ajax可缓存

延迟加载组件

预加载组件

减少DOM元素的数量

跨域分离组件

杜绝404

服务器

使用CDN（Content Delivery Network）

添上Expires或者Cache-Control HTTP 头

Gzip

配置ETags

尽早清空缓存区

对Ajax用GET请求

避免图片src属性为空

CSS

https://pustelto.com/blog/optimizing-css-for-faster-page-loads/?ref=sidebar

把样式表放在顶部

避免使用CSS表达式

把CSS放到外面

压缩CSS

舍弃@import

避免使用滤镜

JavaScript

把脚本放在底部

js的阻塞性

把JavaScript放到外面

压缩JavaScript

去除重复脚本

尽量减少DOM访问

用智能的事件处理器

给Cookie减肥

把组件放在不含cookie的域下

图片

优化图片

优化CSS Sprite

不要用HTML缩放图片

用小的可缓存的favicon.ico

移动端

保证所有组件都小于25k

把组件打包到一个复合文档里

参考：

要看的书：

  • 高性能JavaScript
  • 高性能网站建设进阶指南
  • 高性能网站建设指南