前端性能优化

性能优化 - 加载

• 理解加载瀑布图
  
• 基于HRA存储于重建性能信息
• 速度指标（speed Index 页面上的内容多久能让用户看到 )4s
• 重要测量指标
• TTFB（请求出去响应回来需要加载的时间）
• 页面加载时间（所有资源加载完需要多久）
• 首次渲染（从白屏到第一个出现内容的时间）

响应

• 交互动作的反馈时间
• 帧率FPS（越大越好）（60fps）
• 异步请求的完成时间（在1s之内完成，完成不了加loading动画）

RAIL

评估标准

• 响应：处理事件应在50ms以内完成
• 动画：每10ms产生一帧
• 空闲：尽可能组件空闲时间
• 加载：在5s内完成内容加载并可以交互

性能测量工具

• Chrome Devtools 开发调试、性能测评
• Lighthouse 网站整体质量评估
• WebPageTest多测试地点、全面性能报告

减少主线程工作量

• 避免长任务
• 避免超过1kb的行间脚本
• 使用rAF和rIC进行时间调度

V8优化机制

• 脚本流（脚本先下载再解析再执行，如果下载脚本超过30kb，可以先对起进行解析，单独开一个线程，等所有文件下载后再解析时效率大大提高，因为前面部分都解析了）
• 字节码缓存（源码翻译成字节码后，有些片段频繁使用，我们可以把对应字节码缓存起来）
• 懒解析（函数而已，虽然声明了函数，但我们不使用，浏览器会不先解析函数内部的逻辑，只有当真真在用时才解析）

函数的优化

函数的解析方式

• lazy parsing 懒解析 vs eager parsing饥饿解析
• 利用Optimize.js优化处次加载时间

对象优化可以做哪些

• 以相同顺序初始化对象成员，避免隐藏类的调整
• 实例化后避免添加新属性
• 尽量使用Array代替Array-like对象
• 避免读取超过数组的长度
• 避免元素类型的转换

html的优化

• 减小ifreams使用
• 压缩空白符
• 避免节点深层级嵌套
• 避免使用table布局
• 删除注释
• css&js尽量外链
• 删除元素默认属性

css优化

• 降低css对渲染的阻塞
• 利用GPU进行完成动画
• 使用contain属性

资源的压缩与合并

为什么要压缩与合并

• 减少http请求数量
• 减少请求资源的大小