<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. AndroidStudio cannot resolve symbol 解决办法 清楚缓存

    <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=&qu ...

  2. python3.6+linux服务器+django1.11连接MYSQL数据库

    1.django创建一个项目,在项目的settings.py中配置Mysql DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysq ...

  3. 离开Visual Studio C#的编译(你不知道的C#)

    很多人一开始学习.net 第一天必定是安装Visual studio 或者很多关于C#学习的书上第一章节必定是告诉你要你下载一个vs 其实没有vs未必就不能开发了,只是可能说vs给我的开发带来了很多的 ...

  4. Spring之bean一基础

    在前面得博客依赖注入与控制反转中演示了应用spring实现ioc,在ApplicationContext.xml中有bean的配置,里面只是bean简单的应用.这篇主要是进一步学习使用bean. 一. ...

  5. github与git之间怎么建立连接

    git是一款强大的分布式版本控制系统,到底是什么意思呢?其实我也不知道,以后知道了再补上吧.下面咱们来讲一下github怎么与你电脑上的git建立起连接关系. 一.你要有一个github账号. 去百度 ...

  6. 第三方登录，一般都是遵循OAuth2.0协议。

    1. QQ登录OAuth2.0协议开发流程 1.1 开发流程 申请接入,获取appid和appkey; 开发应用,设置协作者账号,上线之前只有协作者才能进行第三方登录 放置QQ登录按钮(这个自己可以用 ...

  7. android应用集成facebook登录

      之前都是做国内的应用开发,没有用过国外的三方登录,比如谷歌登录.facebok登录,最近参与了一个海外的支付相关的项目,调研了一下谷歌登录和facebook登录,其实调研之后觉得也是很简单的,尤其 ...

  8. C# httpclient获取cookies实现模拟web登录

    目前在公司做一款平台化的产品,我主要负责PC端上的开发,在产品推荐过程中为了节省开发时间很多功能模块没来得及做原生,用CEF嵌入了很多带功能web页面,与客户端进行交互从而实现功能. 在二期开发中,产 ...

  9. 【NOI2010】海拔【平面图最小割】

    [问题描写叙述] YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见.能够将YT市看作 一个正方形,每个区域也可看作一个正方形.从而.YT城市中包含(n+1)×(n+ ...

  10. cocos2dx-3.0(14)------SpriteBatchNode与SpriteFrameCache加快渲染

    ----我的生活,我的点点滴滴! ! 大家都知道一个游戏里面会有大量的图片.每一个图片渲染是须要时间的,以下分析两个类来加快渲染速度.加快游戏执行速度 一.SpriteBatchNode 1.先说下渲 ...