前端性能优化小结

Dev Tools 的Audit 工具获得网站的多个指标的性能报告；Performance 工具测试网站的性能瓶颈；

JS 更偏向于解释型语言。V8 引擎下，又引入了 TurboFan 编译器，他会在特定的情况下进行优化，将代码编译成执行效率更高的 Machine Code。

在编译这一过程中，JS 代码首先会解析为**抽象语法树 AST(Abstract Syntax Tree)**（这一过程较慢，代码越多解析耗时越长），然后会通过解释器或者编译器转化为 Bytecode 或者 Machine Code。避免声明嵌套函数，因为这样会造成函数的重复解析

性能优化方面：

1. 图片优化：
   1. 减小图片大小：设计师 减少图片像素值；每个像素点能够显示的颜色
   2. 图片加载优化：css 代替纯色或渐变图；图片用 CDN 计算好屏幕尺寸加载对应尺寸图片；base64；雪碧图；合适的图片格式如优先 WebP，小图用 png，图标可用 svg，照片用 jpg
2. CDN：原理是尽可能的在各个地方分布机房缓存数据。将静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。 CDN 域名要与主站不同避免请求时带上主站的 Cookie
3. DNS 预解析：<link rel="dns-prefetch" href="//yuchengkai.cn">
4. 防抖：用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，通过setTimeout和clearTimeout
5. 节流：比如滚动加载更多的 API 请求场景下，通过setInterval内两次new Date()比差值设置隔一段时间发起一次请求
6. 预加载：指定页面加载后很快会被用到的资源。声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件<link rel="preload" href="http://example.com">常用于首屏优化
7. 预渲染：要确保某页面大概率会被用户在之后打开的前提下预先后天渲染<link rel="prerender" href="http://example.com">
8. 懒执行：将某些逻辑延迟到使用时再计算，懒执行需要唤醒，可以通过定时器或者事件的调用来唤醒。常用于首屏优化
9. 懒加载：将不关键的资源延后加载。比如图片，先设置图片标签的 src 属性为一张小尺寸占位图，将真实的图片资源放入一个自定义属性data-mySrc中，当img进入可视区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。同理视频等
10. html-css层面 要尽量避免重排reflow，减少重绘repaint,甚至可以使用css3的containe来强制控制

懒加载

一般我们都会让图片懒加载，让一个图片一开始在页面中的标签为
<img src="#" data-src="我是真正的src">
当我屏幕滚动到能显示这个 img 标签的位置时，我用 data-src 去替换 src 的内容，变为
<img src="我是真正的src" data-src="我是真正的src">
大家都知道如果直接改变 src 的话浏览器也会直接发出一个请求，在红宝书(JS 高程)里面的跨域部分还提了一下用 img 标签的 src 做跨域。这时候图片才会显示出来。
判断一个元素出现在屏幕中的，大家可以去看看这个函数getBoundingClientRect()
同时，要检测元素是否在浏览器内，肯定要在scroll事件上绑定检测函数，scroll函数和resize函数一样，滑动一下事件触发几十上百次。。。这种势必要用到节流throttle

防抖debounce 和 节流throttle

源码见这里

Reference

[35 条前端性能优化军规]https://learnku.com/docs/f2e-performance-rules/avoid-css-expressions/6377

onscroll 加载图片 & codepen