2-2性能指标和优化目标，还能有什么。2.2.1理解加载瀑布图的排队：必须排队才能从浏览器发送。DNSLoopup：每个资源都有一个域名，最后要将域名翻译成IP，然后找到server，所以还有一个DNSlookup过程initialconnection：找到资源后，client需要与服务器建立连接，建立tcp协议连接SSL的过程：有的网站使用https，还有一个安全验证的过程，SSL协商TTFB：从发送请求到返回请求的时间（重要)（后台处理数据能力，后面返回网络状态）ContentDownload:最后就是下载资源。蓝色是DOM加载结束的时间，红色是页面所有资源加载成功的时间。不是白屏的时候SpeedIndex>4表示慢<4表示快2.2.4重要测量指标交互响应够快画面够流畅，画面帧数60每秒帧数。异步请求要足够快（1秒内尝试完成，加载动画无法完成）SpeedIndexTTFB页面加载时间第一次渲染2.2.5Others这个工具可以监控渲染帧数2-3RAIL测量模型[黄金指南】2.3.1什么是RAIL一流公司制定标准，由谷歌编写标准响应：响应是我们网站对用户的反馈，谷歌给出的响应是在50ms内完成的。动画：在10ms内生成一帧Idle动画，尽量增加idle时间，尽量让后端计算Load加载，5s内完成loading，交互花哨，很高级的样子。2.3.2性能测试工具：ChromeDevTools开发调试，性能评估Lighthouse网站整体质量评估WebPageTest多个测试位置，综合性能报告链接这里瀑布图请求瀑布图firstviewfirstvisitrepeatviewsecondvisit2.3.3本地安装WebPageTest先安装docker。同理，创建代理镜像3-1浏览器渲染原理及关键渲染路径3.1.1浏览器渲染原理javascript（引起视觉变化，js，css，动画）->style（重新计算视觉）->layout（布局）->paint（绘图）->Composite（合成，类似于ps）写的代码是文字，电脑是看不懂的。需要转换成计算机可以理解的数据结构。以html的dom结构为例，识别标记，转换成链式结构。构建DOM对象：HTML->DOM然后挂载CSS构建CSSOM对象：结合CSS-CSSOM生成RenderTree。3-2回流和重绘布局关心位置和大小什么是布局抖动？如何避免？为了避免回流读写分离，3-3使用了FastDom来防止布局抖动。链接在这里3-4Compositethreadandlayer【深度渲染管线的最后一站】复合线程（compositorthread）和层（layers）composite线程将页面拆分成层进行绘制和复合是做什么的，就像ps用DevTools理解网页的分层一样。哪些风格只影响复合？改变opcity录音风格。3-5避免重绘【必学，加快页面渲染】使用DevTools识别paint的瓶颈命令+P打开工具，勾选重绘Paint闪烁，使用will-change新建图层使用tansform，op减少repaint只影响构图而不触发布局和绘画。willChange不能过度。#3-6高频事件防抖【拯救页面卡住】scrolltouchpoinermove触发频率高于刷新频率浏览器在下一次重绘之前调用指定的回调函数来更新动画。该方法需要传入一个回调函数作为参数，回调函数会在浏览器下次重绘前执行上层函数去抖动，从而达到每帧只触发一次的目的。3-7React时间调度实现【中高级前端需要了解的React调度原理】4-1Javascript开销以及如何缩短解析时间在字体、html、图片等资源中，JavaScript开销最大。背后是解析和编译的过程。最后是执行。同样是170kb的文件，js文件解析大约需要2秒，jpg只需要解码，大约0.06秒，整个绘制过程0.028s。js处理时间大约需要三分之一。即使用户可以看到我们的页面，也没有办法进行交互。解决方案代码拆分代码检查和按需加载。加载当前访问路径需要的资源，不需要的我们会延迟，等访问到的时候再加载。达到减少js加载的目的Treeshaking代码减重比如我们在loadsh中只引用一个函数，然后我们就可以把这个函数打包到bundle文件中。减少主线程的工作量。避免长时间的任务。任务时间越长，阻塞时间越长。避免超过1kb的行间脚本。写行间脚本可能是为了加快首屏的渲染速度。其余的通过网络文件加载。浏览器无法针对内联脚本进行优化。使用rAF和rIC进行时间调度，详见上一章。4-2配合V8有效优化代码。v8编译原理。Node使用v8引擎来优化代码。如果它发现优化不起作用，它会反向优化，这会浪费很多时间。abstractsyntaxtreesourcecode="abstractsyntaxtree="bytecodeBytecode="机器码编译过程会进行优化，运行时可能会出现反优化，v8优化机制脚本流检查超过30kb的脚本，认为要价较大够了，会单独开一个线程进行分析，字节码缓存中经常用到的变量，主要针对函数进行缓存和惰性解析，先声明，不解析。4-3函数优化惰性解析的好处，如果解析是不需要，那么就不需要在“堆”中分配内存，也不需要为其创建语法树，可以提高我们加载js的整体效率。但是在现实中，有时候我们还是需要我们的functiontoexecuteimmediately.函数解析方式lazyparseingvseagerparsing如果我们先进行lazyparsing，然后发现需要立即执行，还需要eagerparsing，这样会性能减半。那么，我们如何告诉解析器我们需要急切解析呢？使用Optimize.js优化初始加载时链接上面加的括号在压缩的时候会去掉，但是Optimize会帮我们找回括号。但是现在webpack4可以自己实现这个功能了。（老师真的很喜欢说话时大口喘气）。4-4对象优化学习js对象就像练内功。学得好不好，要看对象学得好不好。这些写法的目的是优化你的代码以迎合V8引擎。以相同的顺序初始化对象成员，避免调整隐藏类，避免在实例化后添加新的属性，尽量使用Array而不是类数组对象（转换成本<）4-5html优化减少ifames的使用是等价的添加额外的文档。父文档等待它。压缩空白，避免嵌套太深嵌套越深，遍历越慢首屏优化删除注解语义标签，方便浏览器做一些优化一些标签比如把lijs放在最下面的ul里，不要挡住dom的加载。总结：HTML优化占的比重很小。为了达到极致的优化，可以注意以上几点，但是webpack集成了这样的功能。(html-minifile)4-6CSS对性能的影响解析css会从右往左读取，先找出所有a标签，再找出第二个条件进行过滤。减少css的阻塞，后面不用的加载。使用GPU完成动画就是使用合成层。使用包含属性。告诉浏览器我和外面无关，只改变我里面的元素，不需要回流和重新计算布局。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图片加载优化图片懒加载原生图片懒加载方案
