qietubaby / js-css

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

前端性能优化

HTML渲染

1.HTML渲染过程的一些特点

  • 顺序执行、并发加载
  • 是否阻塞
  • 依赖关系
  • 引入方式

2.css阻塞

  • css head中阻塞页面的渲染
  • css阻塞js的执行
  • css不阻塞外部脚本的加载

3.js阻塞

  • 直接引入的js阻塞页面的渲染
  • js不阻塞资源的加载
  • js顺序执行,阻塞后续js逻辑的执行

4.懒加载

  • 图片进入可视区域之后请求图片资源
  • 对于电商等图片很多,页面很长的业务场景适用
  • 减少无效资源的加载
  • 并发加载的资源过多会阻塞js的加载,影响网站的正常使用

5.预加载(preload.js)

  • 图片等静态资源在使用之前的提前请求
  • 资源使用到时能从缓存中加载,提升用户体验
  • 页面展示的依赖关系维护

About


Languages

Language:HTML 100.0%