页面加载速度的浅研究

1,073 阅读2分钟

页面的加载速度一直备受关注,因为这个是和用户有着非常直接的关系,如果打开一个页面超过2s你甚至没有等待的想法,可能直接就关闭了,所以提高加载速度很重要。
(前面都是废话,实际就是我们需要提高加载速度,看这一句就行)
此处只做在实际项目中遇到的情况,和实际中能试用的情况。

  • 减少html,js,css的大小。
  • 合并压缩css,js
  • 减少图片大小
  • 降低请求的数量,请求会很耗时。
  • 多使用缓存。
  • 降低页面的回流,能使用重绘使用重绘
  • 多使用懒加载
从代码层面解析上面所说:
一、如今使用第三方的框架都会带有一些合并,压缩,打包的功能。比如vue中最后打包后发布对外访问的文件。
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/4/16d96cac4d1f9acb~tplv-t2oaga2asx-image.image)
二、图片可以把多张小图,合并成一张图片,使用背景定位来显示不同的图片,这样加载的时候,只会加载一张
图片。大的图片尽量使用压缩过后的。
三、减少请求的数量。比如有两个请求 a,b,a请求中获取用户的一些信息,b是获取用户的一些更多信息,最好
能做到把a和b合并成一个请求。
四、使用缓存,这是一个很大的话题,浅谈,
1)、比如我在a页面使用了用户信息,在b页面也有用到,我把a的信息缓存
下来,在b使用。
2)、还有就是设置请求头部。我们都知道当服务端返回的状态码为200的时候才是成功,但有的时候我们会看到
某个文件的状态码为304,这个时候是因为客户端在请求一个文件的时候,发现自己缓存的文件
有 Last Modified ,那么在请求中会包含 If Modified Since ,这个时间就是缓存文
件的 Last Modified 。因此,如果请求中包含 If Modified Since,就说明已经有缓存在客户端。服务
端只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。
五、页面的重绘和回流。
影响浏览器性能的还有就是页面的回流和重绘,回流是一个很耗时的操作,回流一定发生重绘,但重绘不一定发生回流,改变页面的大小,盒模型,添加删除样式,定位,浮动都会导致页面的回流。
比如:某个div 隐藏,经常使用的是 display:none;但是这个操作其实是很耗时的,可能你没有感觉,这个时候你可以使用visibility:hidden;
少使用table布局,改变一点整个都会改变