html css javascript 加载的顺序

时间:2022-09-02 08:01:03

html /css /javascript 这三者的加载顺序影响整个页面的加载速度。而加载速度的快慢直接影响pv(访问量),而且会影响经济收入。在大网站中,可能打开速度快一秒,一年能多带来上亿的收入。所以我们一定要重视。

一、总体原则

  加载的总体原则是顺序加载,即从页面的head到body结束顺序加载。浏览器发送请求,服务器返回了这整个页面的代码。所以,下一步是对这个页面代码进行渲染。

二、加载顺序

  如果结构是这样写的:

html css javascript 加载的顺序

  首先会加载link里面的css文件。但是在这里要记住,css文件和image文件跟html代码是并行下载的。

    也就是说,加载css文件的同时,html的DOM结构还在继续加载构建。在加载的过程中如果发现某个css或者img时,会发送一个请求,然后html继续构建,当服务器发送回数据来以后,添加到相应的dom树位置就好了。

  但是走到script ,加载js的时候就不同了。需要加载完整个js文件后,才会往下走代码。不会并行下载。所以,按上面图上的写法,加载link的时候也会在加载js。只有当js加载完后,才会构建body里的DOM树。这时注意的问题是,js代码运行时,

  DOM并没有加载在页面中,所以在js文件里要加入jQuery的$(document).ready(function(){}) 或window.onload 或者js文件里只有函数,否则会报错。

三、js文件的放置位置。

  1、放在head 中,在link标签上面。所以上面图中的放置是不正确的。正确放法是:

html css javascript 加载的顺序

  2、放在body的最下面

  

html css javascript 加载的顺序的更多相关文章

  1. Javascript加载执行顺序

    本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如ht ...

  2. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  3. javascript加载顺序

    javascript加载顺序 <script type="text/javascript" src="jquery.js"></script& ...

  4. css样式加载顺序

    css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...

  5. js的并行加载与顺序执行

    javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问 ...

  6. css文件加载:&commat;import和link的区别

    刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...

  7. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  8. 关于css样式加载的问题

    今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑. 我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果.(主要训练jQuer ...

  9. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

随机推荐

  1. MySQL使用说明

    一.概述 什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 什么是 MySQL.Oracle.SQLite.Access.MS SQL Server等 ? ...

  2. BIOS设置之UEFI&sol;Legacy BIOS切换图文详解

    近几年出现的电脑其中相当一部分都配置了UEFI BIOS,不过大多都默认以Legacy BIOS方式启动.而Win8正式上市后, 所有预装Win8(或Win8.1)的电脑都配置了UEFI BIOS并且 ...

  3. cmake 编译 c&plus;&plus; dll 的一个例子&lpar;更新2:增加 python 调用方法&rpar;

    CMakeLists.txt project(xxx) add_library(xxx SHARED xxx.cpp) add_executable(yyy yyy.cpp) target_link_ ...

  4. 【转】 STL中的set容器的一点总结

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  5. C&plus;&plus; 类中指向函数的指针 以及 类模板

    C++类中总是出现诸如下面的情况 这是一篇深入浅出讲解函数指针的文章,值得参考! http://blog.csdn.net/lishuhuakai/article/details/18276477 关 ...

  6. iOS 史上最全的图片压缩方法集合

    做上传图片功能,特别是类似于微信,QQ里面,公布9张图片, 少不了碰到一个问题,就是图片压缩问题,当然我也遇到了. 我研究了这个问题,发现网上普遍的方法是例如以下 //压缩图片质量 +(UIImage ...

  7. 关于蓝桥杯嵌入式STM32的一点收获

    各社团成员培训时自己总结的一点材料,直接粘过来的,可能有些朋友看不明白,总之这个比赛吧:有很多技巧,掌握到技巧能省我们半个月时间,我说的是针对这个比赛,对于STM32还是要多多练习,总之STM32还是 ...

  8. JAVAEE企业级应用开发浅谈第二辑:MVC和三层架构

    上海尚学堂警句:一份信心,一份努力,一份成功:十分信心,十分努力,十分成功. Step1.情景概要 Hello,小伙伴们,昨天跟大家分享了JAVA EE 企业级应用开发中大家耳熟能详的概念-三层架构, ...

  9. Python&lowbar;PyMySQL数据库操作

    连接数据库: conn=pymysql.connect(host=,user=',charset='utf8') 建立游标: cur = conn.cursor() 创建一个名字叫 lj 的数据库: ...

  10. docker 系列 - 基础镜像环境和Docker常用命令整理

    =======================docker 基础镜像环境 alpine=======================可以使用 docker search 命令搜索指定的 image, ...