性能优化--慕课网学习笔记(前5章)

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 图片格式优化[多种图片格式-哪一种最合适]

一、jpg 有损压缩 色彩好

连接在此

工具：

imagemin 对jpg图片本身压缩

场景

使用场景，图片比较大，还想要尽可能保存画质。

缺陷

当图片有比较多的纹理和边缘，就不太合适，由于压缩比较高，会有锯齿感。

二、PNG 透明背景

色彩上不相上下

工具

连接在此

场景

logo，纹理。

缺陷

大

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