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

上海天天彩选四单双 www.9xvq4.cn         从我接触前端到现在,一直听到的一句话:操作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、本站内容中未声明为“原创”的内容可能源自其它网站,但并不代表本站支持其观点,对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益,请联系我方进行删除。

  • Premier de China ofrece rueda de prensa Spanish.xinhuanet.com 2018-12-11
  • 当你还在担心这些问题的时候,有个人的“自由发展”吗? 2018-12-11
  • 变相“现金贷”重出江湖 利率畸高个别超过1000% 2018-12-10
  • 十二生肖的起源与传说:你又知道多少? 2018-12-10
  • 加强党对反腐败工作的集中统一领导 2018-12-10
  • 回复@大雨582:所有的人都成标准件了? 2018-12-09
  • 2018中国双一流大学专业排行榜发布 清华大学位列第一 2018-12-09
  • 民生 —频道 春城壹网 七彩云南 一网天下 2018-12-08
  • 吐鲁番哈密瓜飘香疆外 2018-12-08
  • 华谊兄弟:《手机2》正常拍摄中 影片直指人心影片华谊兄弟-大陆 2018-12-08
  • 《这就是铁甲》迎来总决赛 郑爽放手一搏 2018-12-07
  • 高级需求不是物质需求,而是精神需求。你可能理解不了,为什么方志敏们面对高官,厚禄的诱惑而其志不改。 2018-12-07
  • 西媒曝“特金会”细节与即兴时刻:两人对视13秒 2018-12-07
  • 壮观!150余位画师共绘梵高《星月夜》 2018-12-06
  • 加大对遗产地生态保护修复力度 2018-12-06
  • 99| 518| 795| 300| 836| 784| 590| 909| 590| 446|