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 Index

TTFB

页面加载工夫

首次渲染

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-}