1.减少HTTP请求
合并脚本、css、雪碧图
2.减少DNS查找次数
使用CDN,网站静态资源放到访问距离最近服务器
dns预解析
3.避免跳转
301永久/302暂时 把用户指向新地址，PC、移动端、iPad，跳转优化
4.可缓存AJAX
设置cache-control，Etags报文头，expires cache有效时间
5.推迟加载内容
移动端异步加载耗时，使用模板和后台配合，优先加载重要内容，再加载异步数据
6.预加载
onload预加载/有条件预加载(滑动)
link ref="prefetch"
7.减少DOM元素数量
8.根据域名划分页面内容
图片、脚本、Css分别存在 二级域名上
9.使iframe数量最小
iframe解决第三方站点加载问题，并行加载脚本，缺点iframe加载需要时间，阻止页面加载
10.不要出现404错误
11.使用内容分发网络
静态资源服务器，CDN 一系列各个不同地理位置的web服务器组成，提高网站传输速度，节省响应时间
12.为文件头制定expires或cache-control
静态内容 never expire
动态内容 cache-control 有条件请求
13.Gzip压缩文件内容
Accept encoding
14.配置ETag
外部环境和服务环境内容是否匹配进行判断
15.尽早刷新输出缓冲
16.使用GET来完成AJAX请求
17.样式置于顶部
HTML渲染从上往下，给用户可视化反馈
18.避免使用css表达式
页面滚动、鼠标移动都会重新计算一次，使用一次性表达式
19.使用外部Javascript和CSS
内部每次请求会在请求中随HTML文档下载，外部在没有增加HTTP请求数的同时，减少HTML文档大小
20.削减Javascript和CSS
压缩合并 .min
21.用代替@import
@import导致css 串行加载
22.避免使用滤镜
滤镜对渲染性能要求更高
23.把脚本放在页面底部
24.剔除重复脚本
团队规模，脚本数量，md5版本号机制
25.减少DOM访问
缓存已访问元素
26.开发智能事件处理程序
使用代理，尽量用onready
27.减少cookie体积
用于鉴权和个性化身份多种用途，local storege
28.页面内容使用无cookie域名
29.优化图像
图像做成压缩，png格式图片，真彩设计通道优化
30.优化CSS Spirite
31.不要在HTML中缩放图像
32.favicon.ico要小且可缓存
33.保持单个内容小于25k
34.打包组件成复合文本
小结：
性能优化参考雅虎军规，从请求端、网络端、服务端三个维度进行优化，
请求端端优化 减少HTTP请求，剔除重复Javascript，压缩Javascript和Css，外部加载Javascript和Css，减少HTML文档大小，报文头设置cache-control Etags expire，减小cookies体积，使用localstore存储数据，加载内容使用模板和异步加载数据结合，渲染时做图片、组件懒加载，样式通过link ref设置预加载
网络优化 使用CDN 减少DNS查找次数，节省响应时间
服务端优化 静态资源存放到无cookie二级域名，配置Gzip 和Etags，对图片进行压缩优化处理，尽量保持单个文件小于25k
1.网页渲染流程
1-1 获取dom层
1-2 对每个节点图层计算样式
1-3 对每个节点生成图形和位置
1-4 Pain 绘制显示出来
1-5 绘制好的图交给GUP 进行旋转 缩放
1-6 将多个图层生成最终图像Composite Layers
2.Composite Layers 自占流程
3.Layout、Paint、Composite、Layers
4.独立成层 根元素position transform canvas video overflow
GPU参与 css3d video webgl transform will-change：transform
根元素、触发Gpu硬件加速 content变了导致盒模型撑开
批处理
渲染的主线程 重绘重排，提交非主线程光栅化，然后GPU是为了绘制，最终浏览器进程
css会堵塞dom渲染，不影响解析，css加载会影响后面执行
FP（文件加载 解析js 生成dom 生成cssdom）FCP TTI性能指标
评论区