网络性能优化实战

网络性能优化实战

首屏一秒渲染原则

对于APP里面的H5页面首屏渲染时间不能超过1秒，首屏不要加载太多资源。Google提出了1秒钟完成首屏页面的渲染！

1. 服务器响应必须小于200ms
2. 尽量少的重定向
3. 尽量少的第一次渲染请求数
4. 避免过多阻塞的JS、CSS
5. 给浏览器留200ms的渲染时间
6. 优化我们的JS执行效率和渲染时间

加载优化

减少HTTP请求

尽量减少页面对后台的请求数，能合并的合并。

• 合并CSS、JavaScript等代码
• 合并小图片，使用雪碧图

使用响应性网页设计，避免重定向

响应性网页设计是指通过同一网址提供相同HTML代码的网站设计方法，使用户不用考虑所使用的是PC、Pad、APP设备，自动适应所使用的设备屏幕。

使用浏览器缓存

使用浏览器缓存减少对服务器的请求，所有可缓存静态资源（JS、CSS、图像、媒体文件、PDF文件）都应该在服务器端启用浏览器缓存（缓存一切可以缓存的资源）。注： HTML不是静态资源。

• 设置Expires报头为将来某个时间，比如设置为1周。则浏览器在这一周内访问将使用已经缓存的资源，不会发出GET请求去网络查看资源是否发生改变。除非用户手动清除了缓存。

对于设置了缓存的网络请求我大致画了一个流程图如下：

• 上面提到的使用外联式引用CSS、JavaScript可以启动浏览器的缓存功能

启用压缩、合并功能

通过对HTML、CSS、JavaScript等资源进行压缩合并。并在服务器端设置GZip。

• 文件资源压缩：将多余的空格、换行符、缩进、注释等不必要的字节去掉从而提高下载、解析、执行速度，这一类的在线工具比较多，这里列举几个如下：

  • 在线JS/CSS/HTML压缩
  • Minify your JavaScript
  • YUI Compressor

• 合并文件