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

 更新时间:2019-04-10 22:00:32   作者:佚名   我要评论(0)



<head lang="en">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/*.css" rel="external nofollow" >
<script src="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加载到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三者的加载顺序问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • php完全过滤HTML,JS,CSS等标签
  • XML、HTML、CSS与JS的区别整理
  • HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
  • 用html+css+js实现的一个简单的图片切换特效
  • JavaScript改变HTML元素的样式改变CSS及元素属性
  • js实现单一html页面两套css切换代码
  • js+html+css实现鼠标移动div实例
  • JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
  • php中去除所有js,html,css代码

相关文章

最新评论