详解关于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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中获取对象信息的方法
2015/04/27 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
详解Python self 参数
2019/08/30 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python实现画图软件功能方法详解
2020/07/28 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
linux面试题参考答案(9)
2016/01/29 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
电台实习生求职信
2014/02/25 职场文书
高中军训感言600字
2014/03/11 职场文书
业务员的岗位职责
2014/03/15 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
学校节水倡议书
2015/04/29 职场文书
致运动员加油稿
2015/07/21 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android