原链接：http://www.cnblogs.com/Walker-lyl/p/5262075.html

今天看书，看到html，css，js加载执行情况，发现自己并不是真正的了解，网上搜了半小时依然未弄明白，就在这时我找到了让我恍然大悟的一段话，如下：

HTML页面加载和解析流程 

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。 

2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件。 

3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。 

4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。 

5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。 

6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。 

7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它。 

8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<style>（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码。 

9. 终于等到了</html>的到来，浏览器泪流满面…… 

10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。 

11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

总结：1.总的来说就是按照html文档的顺序加载

　　　2.还有就是最好将无论内部或是外部JS文件放到所有html内容之后，这样会令用户感觉页面加载速度变快了，否则如果将所有外部文件（包括css和JS）引用都放到<head>中，意味着必须等到全部的JS代码都被下载解析和执行完毕后，才能开始呈现页面的内容（当浏览器遇到<body>）,这样会导致呈现页面时出现明显的延迟，二延迟期间的浏览器窗口将是一片空白。

【转】html、css、js文件加载顺序及执行情况的更多相关文章

  1. html、css、js文件加载顺序及执行情况

      HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  2. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  3. js文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...

  4. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  5. js页面加载完后执行（document.onreadystatechange 和 document.readyState）

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. js文件加载执行顺序

    转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/j ...

  7. web.xml文件加载顺序

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

  8. java web项目中classes文件夹下的class和WEB-INF/lib中jar里的class文件加载顺序

    如果是发布到weblogic的话,可以在WebContent\WEB-INF\weblogic.xml里面配置.参考配置如下:<?xml version="1.0" enco ...

  9. js文件加载太慢，JavaScript文件加载加速

    原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...

随机推荐

  1. 在Linux服务器上配置phpMyAdmin

    使用php和mysql开发网站的话,phpmyadmin是一个非常友好的mysql管理工具,并且免费开源,国内很多虚拟主机都自带这样的管理工具,配置很简单,接下来在linux服务器上配置phpmyad ...

  2. percona-toolkit 之 【pt-deadlock-logger】说明

    摘要: 死锁:是指两个或则多个事务在同一个资源上相互占用,并请求锁定对方占用的资源,而导致恶性循环的现象:当产生死锁的时候,MySQL会回滚一个小事务的SQL,确保另一个完成.上面是死锁的概念,而在M ...

  3. vs2010调试程序出现“Cannot find or open the PDB file”

    项目中源程序编写好以后, (一个简单的小程序) #include int main(void) { int age; int day; age = 24; printf("tom is %d ...

  4. codeforces 496B. Secret Combination 解题报告

    题目链接:http://codeforces.com/problemset/problem/496/B 题目意思:给出 n 位数你,有两种操作:1.将每一位数字加一(当某一位 > 9 时只保存个 ...

  5. HDU 5996 dingyeye loves stone ---BestCoder Round #90

    题目链接 设根节点的深度为0,将所有深度为奇数的节点的石子数目xor起来,则先手必胜当且仅当这个xor和不为0. 证明同阶梯博弈.对于偶深度的点上的石子,若对手移动它们,则可模仿操作:对于奇深度上的石 ...

  6. 运行Myeclipse发生这事这是怎么回事，大神们

  7. Target runtime Apache Tomcat v6.0 is not defined.错误解决方法

    一.背景 最近在使用本地的tomcat进行运行项目的时候,发现出现了如题所述的问题.不知道什么原因,经过努力解决了该问题. 二.解决步骤 右击项目---选择属性---选择targeted runtim ...

  8. NYOJ题目98成绩转换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsQAAAJhCAIAAADJ5jGJAAAgAElEQVR4nO3dq3LkSPg36O8mzH0hxn ...

  9. NYOJ题目97兄弟郊游问题

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr8AAAHxCAIAAADrwUM4AAAgAElEQVR4nO3dLXLjytfH8f8mzLOQYC

  10. Asp.Net - 7.AJAX

    AJAX简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新面的坏处:页面刷新打断用户操作.速度慢.增加服务器的流量压力.如 ...