详解关于html，css，js三者的加载顺序问题
</title&...</div>
<div class="content">
<div class="jb51code">
<pre class="brush: javascript;">
<head lang="en">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/*.css" rel="external nofollow" >
<script src="js/*.js></script>
</head></pre>
</div>
<p>dom文档的加载顺序是由上而下的顺序加载；</p>
<p><span style="color: #ff0000"><strong>1、dom加载到link标签</strong></span></p>
<p>css文件的加载是与dom的加载并行的，也就是说，css在加载时dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；</p>
<p><span style="color: #ff0000"><strong>2、dom加载到script标签</strong></span></p>
<p>由于js文件不会与dom并行加载，因此需要等待js整个文件加载完之后才能继续dom的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；</p>
<p>而这个特性也是为什么在js文件中开头需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是让dom文档加载完成之后才执行js文件，这样才不会出现查找不到dom节点等问题；</p>
<p>js阻塞其他资源的加载的原因是：浏览器为了防止js修改dom树，需要重新构建dom树的情况出现；</p>
<p><span style="color: #ff0000"><strong>3、解决方法</strong></span></p>
<p>前提，js是外部脚本；</p>
<p>在script标签中添加 defer=“ture”，则会让js与dom并行加载，待页面加载完成后再执行js文件，这样则不存在阻塞；</p>
<p>在scirpt标签中添加 async=“ture”，这个属性告诉浏览器该js文件是异步加载执行的，也就是不依赖于其他js和css，也就是说无法保证js文件的加载顺序，但是同样有与dom并行加载的效果；</p>
<p>同时使用defer和async属性时，defer属性会失效；</p>
<p>可以将scirpt标签放在body标签之后，这样就不会出现加载的冲突了。</p>
<p>以上所述是小编给大家介绍的关于html，css，js三者的加载顺序问题详解整合，希望对大家有所帮助
</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1632848.html">
好奔奔VR技术与教育结合——激发学习兴趣 </a>
</p>
<p>
下一篇： <a href="/article/1632850.html">
js form表单input框限制20个字符，10个汉字代码实例 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1632849.html" target="_blank" title="详解关于html，css，js三者的加载顺序问题">
<h2>
详解关于html，css，js三者的加载顺序问题 </h2>
</a>
</li>
<li>
<a href="/article/1276419.html" target="_blank" title="请问css和js加载的顺序？_html/css_WEB-ITnose">
<h2>
请问css和js加载的顺序？_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/1240023.html" target="_blank" title="关于js控制div中内容赋值进text中的问题，怎么字会往上对齐的？急~~~_html/css_WEB-ITnose">
<h2>
关于js控制div中内容赋值进text中的问题，怎么字会往上对齐的？急~~~_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/1223684.html" target="_blank" title="关于js控制div中内容赋值进text中的问题，怎么字会往上对齐的？急~~~_html/css_WEB-ITnose">
<h2>
关于js控制div中内容赋值进text中的问题，怎么字会往上对齐的？急~~~_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/1183007.html" target="_blank" title="关于frameset加载顺序的问题_html/css_WEB-ITnose">
<h2>
关于frameset加载顺序的问题_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/1169480.html" target="_blank" title="关于HTML中JS的调用问题_html/css_WEB-ITnose">
<h2>
关于HTML中JS的调用问题_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/1125862.html" target="_blank" title="jsp关于过滤器顺序的乱码问题_html/css_WEB-ITnose">
<h2>
jsp关于过滤器顺序的乱码问题_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/1100886.html" target="_blank" title="详解js在html中的加载执行顺序">
<h2>
详解js在html中的加载执行顺序 </h2>
</a>
</li>
<li>
<a href="/article/1086528.html" target="_blank" title="关于HTML中JS的调用问题_html/css_WEB-ITnose">
<h2>
关于HTML中JS的调用问题_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/1086207.html" target="_blank" title="关于frameset加载顺序的问题_html/css_WEB-ITnose">
<h2>
关于frameset加载顺序的问题_html/css_WEB-ITnose </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>