盒子
盒子
文章目录󰁋
  1. 一、css和js的装载与执行
    1. 1.1 HTML 页面加载渲染的过程
    2. 1.2 HTML渲染过程的一些特点
    3. 1.3 css 阻塞和 js 阻塞
      1. 1.3.1 CSS阻塞
      2. 1.3.2 JS阻塞
  2. 二、资源的压缩与合并
    1. 2.1 文件合并
    2. 2.2 css、js 及 HTML压缩
      1. 2.2.1 CSS压缩
      2. 2.2.2 JS压缩
      3. 2.2.3 HTML压缩
    3. 2.3 http 清求的过程及潜在的性能优化点
  3. 三、图片相关的优化
    1. 3.1 不同格式图片常用的业务场景
    2. 3.2 图片压缩几种方法-雪碧图、Image inline
      1. 3.2.1 使用矢量图
      2. 3.2.2 在安卓下使用webp
  4. 四、 懒加载与预加载
    1. 4.1 懒加载原理
    2. 4.2 预加载原理
    3. 4.3 懒加载、预加载使用场景
    4. 4.4 预加载原生 js 和 PreloadJS 实现
  5. 五、缓存
  6. 六、重绘与回流
    1. 6.1 什么是重绘与回流
      1. 6.1.1 重绘
      2. 6.1.2 回流
    2. 6.2 避免重绘回流的两种方法
    3. 6.3 css 性能让 Javacript 变慢?
    4. 6.4 案例解析-重绘、回流及图层
    5. 6.5 实战优化点总结
  7. 七、浏览器存储
    1. 7.1 cookies
    2. 7.2 LocalStorage、SessionStorage
      1. 7.2.1 LocalStorage
      2. 7.2.2 SessionStorage
    3. 7.3 IndexedDB
    4. 7.4 案例解析
    5. 7.5 PWA与Service Workers
      1. 7.5.1 PWA
      2. 7.5.2 Service Workers
    6. 7.6 Service Workers-离线应用
  8. 八、移动H5前端性能优化指南

图解前端性能优化

一、css和js的装载与执行

1.1 HTML 页面加载渲染的过程

image.png

1.2 HTML渲染过程的一些特点

image.png

1.3 css 阻塞和 js 阻塞

1.3.1 CSS阻塞

image.png

1.3.2 JS阻塞

image.png

二、资源的压缩与合并

2.1 文件合并

image.png

2.2 css、js 及 HTML压缩

2.2.1 CSS压缩

image.png

2.2.2 JS压缩

image.png

2.2.3 HTML压缩

image.png

2.3 http 清求的过程及潜在的性能优化点

image.png

image.png

三、图片相关的优化

3.1 不同格式图片常用的业务场景

image.png

3.2 图片压缩几种方法-雪碧图、Image inline

3.2.1 使用矢量图

image.png

3.2.2 在安卓下使用webp

image.png

四、 懒加载与预加载

4.1 懒加载原理

image.png

4.2 预加载原理

image.png

4.3 懒加载、预加载使用场景

image.png
image.png
image.png
image.png

4.4 预加载原生 js 和 PreloadJS 实现

image.png
image.png

五、缓存

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

六、重绘与回流

6.1 什么是重绘与回流

6.1.1 重绘

image.png

6.1.2 回流

image.png

image.png

6.2 避免重绘回流的两种方法

image.png
image.png
image.png
image.png

6.3 css 性能让 Javacript 变慢?

image.png

6.4 案例解析-重绘、回流及图层

image.png
image.png
image.png
image.png
image.png
image.png
image.png

6.5 实战优化点总结

image.png

七、浏览器存储

7.1 cookies

image.png
image.png
image.png
image.png
image.png
image.png
image.png

7.2 LocalStorage、SessionStorage

7.2.1 LocalStorage

image.png

7.2.2 SessionStorage

image.png

7.3 IndexedDB

image.png

7.4 案例解析

image.png
image.png
image.png

7.5 PWA与Service Workers

7.5.1 PWA

image.png

7.5.2 Service Workers

image.png
image.png
image.png

7.6 Service Workers-离线应用

image.png
image.png

八、移动H5前端性能优化指南

支持一下
扫一扫,支持poetries