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


Posted in Javascript onApril 10, 2019
<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三者的加载顺序问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Angular简单验证功能示例
Dec 22 Javascript
react中使用swiper的具体方法
May 15 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 #Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 #Javascript
javascript判断一个变量是数组还是对象
Apr 10 #Javascript
Angular CLI 使用教程指南参考小结
Apr 10 #Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 #Javascript
element-ui多文件上传的实现示例
Apr 10 #Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 #Javascript
You might like
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP闭包实例解析
2014/09/08 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
超级强大的表单验证
2006/06/26 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
Linux机考试题
2015/10/16 面试题
施工安全责任书范本
2014/07/24 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
门球健将观后感
2015/06/16 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
退休欢送会致辞
2015/07/31 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis