<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三者的加载顺序问题的更多相关文章

  1. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  2. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  3. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  4. JS 和 CSS 的位置对其他资源加载顺序的影响

    JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...

  5. js 外部文件加载处理

    概述 前端在日常工作中很大一部分时间是在思考页面的优化方案,让页面载入得更快.鉴于javascript是单线程的事件驱动语言,优化工作之一就是:控制图片.swf.iframe等大流量文件以及js和cs ...

  6. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  7. 网页加载速度优化2--先加载css，然后再加载js文件。

    网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...

  8. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  9. SpringMvc架构下css、js、jpg加载失败问题

    SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...

随机推荐

  1. 12. ZooKeeper配额和认证

    ZooKeeper具有与其数据模型相关的可配置配额(quota). 可以设置znode上的配额限制和存储的数据量.如果ZooKeeper命名空间中的一个子树超出与其关联的配额,ZooKeeper会在日 ...

  2. ChatterBot之linux下安装mongodb 02

    当前环境 :centos 6.9 mongodb版本 mongodb-linux-x86_64-3.4.4.tgz 使用链接工具:studio-3t-x64.msi.zip 首先我们先来安装mongo ...

  3. PHP通过ZABBIX API获取主机信息 VS 直接从数据库获取主机信息

    最近项目需要获取linux主机的一些信息,如CPU使用率,内存使用情况等.由于我们本身就装了zabbix系统,所以我只用知道如何获取信息即可,总结有两种方法可以获取. 一.通过ZABBIX API获取 ...

  4. codeforces 887A Div. 64 思维 模拟

    A. Div. 64 time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  5. 浏览器出现Cannot set property 'onclick' of null的问题

    Part1: 当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误, 是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到on ...

  6. Guice之IOC教程

    Guice 在上一篇博客中, 我们讲解了Spring中的IOC示例与实现, 本文着重介绍Guice注入以及与Spring中的差异. Guice是Google开发的, 一个轻量级的依赖注入框架, 跟Sp ...

  7. [Android App]IFCTT，即：If Copy Then That，是一个基于IFTTT的"This"实现

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/8075738.html IFCTT,即:If Copy Then ...

  8. android动画介绍之 自己定义Animation动画实现qq抖一抖效果

    昨天我们介绍了Animation的基本使用方法.小伙伴们了解的怎么样了?假设还没有了解过Animation的小伙伴能够看看这篇博客 android动画介绍--Animation 实现loading动画 ...

  9. Android应用开发allowBackup敏感信息泄露的一点反思

    1 背景 [工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 事实上这篇文章可能有些小题大作,但回过头想想还是非常有必要的,有点阴沟里翻船的感觉. ...

  10. Android酷炫有用的开源框架

    一.代码库 1.from  代码家 整理比較好的源代码连接 一.兼容类库 ActionBarSherlock : Action Bar是Android 3.0后才開始支持的,ActionBarSher ...