最近工做闲下来了,恰巧最近在研究前端性能优化相关的问题。读到不少书籍、以及之前公司分享的一些相关资料。这里将它们总结起来,以便你们学习。咱们的目标是:没有白屏,对!没有白屏。html
如下是在同一台机器,相同网络环境的一个测试:前端
你们都知道,浏览器产生白屏。是由于UI在渲染过程当中被阻塞了。那么问题来了,是什么阻塞了它呢?web
渲染过程浏览器
i.渲染是以流式进行的。不须要获得所有数据再渲染,如:HTML文件下载多少就渲染多少;缓存
ii.大多数HTML外部资源都不会阻塞UI线程,如:CSS、IMG、Flash等,没有load完毕的图片会留一个空位置在那里;性能优化
iii.大多数的HTML元素都是渲染出DOM便马上显示的;网络
iiii.HTML从上到下解析,该过程不可逆(参考 i)。但会出现reflow(重排) and repaint(重绘)。前端性能
咱们访问一个站点的时候浏览器会先检查自身缓存,在没有缓存的状况下,浏览器会这样去渲染咱们的页面,如下面的代码为例:性能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myTitle</title> </head> <body> <div id="myDiv"> <script> $.write('写点什么。'); </script> </div> </body> </html>
这个时候,浏览器会暂停渲染HTML,将script交给js引擎编译执行。js会建立textNode:学习
为了更直观的表现整个过程,我画了这么一张ppt,但愿能帮助您理解:
HTML解析是这样一个循环的过程, 那么留个问题给你们:若是JavaScript不阻塞UI线程会发生什么呢?你们能够用以下代码测试一下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myTitle</title> </head> <body> <div id="myDiv"> <script> window.setTimeout(function(){ $.write('写点什么。'); }, 0); </script> </div> </body> </html>
问题很严重有木有!!!!so....咱们的结论是:由于JavaScript有改变UI的能力,因此它必须UI渲染线程。
了解浏览器渲染页面的过程,对咱们作性能优化很是重要,固然,咱们要作好性能优化须要了解的远不止这些,在接下来的章节当中我会陆续更新更多关于web性能相关的文章,帮助你们了解它的工做模式。固然,本文描述还不够详尽,因此欢迎你们对本文内容勘误、补充。以避免误人子弟。同时,有任何不懂的,也欢迎您在评论中提出,我将尽力回复你们,与你们一块儿讨论、一块儿成长。
浏览器下载脚本过程
chromium 是这样解析的:
个别步骤解释:
MainResourceLoader::loadNow : 下载文件
PageGroupLoadDeferrer deferrer(m_page ,true) : 将脚本加入page流