关于html，css，js三者的加载顺序问题
<head lang="en">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/*.css">
<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三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- JS 和 CSS 的位置对其他资源加载顺序的影响
JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...
- js 外部文件加载处理
概述 前端在日常工作中很大一部分时间是在思考页面的优化方案,让页面载入得更快.鉴于javascript是单线程的事件驱动语言,优化工作之一就是:控制图片.swf.iframe等大流量文件以及js和cs ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- 网页加载速度优化2--先加载css，然后再加载js文件。
网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- SpringMvc架构下css、js、jpg加载失败问题
SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...
随机推荐
- Less的模式匹配
Less的模式匹配 Less提供了一种机制,允许根据参数的值来改变 mixin的行为.比如,以下代码就可以让 .mixin 根据不同的 @switch 值而表现各异: .mixin (dark, @c ...
- c#统计代码行数
小编,已经快学了两年编程了.昨天突发奇想,想统计下这些年到底写过多少行代码,于是做了一个这个小程序来统计代码行数.老规矩,先上图. 比较惭愧,写了两年只有2万多行.那我们还是进入下一项吧. 界面搭建我 ...
- Docker 使用教程
概括 Docker与传统虚拟机的区别 与传统虚拟机的区别 Docker的安装 的安装 Docker daemon , client , containerd 镜像与容器操作 容器运 ...
- 实用的jQuery技巧
1.回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. // Back to top $('.top').click(functi ...
- 翻译连载 | 附录 C：函数式编程函数库－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- ViewPager使用记录3——循环展示
ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...
- 数据库介绍（MySQL安装 体系结构、基本管理）
第1章 数据库介绍及mysql安装 1.1 数据库简介 数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增.截取.更新.删除等操作. 所谓“数据库”系以一定方式 ...
- Usaco 2006Nov Round Numbers
题意:定义Round Number为二进制表示下0的个数大于等于1的个数的数.求[l,r]中有多少圆环数 我们把二进制位用一颗01二叉树表示,如下: 我们依据二进制位来遍历这颗线段树,如果当前高度对应 ...
- Struts2学习笔记整理(一)
最近在学习框架,很多人建议我直接学SSM,SSM看了一段时间后发现很多东西虽然可以用了,但是并不是很了解,所以我打算重新来过.从SSH开始学习,前面已经大致的学习了Hibernate,对于Hibern ...
- loadrunner 录制TCP协议脚本操作
测试TCP协议的项目,涉及到登陆.发送实时数据.指令.登出等,直接写报文工作量太大,所以需要录制报文. 操作方法如下: 1.启动服务端程序 2.使用winsocket协议 3.选择应用程序 4.录制选 ...