为什么你写的页面总是那么卡?—西安软件开发,西安软件公司,专业软件外包服务公司
首页>>技术前沿>>B/S,C/S软件系统开发
为什么你写的页面总是那么卡?
作者:西安软件开发公司 | 转载 来源:西安软件开发公司 | 时间:2018年6月29日| 点击:0次 | 【评论】

        从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM。尤其是React、vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少。刨根问底,这里说的成本,到底高在哪儿呢?

             

什么是DOM

         什么是DOM?可能很多人第一反应就是div、p、span等html标签(至少我是),但要知道,DOM是Model,是Object Model,对象模型,是为HTML(and XML)提供的API。HTML(Hyper Text Markup Language)是一种标记语言,HTML在DOM的模型标准中被视为对象,DOM只提供编程接口,却无法实际操作HTML里面的内容。但在浏览器端,前端们可以用脚本语言(JavaScript)通过DOM去操作HTML内容。

浏览器渲染过程

         这里暂只讨论浏览器拿到HTML之后开始解析、渲染。(怎么拿到HTML资源的可能后续另开篇总结吧,什么握握握手啊挥挥挥挥手啊,万恶的flag…)

          1.解析HTML,构建DOM树(这里遇到外链,此时会发起请求)
          2.解析CSS,生成CSS规则树
          3.合并DOM树和CSS规则,生成render树
          4.布局render树(Layout/reflow),负责各元素尺寸、位置的计算
          5.绘制render树(paint),绘制页面像素信息
          6.浏览器会将各层的信息发送给GPU,GPU将各层合成(composite),显示在屏幕上

         


为什么一再强调将css放在头部,将js文件放在尾部


1.DOMContentLoaded 和 load
          DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片…
          load 事件触发时,页面上所有的DOM,样式表,脚本,图片都已加载完成
2.CSS 资源阻塞渲染
          构建Render树需要DOM和CSSOM,所以HTML和CSS都会阻塞渲染。所以需要让CSS尽早加载(如:放在头部),以缩短首次渲染的时间。

JS 资源


         阻塞浏览器的解析,也就是说发现一个外链脚本时,需等待脚本下载完成并执行后才会继续解析HTML,这和之前文章提到的浏览器线程有关,浏览器中js引擎线程和渲染线程是互斥的,普通的脚本会阻塞浏览器解析,加上defer或async属性,脚本就变成异步,可等到解析完毕再执行async异步执行,异步下载完毕后就会执行,不确保执行顺序,一定在onload前,但不确定在DOMContentLoaded事件的前后defer延迟执行,相对于放在body最后(理论上在DOMContentLoaded事件前)。

其实写了这么多,感觉偏题了,大量的资料参考的是chrome开发者文档。感觉js脚本资源那块还是有点乱,包括和DOMContentLoaded的关系,希望大家能多多指点,多多批评,谢谢大佬们。

此内容DOC下载 此内容PDF下载

【全文完】
关键词标签: js 前端 
0 ([$-顶稿人数-$])
0 ([$-踩稿人数-$])

版权声明:

1、西安弈聪网站内容中凡注明“来源:XXX(非西安弈聪网站)”的作品,转载自其它媒体,转载目的在于传递更多信息,其中涉及的网站建设,广西快三网上平台,百度关键词优化,西安软件开发等技术细节并不代表本站赞同支持其观点,并不对其真实性负责。对于署名“西安弈聪”的作品系本站版权所有,任何人转载请署名来源,否则西安弈聪将追究其相关法律责任。

2、本站内容中未声明为“原创”的内容可能源自其它网站,但并不代表本站支持其观点,对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益,请联系我方进行删除。