Web前端性能优化

封面

版权信息

作者简介

内容简介

前言

第1篇 前端性能优化概述

第1章 什么是性能优化

1.1 性能的起因

1.2 性能的影响

1.2.1 用户的留存

1.2.2 网站的转化率

1.2.3 体验与传播

1.3 性能评估模型

1.3.1 响应

1.3.2 动画

1.3.3 空闲

1.3.4 加载

1.4 性能优化的步骤

1.4.1 性能测量

1.4.2 生命周期

1.4.3 优化方案

1.5 本章小结

第2章 前端页面的生命周期

2.1 一道前端面试题

2.2 网络请求线程开启

2.2.1 进程与线程

2.2.2 单进程浏览器

2.2.3 多进程浏览器

2.3 建立HTTP请求

2.3.1 DNS解析

2.3.2 网络模型

2.3.3 TCP连接

2.4 前后端的交互

2.4.1 反向代理服务器

2.4.2 后端处理流程

2.4.3 HTTP相关协议特性

2.4.4 浏览器缓存

2.5 关键渲染路径

2.5.1 构建对象模型

2.5.2 渲染绘制

2.6 本章小结

第2篇 典型模块的性能优化

第3章 图像优化

3.1 图像基础

3.1.1 图像是否必需

3.1.2 矢量图和位图

3.1.3 分辨率

3.1.4 压缩的有损和无损

3.2 图像格式

3.2.1 JPEG

3.2.2 GIF

3.2.3 PNG

3.2.4 WebP

3.2.5 SVG

3.2.6 Base64

3.2.7 格式选择建议

3.3 使用建议

3.3.1 CSS Sprite

3.3.2 Web字体

3.3.3 注意display：none的使用

3.4 本章小结

第4章 加载优化

4.1 图像延迟加载

4.1.1 什么是延迟加载

4.1.2 实现图片的延迟加载：传统方式

4.1.3 实现图片的延迟加载：Intersection Observer方式

4.1.4 实现图片的延迟加载：CSS类名方式

4.1.5 原生的延迟加载支持

4.2 视频加载

4.2.1 不需要自动播放

4.2.2 视频代替GIF动画

4.3 加载注意事项

4.3.1 首屏加载

4.3.2 资源占位

4.3.3 内容加载失败

4.3.4 图像解码延迟

4.3.5 JavaScript是否可用

4.4 资源优先级

4.4.1 优先级

4.4.2 预加载

4.4.3 预连接

4.4.4 预提取

4.5 本章小结

第5章 书写高性能的代码

5.1 数据存取

5.1.1 数据存取方式

5.1.2 作用域和作用域链

5.1.3 实战经验

5.2 流程控制

5.2.1 条件判断

5.2.2 循环语句

5.2.3 递归

5.3 字符串处理

5.3.1 字符串拼接

5.3.2 正则表达式

5.3.3 优化正则表达式

5.4 快速响应

5.4.1 浏览器的限制

5.4.2 异步队列

5.5 其他建议