JS 在html中的位置


前言

当我了解完html在浏览器中的解析渲染流程后,反而又发现了新的困扰自己的问题。

Q:即然html要渲染需要渲染树,而渲染树又需要DOMTree和CSSRuleTree,DOMTree需要解析HTML,但是当解析到JS时需要js下载执行完才能继续执行解析。这样的话,那js放在哪里阻塞解析也只是早晚的问题。那放在前面后面都一样?!但是这又跟开发遇到的情况不一样。

猜想

前面的问题矛盾就在需要完成的DOM树,但是DOM树的构建又会被JS打断。所以我猜想:浏览器的渲染不需要完整的DOM树!
也就是说浏览器不需要等到HTML解析完就开始配合CSSRuleTree开始渲染了。这也就能合理的解析js要放在body的最底部。

试验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>welcome to Ahole's test Demo</div>
    <script src="http://www.ahole.cn/play-in-mobile/js/zepto.js"></script>
    <div>我是白老鼠!</div>
</body>
</html>

timeline过程写的很清楚

可以看出浏览器解析遇到js的时候就会停止,但是并不会傻傻等待js的执行,浏览器把构建一半的的DOMTree跟CSSRuleTree 生成渲染树,并渲染.


等下载执行完js再去解析html 再渲染.

结论

可以看出浏览器发生了两次渲染,而且这两次渲染中间是js的解析和执行。这说明在解析js之前,html就已经被渲染了。这也就证实了我的猜想。所以啊,为了优化首屏时间,最好还是把js放在body底部吧!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM