资源的合并与压缩
- 减少 http 请求数量
- 减少请求资源的大小
html 压缩
- 压缩在文本文件中有意义但是在HTML中不显示的字符，包括空格、制表符、换行符、注释等
- 使用在线网站压缩、nodejs提供了html-minifier 工具、后端模板引擎渲染压缩
css 压缩
- 无效代码删除、css语义合并
- 使用在线网站压缩、使用 html-minifier 对html 中的 css 进行压缩、使用clean-css 对 css 进行压缩
js 压缩与混乱
- 无效字符的删除、剔除注释、代码语义的缩减与优化、代码保护
- 使用在线网站压缩、使用 html-minifier 对html 中的 js 进行压缩、使用uglifyjs2 对 js 进行压缩
文件合并
- 如果不合并 === > 文件与文件之间有插入的上行请求，增加了N - 1 个网络延迟；受丢包问题影响更严重；经过代理服务器时可能会被断开
- 如果合并 === > 首屏渲染时间变长； 文件缓存大面积失效
- 公共库合并、不同页面的合并
- 使用在线网站进行文件合并、使用 nodejs 实现文件合并
开启 gzip
图片优化
png
- png8 ---- 256 色 支持透明
- png24 ---- 2^24 色 不支持透明
- png32 ---- 2^24 色 支持透明
图片格式
- jpg 有损压缩，压缩率高，不支持透明
- png 支持透明，浏览器兼容好
- webp压缩程度最好，在 iOS webview 有兼容性问题
- svg 矢量图， 代码内嵌，相对较小，图片样式相对简单的场景
- 格式转换与图片压缩 https://zhitu.isux.us/
图片压缩
- 针对真实图片情况，舍弃一些相对无关紧要的色彩信息
- 图片压缩 https://tinypng.com/
css 雪碧图
- 把网站上用到的一些图片整合到一张单独的图片中
- 减少网站的 http 请求数量
- 缺点是当图片比较大时，一次家在比较慢
使用矢量图
- 使用 svg 进行矢量图的绘制
- 使用 iconfont 解决 icon 问题
image inline
- 内嵌图片 base64
- 减少网站的 http 请求数量
HTML 渲染
顺序执行、并发加载
- 词法分析
- 并发加载
- 并发上限
是否阻塞
- css head 中阻塞页面的渲染
- css 阻塞 js 的执行
- css 不阻塞外部脚本的加载
- 直接引入的 js 阻塞页面的渲染
- js 不阻塞资源的加载
- js 顺序执行，阻塞后续 js 逻辑的执行
懒加载 / 预加载
懒加载
- 图片进入可视区域之后请求图片资源
- 对于电商等图片很多，页面很长的业务场景适用
- 减少无效资源的加载
- 并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用
预加载
- 图片等静态资源在使用之前的提前请求
- 资源使用到时能从缓存中加载，提升用户体验
- 页面展示的依赖关系维护
重绘 / 回流
避免使用触发重绘、回流的 CSS 属性
将重绘、回流的影响范围限制在单独的图层之内
回流（或者叫做重排）
- 当 RenderTree 中的一部分（或者全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就称为回流（reflow）
- 当页面布局和几何属性改变时就需要回流
重绘
- 当 RenderTree 中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局，比如background-color，这就叫做重绘（repaint）
关系
- 影响了布局-》回流（重排）
- 没有影响布局-》重绘
- 重排必将引起重绘，而重绘不一定会引起重排
触发页面重布局的属性
- 盒子模型相关属性
width
height
padding
margin
display
border-width
border
min-height - 定位属性以及浮动
top
bottom
left
right
position
float
clear - 改变节点内部文字结构
text-align
overflow-y
overflow
font-weight
font-family
font-size
line-height
vertical-align
white-space
只触发重绘的属性
- color
- border-style
- border-radius
- visibility
- text-decoration
- background
- background-image
- background-position
- background-repeat
- background-size
- outline
- outline-color
- outline-style
- outline-width
- box-shadow
新建DOM的过程
- 获取DOM后分割为多个图层
- 对每个图层的节点计算样式结果（recalculate style -- 样式重计算）
- 为每个节点生成图形和位置（layout -- 回流和重布局）
- 将每个节点绘制填充到图层位图中（paint setup 和 paint -- 重绘）
- 图层作为纹理上传至GPU
- 复合多个图层到页面上生成最终屏幕图像（composite layers -- 图层重组）
将频繁重绘回流的DOM元素单独作为一个独立图层，那么这个DOM元素的重绘和回流的影响只会在这个图层中。
新建独立图层会减少重回回流带来的影响，但是在图层重组的时候会消耗大量的性能，所以要权衡利弊，有所选择。
Chrome创建图层的条件
- 3D 或透视变换 CSS 属性（perspective transform）
- 使用加速视频解码的 <video> 节点
- 拥有 3D（WebGL）上下文或加速的 2D 上下文的 <canvas> 节点
- 混合插件（如flash）
- 对自己的 opacity 做 CSS 动画或使用一个动画webkit变换的元素
- 拥有加速 CSS 过滤器的元素
- 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
- 元素有一个 z-index 较低且包含一个复合层的兄弟元素（也就是该元素在复合层上面渲染）
重绘回流问题 优化方案
- 用 translate 替代 top
- 用 opacity 替代 visibility
- 不要一条一条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
- 把 DOM 离线后修改，比如：先把 DOM 给 display: none（有一次 reflow），然后修改100次，然后再显示出来
- 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局，可能很小的一个改动就会造成整个 table 的重新布局
- 动画实现的速度的选择
- 对于动画新建图层
- 启用 GPU 硬件加速
浏览器存储
cookie
- 因为 http 请求无状态，所以需要 cookie 去维持客户端状态
- cookie 生成方式：http response header 中的 set-cookie； js 中可以通过document.cookie读写cookie
- 使用：用于浏览器端和服务器端的交互；客户端自身数据的存储
- 过期时间：expire
- 存储限制：作为浏览器存储，大小4kb左右；需要设置过期时间 expire
- cookie 存储能力被 localstorage 代替
- httponly 不允许 js 读写
- cookie 中在相关域名下面 --- cdn的流量损耗 。 解决：cdn 的域名和主站的域名要分开
localStorage
- HTML5 设计出来专门用于浏览器存储的
- 大小为 5M 左右
- 仅在客户端使用，不和服务端进行通信
- 接口封装较好
- 浏览器本地缓存方案
sessionStorage
- 会话级别的浏览器存储
- 大小为 5M 左右
- 仅在客户端使用，不和服务端进行通信
- 接口封装较好
- 对于标表单信息的维护
indexedDB
- 用于客户端存储大量结构化数据
- 为应用创建离线版本
PWA
- 可靠：在没有网络的环境中也能提供基本的页面访问
- 快速：针对网页渲染及网络数据访问有较好的优化
- 融入：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性
缓存
Cache-Control
- max-age
- s-maxage
- private
- public
- no-cache
- no-store
Expires
- 缓存过期时间，用来指定资源到期的时间，是服务器端的具体时间点
- 告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求
Last-Modified / If-Modified-Since
- 基于客户端和服务端协商的缓存机制
- Last-Modified ------- response header
- If-Modified-Since ------- request header
- 需要与 cache-control 共同使用
- 缺点：某些服务端不能获取精确的修改时间；文件修改时间改了，但文件内容却没有变
Etag / If-None-Match
- 文件内容的 hash 值
- etag ------- response header
- if-none-match ------- request header
- 需要与 cache-control 共同使用
分级缓存策略
- 200（from cache）: 由expires / cache-control 控制。expires（http1.0有效）是绝对时间；cache-control（http1.1有效）是相对时间。两者都存在时，cache-control 覆盖 expires，只要没有失效，浏览器只访问自己的缓存。
- 304 : 由 last-modified / etag 控制。当上一层失效时或用户点击refresh，F5时，浏览器就会发送请求给服务器，如果服务器端没有变化，则返回304给浏览器。
- 200 ：当浏览器本身没有缓存或者上一层失效时，或者用户点击了CTL + F5 时，浏览器直接去服务器下载最新数据。
