详解关于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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 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
php中的MVC模式运用技巧
2007/05/03 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python 变量的创建过程详解
2019/09/02 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
设计总监岗位职责
2013/12/07 职场文书
运动会解说词100字
2014/01/31 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
法律系毕业生求职信
2014/05/28 职场文书
经济贸易系求职信
2014/08/04 职场文书
夫妻吵架保证书
2015/05/08 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
采购部年度工作总结
2015/08/13 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js
python标准库ElementTree处理xml
2022/05/20 Python