前端网页优化

一. 关于请求

  1. 减少请求数量:文件合并,css精灵,内联图片,base64
  2. 减少文件大小:压缩文件和图片(使用gzip),
  3. 减少请求所需要的时间:使用CDN,利用Connection:keep-alive特性建立持久连接( 可以在当前连接上进行多个请求,无需再进行域名解析)
  4. 使用缓存:DNS缓存(设置TTL时间),资源缓存(关于缓存的文章:https://www.cnblogs.com/chenqf/p/6386163.html)

二. 减少渲染阻塞

  1. 把js链接写在body后面,避免js阻塞渲染

  2. 把css链接写在head里(避免页面发生闪烁),但是要减少css文件的大小。

    js和css都是会阻塞渲染的,但是为了避免已经被layout好了的dom再次被重排(从没有css变成有css)而发生的闪烁现象,我们需要将css放在head里。由于css在body前面造成了阻塞渲染,所以我们希望css文件尽量小,以免阻塞时间太久,页面空白时间太长。

三. 优化图片

  1. 懒加载
  2. 预加载