html css javascript 加载的顺序

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

一、总体原则

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

二、加载顺序

　　如果结构是这样写的：

　　首先会加载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标签上面。所以上面图中的放置是不正确的。正确放法是：

　　2、放在body的最下面

　　

时间： 2024-11-07 22:13:48

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

Javascript加载执行顺序

本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如html编码格式,meta标签等.当浏览器加载html文件并解析到<head>时,页面也就是<body>并没有被解析,浏览器会等到<head>中的js执行完再加载页面. 比如直接在head的script标签里面写$('#AD').css("display",

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

注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中(w3schools等),只说css的顺序是"元素上的style" > "文件头上的st

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

概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write(). JavaScript 代码内嵌示例 <html> <head> <title>Source

加快JavaScript加载和执行效率

JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器

css文件加载：@import和link的区别

刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使用方法: <style type="text/css"> <!-- @import url("css/main.css"); @import url("css/base.css"); --> </style> li

js的并行加载与顺序执行

javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题. 当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知javaScript是否会修改页面内容.因此,这时浏览器会停止处理页面,先执行javaScript代码,然后再继续解析和渲染页面.同样的情况也发生在使用 src 属性加在javaScript的过程中(即外链 javaScript)

CSS 异步加载技术 不影响页面渲染

本文展示了一种技术,它能通过异步下载样式表,以阻止它们的下载阻塞页面的渲染,从而尽可能快的让访问者获取到信息内容. 警告! 我发这篇帖子全是好意,但是它并不负责让读它的人意识到下面将会遇到的问题. 社区很快地给了我许多的反馈 (有些反馈我很感激) ,而越来越明显的是这项技术并不如我所希望的那样稳定. 不像我那样的成功地对它进行了测试和利用,许多开发者在 IE 和 Firefox 中都遇到了问题( F F测试版中直接崩溃) 而其他人则报告在 Chrome 和 Safari 中是成功的.我现在的建议

struts2中配置文件加载的顺序是什么？

struts2的StrutsPrepareAndExecuteFilter拦截器中对Dispatcher进行了初始化 在Dispatcher类的init方法中定义了配置文件的加载顺序(下面是源码) public void init() { if (configurationManager == null) { configurationManager = createConfigurationManager(DefaultBeanSelectionProvider.DEFAULT_BEAN_NA

CSS 实现加载动画之五-光盘旋转

原文:CSS 实现加载动画之五-光盘旋转 今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键点在于如何将元素拼凑成风车形状.然后定义动画的关键帧为rotate 360度,应用于整个元素上,就可以使整个元素旋转起来.案例在请在chrome中查看. 1. 先看截图 2. 代码实现思路 2.1 首先还是定义四个元素,元素的中心为这四个元素组成的圆的圆心.