网站设计用什么软件,wordpress 七牛云优化,企业信息信用信息公示网官网,湖南建筑公司网站前言如图所示#xff0c;webkit内核浏览器的渲染过程(解析HTML#xff0c;构建DOM树#xff0c;解析CSS#xff0c;构建CSSOM树 #xff0c;构建render树#xff0c;布局layout#xff0c;绘制painting)#xff0c;这些过程理解起来可能有些抽象#xff0c;今天我们一…前言如图所示webkit内核浏览器的渲染过程(解析HTML构建DOM树解析CSS构建CSSOM树 构建render树布局layout绘制painting)这些过程理解起来可能有些抽象今天我们一起通过chrome开发者工具来直观的理解一下浏览器渲染页面的过程。页面渲染过程Performance工具我们将通过Performance工具来分析页面渲染过程首先按Command Option IMac或 Control Shift IWindowsLinux打开DevTools然后打开performance工具的界面。我们可以看到Performance 的默认引导页面第一句提示语所对应的操作是立即开始记录当前页面发生的所有事件点击停止按钮才会停止记录。第二句对应的操作则是重载页面并记录事件工具会自动在页面加载完毕处于可交互状态时停止记录。两者最终都会生成报告生成报告需要大量运算会花费一些时间)。我们以实际前端项目(vue项目)为例点刷新按钮重载页面并记录事件得到如下报告。网络请求这里提到网络请求是因为浏览器渲染页面离不开网络请求浏览器渲染进程开始接收HTML数据的标志其实是收到了浏览器的导航的确认信息浏览器的导航过程主要是在网络层涉及DNS解析浏览器强缓存/协商缓存TCP三次握手建立连接http请求响应TCP四次挥手断开连接等多个环节这里可以借助performance工具来理解浏览器渲染页面之前的网络请求部分上图中可看到Network模块中有不同的颜色请求它们分别代表的是蓝色-HTML、黄色-JS、绿色-图片的资源请求如果有CSS文件的请求的话它会被标识为紫色。另外一个细节点是图中每个资源请求的左上角都有一个小方块深蓝色的小方块代表较高优先级的请求浅蓝色则代表较低优先级很明显优先请求的资源(html、webpack打包的manifest、vendor、app主文件请求)都标识了深蓝色的小方块。我们再来看Event log中浏览器的活动请求html接收响应头浏览器接收到文档开始解析处理html响应数据已被接收网络请求完成另外图中可看到在浏览器发送请求之前还做了一系列的事情这是因为我们上面选择重载页面记录事件所以在send requerst请求Html之前会触发浏览器一系列默认事件行为webkitvisibilitychange,unloadEventStart,unloadEventEnd等。Parse HTML在浏览器渲染引擎内部有一个叫HTML 解析器HTMLParser的模块它负责将HTML字节流转换为DOM结构。HTML Standard规范定义了浏览器渲染HTML为DOM的方法。HTML解析器并不是等整个文档加载完成之后再解析的而是网络进程加载了多少数据HTML解析器就解析多少数据。浏览器收到响应之后我们来看下浏览器拿到的html文本!DOCTYPE html
htmlheadmeta charsetutf-8title/titlelink reldns-prefetch href//s1.zhuanstatic.com...meta namedescription content转转meta nameviewport contentwidthdevice-width,viewport-fitcover,initial-scale1,maximum-scale1,user-scalablenometa contenttelephoneno,emailno nameformat-detectionmeta nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentdefault
/headbodydiv idapp/divscript typetext/javascriptsrchttps://s1.zhuanstatic.com/u/bmmain/static/js/manifest.f741ad8a3e48f84ad413.js/scriptscript typetext/javascriptsrchttps://s1.zhuanstatic.com/u/bmmain/static/js/vendor.6858ed31f5c34c2f6f8e.js/scriptscript typetext/javascript srchttps://s1.zhuanstatic.com/u/bmmain/static/js/app.9ff176b78d7af021c2b0.js/script
/body/html再来观察Event Log中浏览器第一次解析HTML的活动解析html文本遇到body中的script标签发送了三个请求分别请求manifest.js,vendor.js,app.js文件JS的下载与执行上图显示解析HTML的过程中遇到 script 标签时渲染进程会停止解析HTML而去加载解析和执行js代码当脚本执行完成之后HTML解析器才会恢复解析过程而js外链资源的加载解析和执行通常又会很耗时这就是前端常提及到的js阻塞的原因。当然浏览器设置停止解析HTML的机制也是有原因的因为js可能会改变DOM的结构例如使用document.write等API。不过我们也有多种方式来告知浏览器应对如何应对某个资源例如在script 标签上添加了 async 或 defer 等属性浏览器会异步的加载和执行JS代码而不会阻塞渲染。加载次优先级的资源html页面中有CSSJS字体等额外的资源这些资源也需要从网络上或者浏览器缓存中获取。主进程可以在构建 DOM 的过程中会逐一请求它们为了加速浏览器的预加载扫描器会同时运行如果在 html 中存在 img link 等标签预加载扫描器会把这些请求传递给浏览器进程中的网络线程进行相关资源的下载。构建DOM树为什么浏览器要构建DOM树这是因为浏览器无法直接理解和使用HTML文本需要将HTML转换为浏览器能够理解的结构—DOM树。为了更加直观地理解DOM树我们可以打开Chrome的“开发者工具”选择“Console”标签来打开控制台然后在控制台里面输入“document”后回车就能看到一个完整的DOM树结构如下图所示DOM和HTML内容几乎是一样的但是和HTML不同的是DOM是保存在内存中树状结构可以通过JavaScript来查询或修改其内容。构建CSSOM为什么浏览器要构建CSSOM树原因和浏览器构建DOM树一样也是无法直接理解这些纯文本的CSS样式所以当渲染引擎接收到CSS文本时会执行一个转换操作将CSS文本转换为浏览器可以理解的结构——styleSheets。我们可以在Chrome控制台中查看其结构只需要在控制台中输入document.styleSheets然后就看到如下图所示的结构样式计算渲染进程主线程计算每一个元素节点的最终样式值即使没有任何CSS样式浏览器对每个元素也会有一个默认的样式。我们也可以通过Chrome查看浏览器计算后的样式生成布局树为了构建布局树Render tree浏览器大体上完成了下面这些工作遍历DOM树中的所有可见节点并把这些节点加到布局(Layout)中而不可见的节点会被布局树忽略掉如head标签下面的全部内容再比如body.p.span这个元素因为它的属性包含 dispaly:none所以这个元素也没有被包进布局树。回到Event Log继续观察分析如下图js引擎在彻底加载执行完毕vendor.jsmanifest.jsapp.js后渲染引擎回归开始第三次解析Html开始进行首次样式计算和布局并动态加载manifest映射中的app-async.js等(项目webpack打包split chunk优化后的产物)和首页correlate-Hplan.js资源等。绘制即使知道了不同元素的位置及样式信息浏览器还需要知道不同元素的绘制先后顺序才能正确绘制出整个页面。在绘制阶段主线程会遍历布局树创建待绘制列表。打开“开发者工具”的“Layers”标签选择“document”层来实际体验下绘制列表绘制过程可以将布局树中的元素分解为多个层。回到performance面板我们勾选上控制面板里的 Enable advanced paint instrumentation 记录渲染事件的细节选择Frames中的一块可在“Event log” 选项卡旁边的新“Layers”选项卡中显示有关页面分层的信息。将内容提升到GPU上的层而不是CPU上的主线程可以提高绘制和重新绘制性能。有一些特定的属性和元素可以实例化一个层包括video和canvas任何CSS属性为opacity、3D转换、will-change的元素还有一些其他元素。这些节点将与子节点一起绘制到它们自己的层上除非子节点由于上述一个或多个原因需要自己的层。层确实可以提高性能但是它以内存管理为代价因此不应作为web性能优化策略的一部分过度使用。继续来观察这个阶段的Event Log的活动刚刚分析到浏览器第三次解析html动态加载完webpack拆分的chunk和首页jsjs引擎执行完毕触发Event load事件紧接着触发了domInteractive事件也标识了html解析结束html解析器结束工作后触发docmument.readystatechange事件紧接着触发DomContentLoaded事件后更新布局树进行首次绘制。这里我们再来理解下这个DomContentLoaded事件与Load事件的区别HTML 页面的生命周期包含三个重要事件DOMContentLoaded —— 浏览器已完全加载 HTML并构建了 DOM 树但像 和样式表之类的外部资源可能尚未加载完成。load —— 浏览器不仅加载完成了 HTML还加载完成了所有外部资源图片样式等。beforeunload/unload —— 当用户正在离开页面时。我们来看Timings模块可以看到DCLFPFCPLLCP几个重要的与页面性能优化密切相关的事件缩写这里我们只理解下DCLDOMContentLoaded和L(load)load事件触发的时机明显晚于DOMContentLoaded合成与显示一旦层树被创建绘制列表被确定主线程会把这些信息通知给合成器线程合成器线程会栅格化每一层。有的层的可以达到整个页面的大小因此合成器线程将它们分成多个磁贴并将每个磁贴发送到栅格线程栅格线程会栅格化每一个磁贴并存储在 GPU 显存中。合成线程发送绘制图块命令DrawQuad给浏览器进程。浏览器进程根据DrawQuad消息生成页面并显示到显示器上。回到performance工具这里我们滑动缩小概览模块选中的区间定位到页面骨架屏与初次渲染出页面的中间在Event Log中只勾选Painting会自动筛选出区间范围内的绘制事件日志可以看到浏览器进行了多次绘制和合成图层的操作。待优化的性能问题额这部分本来没有在计划范围内 主要是两个问题被chrome⚠️了Long task多个主任务都花费了较长的时间被警告主要是打包后js的体积大造成的Layout Shift布局偏移过大导致用户体验差简单点理解就是你准备点一个链接或者按钮但就在你手指触摸到屏幕的前一秒链接移动了你点到了其他地方总结通过performance工具的Event Log模块分析了一下转转某实际vue项目 SPA单页应用页面在浏览器中的渲染过程过程中可能有理解不到位的地方欢迎多多指出呀。参考文献[1].https://blog.poetries.top/browser-working-principle/guide/part1/lesson05.html [2].https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference [3].https://developer.mozilla.org/zh-CN/docs/Web/Performance/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86 [4].https://developers.google.com/web/updates/2018/09/inside-browser-part3[5].https://zhuanlan.zhihu.com/p/41017888
