网络带宽已经越来越大,已经不再是会影响网络应用性能的带宽大小。带宽就好比一条马路的宽度,越宽同时能过的车辆就越多,但是就算马路宽了也有可能堵车。现在一个网页基本包括了htmldom、cssdom、JavaScript、ajax请求、图片。JavaScript可能会阻塞dom的解析和构建影响css处理,图片也会影响界面加载时间。而界面加载时间是衡量web性能的标准。
在250ms内渲染界面或者提供视觉反馈才能保证用户不离开。但是每一个http请求都可能包括DNS解析、TCP握手、TLS协商、发送http请求、下载内容,光网络上的延迟就可能在100ms~1000ms之间。
所以除开服务器响应时间和网络延迟在网络没有阻塞的情况下,我们还需要从减少界面加载时间来优化,减少客户端到服务器之间的往返次数、优化JavaScript执行和渲染管道。(浏览器已经做了资源预取和排定优先次序、DNS预解析、TCP预连接、界面预渲染这几个优化)
- 减少客户端到服务器之间的往返次数:尽可能地减少接口的请求。
- 优化JavaScript执行和渲染管道:将引入的js放至body底部,因为js会阻塞界面dom的渲染,js加载完了之后css才会生效。$()jQuery不用等待图片加载完执行js,window.onload会在所有文档包括图片加载后执行。
- 压缩图片资源:大图尽量不用base64、控制在500kb以内。
- 压缩js、css。
- 异步请求数据。