浏览器请求发往服务器以后,返回HTML页面,页面内容开始渲染,具体的执行顺序为:

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

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

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

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

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

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

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

8. 终于等到了</html>的到来,实数不容易呀。。。

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

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

总结:

1> 影响页面二次渲染的原因

  img:图片未加载完的时候,HTML会继续渲染,当图片加载完以后需要重新渲染图片的这部分内容。

  display:none:内置样式也会影响加载,原来已经加载完成的元素需要隐藏重新渲染其他的元素排版。

2> 页面文件引用顺序

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

  2.为了增加页面的额加载速度,应该把样式文件放在header中,把js文件放在所有的HTML内容之后加载,这样不至于在加载完多有的js文件之后再去加载html文件出现的浏览器的空白区。

html加载顺序以及影响页面二次渲染额的因素的更多相关文章

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

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

  2. 无阻塞加载js,防止因js加载不了影响页面显示

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...

  3. html页面元素加载顺序

    一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...

  4. web.xml加载顺序

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

  5. 【未整理】web.xml加载顺序.RP

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

  6. 服务器启动时Webapp的web.xml中配置的加载顺序

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

  7. 服务器启动时Webapp的web.xml中配置的加载顺序(转载)

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

  8. 从html页面加载顺序来更好的理解jquery初始化

    一,html页面加载顺序 1,用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2,浏览器开始载入html代码,发现<head>标签内 ...

  9. web页面的加载顺序

    1.页面顺序 一个典型的web页面由于三个部分组成:html.css和JS.执行的顺序是: 在构造完HTML的dom结构时.触发DOMContentLoaded事件. 整个执行过程安装html的顺序来 ...

随机推荐

  1. BNU29140——Taiko taiko——————【概率题、规律题】

    Taiko taiko Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class ...

  2. 如何设计一个“高大上”的 logo

    前不久,我们老大写的一篇博客< Coding,做一个有情怀的产品 >中有提到设计 Coding logo 的大致由来,今天我就设计 Coding 猴头的过程具体说说如何设计一个 logo. ...

  3. hdu 3255 体积并

    http://www.cnblogs.com/kane0526/archive/2013/03/07/2948446.html http://blog.csdn.net/acdreamers/arti ...

  4. [SQL SERVER系列]工作经常使用的SQL整理,实战篇(二)[原创]

    工作经常使用的SQL整理,实战篇,地址一览: 工作经常使用的SQL整理,实战篇(一) 工作经常使用的SQL整理,实战篇(二) 工作经常使用的SQL整理,实战篇(三) 接着上一篇“工作经常使用的SQL整 ...

  5. 一般处理程序、ASP.NET和MVC的区别

    这个问题说起来,我有点惭愧 想当初在大学里学的就是ASP.NET WebForms 在实习期间也是用的WebForms来开发网站,然后就觉得.NET开发网站就是用这个开发模式 现在想想都想笑...实在 ...

  6. SQL Server迭代求和

    drop table t_geovindu create table t_geovindu ( xid int IDENTITY (1, 1), price money, DebitCredit VA ...

  7. linux下的动态链接库管理

    LD_LIBRARY_PATH Linux环境变量名,该环境变量主要用于指定查找共享库(动态链接库)时除了默认路径之外的其他路径.(该路径在默认路径之前查找) 移植程序时的经常碰到需要使用一些特定的动 ...

  8. 两种计算Java对象大小的方法

    之前想研究一下unsafe类,碰巧在网上看到了这篇文章,觉得写得很好,就转载过来.原文出处是: http://blog.csdn.net/iter_zc/article/details/4182271 ...

  9. day3-基础 列表,元组,字典,模块

    1.列表 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 Country = ['China','England','America'] 通过下标访问列 ...

  10. May 09th 2017 Week 19th Tuesday

    Everything you see exists together in a delicate balance. 世上所有的生命都在微妙的平衡中生存. A delicate balance? Can ...