编程 Javascript

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

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

- Author -

落落月

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

滚动图片效果 jquery实现回旋滚动效果

Jan 08 Javascript

原生JavaScript生成GUID的实现示例

Sep 05 Javascript

VS2008中使用JavaScript调用WebServices

Dec 18 Javascript

jQuery中nextAll()方法用法实例

Jan 07 Javascript

10条建议帮助你创建更好的jQuery插件

May 18 Javascript

详解JavaScript函数对象

Nov 15 Javascript

javascript中Date format(js日期格式化)方法小结

Dec 17 Javascript

jQuery中layer分页器的使用

Mar 13 Javascript

JS中的数组转变成JSON格式字符串的方法

May 09 Javascript

node app 打包工具pkg的具体使用

Jan 17 Javascript

jQuery实现的网站banner图片无缝轮播效果完整实例

Jan 28 jQuery

Javascript执行流程细节原理解析

May 14 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中实现Javascript的escape()函数代码

2010/08/08 PHP

百度站点地图(百度sitemap)生成方法分享

2014/01/09 PHP

php异常处理使用示例

2014/02/25 PHP

PHP批量去除BOM头代码分享

2015/06/26 PHP

Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法

2016/05/31 PHP

document.open() 与 document.write()的区别

2007/08/13 Javascript

jQuery)扩展jQuery系列之一模拟alert，confirm（一）

2010/12/04 Javascript

firefox下jquery iframe刷新页面提示会导致重复之前动作

2012/12/17 Javascript

iframe调用父页面函数示例详解

2014/07/17 Javascript

什么是 AngularJS？AngularJS简介

2014/12/06 Javascript

js+jquery实现图片裁剪功能

2015/01/02 Javascript

javacript使用break内层跳出外层循环分析

2015/01/12 Javascript

javascript+css3 实现动态按钮菜单特效

2016/02/06 Javascript

jquery基础知识第一讲之认识jquery

2016/03/17 Javascript

Easyui Treegrid改变默认图标的方法

2016/04/29 Javascript

jQuery防止重复绑定事件的解决方法

2016/05/14 Javascript

jQuery中DOM节点删除之empty与remove

2017/01/20 Javascript

详解使用nvm安装node.js

2017/07/18 Javascript

layui从数据库中获取复选框的值并默认选中方法

2018/08/15 Javascript

vue cli3.0 引入eslint 结合vscode使用

2019/05/27 Javascript

vue模块移动组件的实现示例

2020/05/20 Javascript

Selenium执行JavaScript脚本的方法示例

2020/12/31 Javascript

[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09

2020/12/12 DOTA

Python之eval()函数危险性浅析

2014/07/03 Python

Python导入模块时遇到的错误分析

2017/08/30 Python

Python Tkinter实现简易计算器功能

2018/01/30 Python

python中几种自动微分库解析

2019/08/29 Python

Python 创建TCP服务器的方法

2020/07/28 Python

爱尔兰电子产品购物网站：Komplett.ie

2018/04/04 全球购物

捷克厨房用品购物网站：Tescoma

2018/07/13 全球购物

英国最受欢迎的平价女士时装零售商：Roman Originals

2019/11/02 全球购物

澳大利亚最大的护发和护肤品购物网站：RY

2019/12/26 全球购物

银行授权委托书样本

2014/10/13 职场文书

工作计划范文之财务管理

2019/08/09 职场文书

厉害!这是Redis可视化工具最全的横向评测

2021/07/15 Redis

vue报错function () { [native code] }，无法出现我们想要的内容 Unknown custom element

2022/04/11 Vue.js