详解关于html，css，js三者的加载顺序问题

来源：懂视网责编：小采时间：2020-11-27 21:58:58

详解关于html，css，js三者的加载顺序问题

详解关于html，css，js三者的加载顺序问题: <head lang=en> <meta charset=utf-8> <title></title> <link rel=stylesheet href=css/*.css rel=external nofollow > <script src=js/*.js></script> </head> DOM文档的加载顺序是由上而下的顺序加载； 1、DOM加载到

推荐度：

点击下载本文 文档为doc格式

导读详解关于html，css，js三者的加载顺序问题: <head lang=en> <meta charset=utf-8> <title></title> <link rel=stylesheet href=css/*.css rel=external nofollow > <script src=js/*.js></script> </head> DOM文档的加载顺序是由上而下的顺序加载； 1、DOM加载到

<head lang="en">
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="css/*.css" rel="external nofollow" >
 <script src="js/*.js></script>
</head>

DOM文档的加载顺序是由上而下的顺序加载；

1、DOM加载到link标签

css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；

2、DOM加载到script标签

由于js文件不会与DOM并行加载，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；

而这个特性也是为什么在js文件中开头需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是让DOM文档加载完成之后才执行js文件，这样才不会出现查找不到DOM节点等问题；

js阻塞其他资源的加载的原因是：浏览器为了防止js修改DOM树，需要重新构建DOM树的情况出现；

3、解决方法

前提，js是外部脚本；

在script标签中添加 defer=“ture”，则会让js与DOM并行加载，待页面加载完成后再执行js文件，这样则不存在阻塞；

在scirpt标签中添加 async=“ture”，这个属性告诉浏览器该js文件是异步加载执行的，也就是不依赖于其他js和css，也就是说无法保证js文件的加载顺序，但是同样有与DOM并行加载的效果；

同时使用defer和async属性时，defer属性会失效；

可以将scirpt标签放在body标签之后，这样就不会出现加载的冲突了。

以上所述是小编给大家介绍的关于html，css，js三者的加载顺序问题详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

详解关于html，css，js三者的加载顺序问题

推荐度：

点击下载本文 文档为doc格式

标签： js html css

热门焦点

详解关于html，css，js三者的加载顺序问题

详解关于html，css，js三者的加载顺序问题

详解关于html，css，js三者的加载顺序问题

最新推荐

猜你喜欢

热门推荐