前端优化之资源加载

一、CSS、JS的装载与执行

html页面加载渲染的过程

前端优化之资源加载_第1张图片
特点:
1、顺序执行、并发加载

  • 一个域名并发加载有限制,利用多个CDN域名
  • 词法分析
  • 并发加载
  • 并发上限

2、是否阻塞

  • css head中阻塞页面的渲染
  • css阻塞js的执行
  • css不阻塞外部脚本的加载
  • 直接引入的js阻塞页面的渲染
  • js不阻塞资源的加载
  • js顺序执行,阻塞后续js逻辑的执行

3、依赖关系

  • 页面渲染依赖于css的加载
  • js的执行顺序的依赖关系
  • js逻辑对于dom节点的依赖关系

4、引入方式

  • 直接引入
  • defer
  • async
  • 异步动态引入js

二、懒加载和预加载

懒加载

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

预加载

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

三、回流和重绘

当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)
当页面布局和几何属性改变时就需要回流

当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

回流必将引起重绘,而重绘不一定会引起回流

触发页面重布局的属性

  • 盒子模型相关属性会触发重布局
  • 定位属性及浮动也会触发重布局
  • 改变节点内部文字结构也会触发重布局

前端优化之资源加载_第2张图片

只触发重绘的属性
前端优化之资源加载_第3张图片

新建DOM的过程
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果(Recalculate style–样式重计算)
3. 为每个节点生成图形和位置(Layout–回流和重布局)
4. 将每个节点绘制填充到图层位图中(Paint Setup和Paint–重绘)
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像(Composite Layers–图层重组)

你可能感兴趣的:(前端开发)