2-2性能指标和优化指标
快呗，还能有啥。
2.2.1了解加载瀑布图
- Queueing: 先要通过排队，能力从浏览器收回去。
- DNS Loopup: 每个资源有一个域名，域名最终要被翻译成IP，而后找到这个服务器，所以还有一个DNS查找的过程
- initial connection： 找到资源当前呢，客户端要和服务器建设连贯，tcp协定建设链接的过程
- SSL ：有些网站应用https，还有一个安全性验证的过程，SSL协商
- TTFB： 申请收回到申请回来的工夫（重要）（后盾的数据处理能力，其次是回来的网络情况）
- Content Download : 最初才是资源的下载
蓝色是dom加载完结的工夫，红色是页面上所有的资源加载胜利的工夫
2.2.2基于HAR存储于重建性能信息
保留加载实现的后果
2.2.3 速度指数
First Contentful Paint: 不是白屏的工夫
Speed Index >4就是慢 <4就是快
2.2.4 重要测量指标
交互响应足够快
画面足够晦涩,画面的帧数，1秒60帧
异步申请要足够的快（尽量在1秒内实现，实现不了加loading动画）
Speed IndexTTFB页面加载工夫首次渲染2.2.5 其余
这个工具能够监听渲染的帧数
2-3 RAIL 测量模型【黄金指南】
2.3.1 什么是RAIL
一流公司做规范，Google写的规范
Response ： 响应，是咱们的网站给用户的反馈，google给出的响应在50ms之内实现。
Animation：10ms 之内产生一帧动画
Idle 闲暇,尽可能的减少闲暇,尽量让后端去计算
Load 加载，在5s内实现加载并能够进行交互
花里胡哨，很高级的样子。
2.3.2 性能测试工具：
Chrome DevTools 开发调试、性能评测
Lighthouse 网站整体品质评估
WebPageTest 多测试地点、全面性能报告 链接在此
waterfall chart 申请瀑布图
first view 首次拜访
repeat view 二次拜访
2.3.3 本地装置WebPageTest
先装置docker。
同理，创立agent的镜像
3-1浏览器渲染原理和要害渲染门路
3.1.1浏览器的渲染原理
javascript（引起视觉的变动，js，css,动画）->style(从新对视觉进行计算)->layout（布局）->paint（绘制）->Composite（合成，相似ps）
写的代码是文本，计算机是不能了解的。须要转换成计算机可能了解的数据结构。
以html的dom构造为例，辨认标记，转换成链式构造。
构建DOM对象：HTML->DOM
而后挂载CSS
构建CSSOM对象：CSS-CSSOM
两者，联合，生成Render Tree。
3-2 回流与重绘
布局关怀地位和大小
什么是布局抖动？
如何防止？
防止回流
读写拆散，
3-3应用Fast Dom避免布局抖动的利器
链接在此
3-4 复合线程与图层[深刻渲染流水线的最初一站]
复合线程（compositor thread）与图层（layers）
复合线程做什么
- 将页面拆分图层进行绘制再进行复合，就像ps
- 利用DevTools理解网页的图层拆分状况
- 哪些款式仅影响复合？transform opcity
录制款式。
3-5 防止重绘 [必学，减速页面出现]
利用DevTools辨认paint的瓶颈
command + P关上工具，查看重绘
Paint flashing闪瞎狗眼
利用will-change创立新的图层
应用tansform,op缩小repaint
只影响复合而不去触发布局和绘制。
willChange 不可过多。
# 3-6 高频事件防抖[拯救页面卡顿]
滚动
touch
poinermove
触发的频率高于刷新的频率
window.requestAnimationFrame 官网链接在此
window.requestAnimationFrame() 通知浏览器——你心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
包上一层函数就能去抖动，达到一帧只触发一次的目标。
3-7 React工夫调度实现[中高级前端须要理解的React调度原理]
4-1 Javascript 开销和如何缩短解析工夫
在字体，html，图片这些资源当中，最为低廉的是JavaScript。它前面还有解析和编译的过程。最初才是执行.
同样170kb的文件,js的文件解析须要大概2秒，jpg只须要解码，大略0.06秒，绘制的总过程0.028s.
js解决的工夫大略须要占三分之一。就算用户可能看到咱们的页面，也没方法交互。
解决方案
Code splitting 代码查分，按需加载。
以后拜访门路须要哪些资源就加载哪些资源，不须要的咱们给它提早，拜访的时候再去加载。达到缩小加载js的目标
Tree shaking 代码减重
举例来说，咱们只是援用了loadsh外面的一个函数，就能够把这一个函数打包到bundle文件中。
缩小主线程的工作量
防止长工作
工作工夫越长，占据的阻塞越久
防止超过1kb的行间脚本
写行间脚本可能是为了放慢首屏的渲染。剩下的再通过web文件进行加载。
对于行间脚本，浏览器不能进行优化。
应用rAF和rIC进行工夫调度
具体看上一章。
4-2配合V8无效优化代码
v8编译原理
node用v8引擎
v8会对代码进行优化，发现优化的不行了呢，还会反向优化，就会节约很多工夫。
形象语法树
源码=》形象语法树=》字节码Bytecode=》机器码
编译过程会进行优化
运行时可能会产生反优化
v8优化机制
脚本流
查看超过30kb的脚本，就认为问价曾经足够大，会独自开一个线程进行解析。
字节码缓存
常常应用的变量进行缓存
懒解析
次要针对于函数，先申明然而不解析。
4-3 函数优化
懒解析的益处，如果不须要解析，那就不必在“堆”外面分配内存，不必为它创立一个语法树。能够进步咱们加载js的一个整体的效率。
然而事实中，咱们有时候还是须要咱们的函数立刻去执行的。
函数解析形式
lazy parseing 懒解析 vs eager parseing 饥饿解析
如果咱们先进行懒解析，而后发现须要立刻执行，还须要一个eager parseing,这样反而性能减半。
那么，咱们怎么通知解析器，咱们须要进行eager parseing？
利用Optimize.js优化首次加载工夫
链接在此
下面增加的括号会在压缩的时候被去掉，然而Optimize会帮咱们把括号找回来。
然而当初webpack4曾经本人可能实现这个性能。（老师讲话真是喜爱大喘气）。
4-4 对象优化
学习js对象，就像是练习内功。学习得好不好，就看你对对象学习的水平。
这些写法的目标就是为了投合V8引擎对你的代码进行优化。
以雷同程序初始化对象成员，防止暗藏类的调整
实例化后防止增加新属性
尽量应用Array代替array-like对象（转换的代价<）
4-5 html优化
缩小ifames 的应用
相当于多加了一个文档。父级文档要等它。
压缩空白符
防止深层次的嵌套
嵌套越深，遍历越慢
防止应用table布局
曾经out
css尽量外联
什么时候写在行间?
首屏优化
删除正文
语义化标签，不便浏览器做一些优化
有些标签能够不闭合
比方，ul外面的li
js放在上面，别阻塞dom加载
总结：html的优化占比拟少，为了把优化做到极致，能够关注下面几点，然而webpack集成了这样的性能。（html-minifile）
4-6 CSS对性能的影响
解析css，会自右向左去读，先找出所有的a标签，而后再找出第二个条件进行过滤。
升高css的阻塞，用不到的到前面再进行加载。
利用GPU进行实现动画，就是应用复合图层。
应用contain属性。
通知浏览器，我和里面的没关系，只对我外面的元素进行更改，不必进行回流，布局的从新计算。
font-display 属性
在页面上先展现文字，加重文字闪动的问题
5-1 资源的压缩与合并
目标
缩小http申请量
减小http申请资源的大小
怎么做？
html压缩。
（谷歌就没压缩，因为在别的方面做得更好）
css压缩
js压缩与混同，大部分时候都是应用webpack在构建时进行压缩。
css与js文件合并：
有的人认为合并比拟好，有的人认为拆分比拟好。在网络上加载比拟快。
总结就是同一模块的小文件，ok的，因为当初都是渐进式加载。单纯的为了优化，缩小http申请，会影响用户体验。
5-2 图片格式优化[多种图片格式-哪种最合适]
1、jpg 有损压缩 色调好
链接在此
工具：
imagemin 对jpg图片本人压缩
场景
应用场景，图片比拟大，还想要尽量保留画质。
缺点
当图片有比拟多的纹理和边缘，就不太适合，因为压缩比拟高，会有锯齿感。
2、PNG 通明背景
色调上并驾齐驱
工具
链接在此
场景
logo，纹理。
缺点
大
3、webP
谷歌新推出的图片格式
色调上与JPG并驾齐驱，然而压缩比更高。
反对webp的浏览器。
5-3 图片加载优化
图片的懒加载
原生的图片懒加载计划
<img loading="lazy" src="http://,,,,">第三方图片懒加载计划
链接在此（react-lazy-load-image-component）verlok/lazyload,yall.js,Blazy
应用渐进式图片
横扫描的形式
渐进式图片
长处
刚开始就能看到图片的全貌，用户体验更好
响应式图片
适配。
刚开始只会加载一张图片，srcset外面是不同尺寸的图片。会依据窗口的大小加载相应大小的图片。
5-4 字体优化
什么是FOIT ？什么是Fout？
字体下载未实现时，浏览器暗藏或主动降级，导致字体闪动。
Flash Of Invisible Text
Flash Of Unstyled Text
字体闪动不可避免。
font-display:auto|block|swap|fallback|optional// block// swap 替换的字体 不会白屏，然而不难看 // fallback 100ms 提前下载完，下载完之前不显示； 还没下载完，我就替换// optional 手机端优化，可能判断网速，不佳，默认字体，然而默认字体设置上，就不退了@font-face{ unicode-}