web前端性能优化

一、性能优化的指标和工具

性能优化-加载
Speed Index （4秒内）
TTFB（请求发出时间到响应的等待时间）
页面加载时间
首次渲染

性能优化-响应
交互动作的反馈时间
帧率FPS（60fps）
异步请求的完成时间(1s)

什么是RAIL
Response响应
Animation动画
Idle空闲
Load加载

RAIL评估标准
响应：处理事件应在50ms以内完成
动画：每10ms产生一帧(60fps/s)
空闲：尽可能增加空闲时间
加载：在5s内完成内容加载并可以交互

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

解读WebPageTest的报告
waterfall chart 请求瀑布图
first view 首次访问
repeat view 二次访问

WebPageTest
在线进行网站性能分析
如何本地部署WebPageTest工具

使用Lighthouse分析性能
安装：npm install -g lighthouse
测试：lighthouse 网站地址

Lighthouse的安装及使用
本地npm安装Lighthouse
Chrome DevTools中使用
通过chrome web store 安装插件

使用Chrome DevTools分析性能

使用Chrome DevTools进行性能测试
Audit(Lighthouse)
Throttling（节流）调整网络吞吐
Performance性能分析
Network网络加载分析

常用的性能测试APIs

Web标准APIs
关键时间节点（Navigation Timing,Resource Timing）
网络状态（Network APIs）
客户端服务端协商（HTTP Client Hints）&网页显示状态（UI APIs）

二、渲染优化

渲染流程
javascript-style-layout-paint-composite
通过javascript触发视觉变化，比如添加一个元素。然后通过浏览器对样式进行计算，计算css的哪些元素受到影响，应该绘制成什么样子。然后将元素根据计算后的样式绘制到页面上，布局是一个几何问题，因为要知道元素的大小和位置进行绘制。然后真正将这些元素画到页面上， 画颜色、文字、图片、阴影。最后是进行合成，因为为了提高效率，浏览器会将不同的东西画到不同的层，最后合成在一起。
影响回流的操作
添加/删除元素
操作styles
display:none
offsetLeft,scrollTop,clientWidth
移动元素位置
修改浏览器大小，字体大小

避免layout thrashing
避免回流
读写分离

布局抖动解决方案:
使用FastDom
批量读写
fastdom.measure
fastdom.mutate

使用FastDom批量对DOM的读写操作

什么是FastDom
如何使用FastDom的APIs

复合线程（compositor thread）与图层（layers）

复合线程做什么
1.将页面拆分图层进行绘制再进行复合
2.利用DevTools了解网页的图层拆分情况
3.哪些样式仅影响复合

触发复合不触发重绘
transform opacity

减少重绘（repaint）

减少重绘的方案
1.利用DevTools识别paint的瓶颈
2.利用will-change创建新的图层

高频 事件处理函数 防抖

React时间调度实现
基本原理
requestIdleCallback的问题
通过rAF模拟rIC

三、代码优化
1.javaScript 的开销和如何缩短解析时间
开销在哪里
加载、解析和编译、执行

解决方案
Code splitting 代码拆分，按需加载
Tree shaking 代码减重

减少主线程工作量
1.避免长任务
2.避免超过1kB的行间脚本
3.使用rAF和rIC进行时间调度

Progressive Bootstrapping（渐进式）
可见不可交互vs最小可交互资源集

V8编译原理
V8优化机制
1.脚本流
2.字节码缓存
3.懒解析

函数优化
函数的解析方式
1.Lazy parsing 懒解析 vs eager parsing 饥饿解析
2.利用Optimize.js 优化初次加载时间

对象优化
对象优化可以做哪些
1.以相同顺序初始化对象成员，避免隐藏类的调整
2.实例化后避免添加新属性
3.尽量使用Array代替array-like 对象
4.避免读取超过数组的长度
5.避免元素类型转换

html优化
Html优化也很重要
1.减小iframes使用
2.压缩空白符
3.避免节点深层级嵌套
4.避免table布局
5.删除注释
6.Css&javascript尽量外链
7.删除元素默认属性

借助工具
Html-minifier

css对性能的影响
样式计算开销
1.DevTools测量样式计算开销

css优化
1.降低css对渲染的阻塞
2.利用GPU进行完成动画
3.使用contain属性
4.使用font-display属性

四、资源优化

为什么要压缩&合并
1.减少HTTP请求数量
2.减少请求资源的大小

Html压缩
1.使用在线工具进行压缩
2.使用html-minifier等npm工具

Css压缩
1.使用在线工具进行压缩
2.使用clean-css等npm工具

Js压缩与混淆
1.使用在线工具进行压缩
2.使用webpack对js在构建时压缩

Css js文件合并
1.若干小文件
2.无冲突，服务相同的模块

图片优化-图片格式优化
图片优化的方案

图片格式比较
Jpeg/jpg
1.Jpeg/jpg 的优点
很高的压缩比 画质很好的保存
2.jpeg/jpg使用场景
轮播图、背景图
3.Jpeg/jpg 缺陷
不适合做logo

Png
1.png优点
透明背景图

2.png使用场景
小图标

3.png的缺陷
体积大

Webp
1.webp的优点
与png同样质量、压缩比例高
2.支持webp的浏览器

图片优化-图片加载优化
图片的懒加载
1.原生的图片懒加载方案
<img loading=”lazy”
2.第三方图片懒加载方案
Verlok/lazyload
Yall.js
Blazy

使用渐进式图片
渐进式图片优缺点
渐进式图片的解决方案
Progressive-image
imageMagick
Libjpeg
jpegtran
jpeg-recompress
Imagemin

使用响应式图片
1.srcset属性的使用
2.Sizes属性的使用
3.Picture的使用

字体优化
什么是FOIT和FOUT
1.字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁
2.Flash Of Invisible Text
3.Flash Of Unstyled Text

使用font-display
1.auto
2.block
3.swap
4.fallback
5.optional
使用AJAX+Base64
解决兼容性问题
缺点：缓存问题

五、构建优化

Tree-shaking
1.上下文未用到的代码
2.基于ES6 import export

js压缩
1.webpack 4后引入 uglifyjs-webpack-plugin
2.支持ES6替换terser-webpack-plugin
3.减小js文件体积

作用域提升
1.代码体积减小
2.提高执行效率
3.同样注意Babel的modules配置

Babel7优化配置
1.在需要的地方引入polyfill
2.辅助函数的按需引入
3.根据目标浏览器按需转换代码

Webpack的依赖优化
Noparse
1.提高构建速度
2.直接通知webpack忽略较大的库
3.被忽略的库不能有import,require,define的引入方式

Dllplugin
1.避免打包时对不变的库重复构建
2.提高构建速度

基于webpack的代码拆分（code splitting）
代码拆分做什么
1.把单个bundle文件拆分成若干小bundles/chunks
2.缩短首屏加载时间

Webpack代码拆分的方法
1.手工定义入口
2.SplitChunks提取公有代码，拆分业务代码与第三方库
3.动态加载

基于webpack的资源压缩（minification）
Minification
1.Terser压缩JS
2.Mini-css-extract-plugin 压缩css
3.htmlWebpackPlugin-minify 压缩Html

基于webpack的资源持久化缓存
持久化缓存方案
1.每个打包的资源文件有唯一的hash值
2.修改后只有受影响的文件hash变化
3.充分利用浏览器缓存

基于webpack的应用大小监测与分析
监测与分析
1.stats分析与可视化图
2.Webpack-bundle-analyzer进行体积分析
3.Speed-measure-webpack-plugin 速度分析

工具Webpack Chart
命令webpack --profile --json>stats.json

React 按需加载的实现方式
React按需加载
1.React router 基于webpack动态引入
2.使用Reloadable高级组件

六、传输加载优化

启用压缩Gzip

启用Keep Alive
1 .一个持久的TCP连接，节省了连接创建时间
3.Nginx默认开启Keep alive

Http资源缓存
Http缓存
1.提高重复访问时资源加载的速度
2.Cache-Control/Expires
3.Last-Modified+If-Modified-Since
4.Etag+If-None_match

Service workers作用
1.加速重复访问
2.离线支持

Service workers原理
Service workers 注意
1.延长了首屏时间，但页面总加载时间减少
2.兼容性
3.只能在localhost或https 下使用

Http/2的提升

Http/2优势
1.二进制传输
2.请求响应多路复用
3.Server push

搭建HTTP/2服务
1.https
2.适合较高的请求量

服务端渲染SSR

SSR的好处
1.加速首屏加载
2.更好的SEO

React SSR
1.基于Next.js实现SSR

是否使用SSR
1.架构-大型，动态页面，面向公众用户
2.搜索引擎排名很重要

七、前沿优化解决方案

拯救移动端图标-SVG

从png到IconFont
1.多个图标 一套字体，减少获取时的请求数量和体积
2.矢量图形，可伸缩
3.直接通过css修改样式（颜色，大小等）

Font awesome (svg)

从IconFont 到SVG
1.保存了图片能力，支持多色彩
2.独立的矢量图形
3.XML语法，搜索引擎SEO和无障碍读屏软件读取

使用Flexbox 优化布局

Flexbox的优势
1.更高性能的实现方案
2.容器有能力决定子元素的大小，顺序，对齐，间隔等
3.双向布局

Flexbox的使用
1.Flex container容器
2.Flex items元素

优化资源加载的顺序

资源优先级
1.浏览器默认安排资源加载优先级
2.使用preload，prefetch调整优先级

Preload和prefetch适用场景
1.Preload:提前加载较晚出现，但对当前页面非常重要的资源
2.Prefetch:提前加载后续路由需要的资源，优先级低

预渲染页面
React-snap

预渲染的作用
1.大型单页应用的性能瓶颈：JS下载+解析+执行
2.SSR的主要问题：牺牲TTFB来补救First Paint;实现复杂
3.Pre-rendering 打包时提前渲染页面，没有服务端参与

使用React-Snap
1.配置postbuild
2.使用ReactDom.hydrate()
3.内联样式，避免明显的FOUC（样式闪动）

Windowing（窗口化）提高列表性能
什么是windowing
windowing的作用
1.加载大列表、大表单的每一行严重影响性能
2.Lazy loading仍然会让DOM变得过大
3.Windowing 只渲染可见的行，渲染和滚动的性能都会提升

使用react-window
1.配置一个一维列表List
2.配置一个二维列表Grid
3.配置滚动到指定元素

使用骨架组件减少布局移动（Layout Shift）
Skeleton/Placeholder的作用
1.占位
2.提升用户感知性能

使用react-placeholder
1.预置的placeholders
2.自定义placeholder

八、性能优化问题

Web加载&渲染基本原理
问题
从输入url到页面加载显示完成都发生了什么？

首屏加载优化
1.什么是首屏加载？怎么进行优化？
分析
1.web增量加载的特点决定了首屏性能不会完美
2.过长的白屏影响用户体验和留存
3.首屏（above the fold）–初次印象

首屏–用户加载体验的3个关键时刻
1.测量指标–First Contentful Paint(FCP)
0-2s
2.测量指标–Largest Contentful Paint(LCP)
0-2.5s
3.测量指标–Time to Interactive(TTI)
0-3.8s

解答
1.资源体积太大？
资源压缩，传输压缩，代码拆分，Tree shaking,HTTP/2,缓存
2.首页内容太多？
路由/组件/内容 lazy-loading,预渲染/SSR,Inline CSS
3.加载顺序不合适？
Prefetch,preload

javaScript 内存管理
问题
1.js是怎样管理内存的？什么情况会造成内存泄露？
分析
内存泄露严重影响性能
高级语言!=不需要管理内存
变量创建时自动分配内存，不使用时“自动”释放内存–GC

解答
1.内存释放的主要的问题是如何确定不再需要使用的内存
2.所有的GC都是近似实现，只能通过判断变量是否还能再次访问到
3.局部变量，函数执行完，没有闭包引用，就会被标记回收
4.全局变量，直至浏览器卸载页面时释放
5.引用计数–无法解决循环引用的问题
6.标记清除

1.避免意外的全局变量产生
2.避免反复运行引发大量闭包
3.避免脱离的DOM元素

九、补充
css阻塞
Style标签中的样式：
1.由html解析器进行解析
2.不阻塞浏览器渲染（出现闪屏）
3.不阻塞Dom解析
Link引入的外部css样式
1.css解析器进行解析
2.阻塞浏览器渲染（避免出现闪屏问题）
3.阻塞后面的js执行
4.不阻塞Dom解析
优化
1.使用cdn节点进行外部资源加载
2.减少http请求
3.优化代码
Js阻塞
1.Js阻塞浏览器渲染
2.js阻塞dom解析
3.js阻塞其他js执行

备注：css的解析和js的执行是互斥的，css解析的时候js停止执行，js执行的时候css停止解析
无论css阻塞，还是js阻塞，都不会阻塞浏览器加载外部资源（图片、视频、样式、脚本等）

十、互联网外企offer

职业生涯规划
1.技术路线的生命力
2.工作与生活的平衡
3.更大的世界

面试准备
1.算法/coding、CS基础知识、系统设计、项目经验
2.英语
3.沟通与表达

题库
Leetcode.com