网络层面 浏览器渲染 构建层面 服务端层面

1.资源的合并与压缩

2.图片的编码以及类型选择

3.浏览器渲染机制

4.懒加载预加载

5.浏览器存储

6.缓存机制

7.pwa

8.ssr

chrome - performance layers
基础优化 进阶优化 结合服务端优化

资源的合并与压缩

问题：浏览器一个请求从发送到返回都经历了什么？
输入url→domain发送到dns服务器→ip地址返回给浏览器→经过局域网交换机路由器主干网络到达服务器→服务器逻辑处理请求分发数据读取渲染的数据通过网络返回给浏览器→render→dom树css树整合渲染dom节点及样式→执行js脚本
优化点：dns缓存 网络请求(cdn[静态资源 网络选择 缓存]) 接口(浏览器端缓存策略) 带宽(http请求相对较小) 网络损耗(多次http请求合并成一次)渲染(vue,react框架首屏损耗过大 首屏服务端渲染)

减少http请求数量，减少请求资源大小

html压缩 （空格 制表符 换行符 html注释）
css压缩 （无效代码的删除 css语义合并）
js的压缩和混乱 （无效字符的删除 提出注释 代码语义的缩减和优化 代码保护）
文件合并 （存在的问题：首屏渲染问题 缓存失效问题）（公共库合并 不同页面的合并）(浏览器同一个域名下并发请求资源数量有限)
开启gzip

图片

jpg压缩率高 不支持透明（大部分不需要透明图片的业务场景）
png支持透明 兼容性好（大部分需要透明图片的业务场景）
webp压缩程度更好 ios有兼容问题（安卓全部）
svg代码内嵌 相对较小 场景简单（图片样式相对简单的业务场景）

css雪碧图：减少http请求数量 缺点整合图片比较大 一次加载慢
image inline： base64 减少http请求数量
使用矢量图
在安卓下使用webp

浏览器渲染

html页面加载渲染的过程： dom, cssom→render tree→layout→paint
html渲染过程的特点：顺序执行，并发加载（引入很多cssjs外部资源 并发限制 三到四个cdn） 是否阻塞 依赖关系（js异步加载放弃了依赖关系） 引入方式（异步加载 动态引入）
css阻塞：css head中阻塞页面的渲染 css阻塞js的执行 css不阻塞外部脚本的加载
js阻塞：直接引入（没有defer async）的js会阻塞页面渲染 js不阻塞资源的加载 顺序执行
图片预加载原理：img标签display none image()对象 xmrhttprequest(跨域)

css性能让js变慢？
一个线程→js解析
一个线程→UI渲染
ui渲染的时候js是冻结的 js执行时ui线程也是冻结的
频繁出发重绘与回流 会导致ui频繁渲染 js执行变慢
优化css写法 性能

回流： render tree中一部分因元素尺寸 布局或者隐藏改变需要重构
重绘： render tree中一些元素需要更新属性 知识影响外观 风格 比如backgound-color

回流必定引起重绘 重绘不一定引起回流

触发页面重布局的属性：

盒模型相关属性
定位属性及浮动
改变节点内部文字结构

chrome创建图层的条件:
perspective tranform
video
canvas