html加载顺序以及影响页面二次渲染额的因素
浏览器请求发往服务器以后，返回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加载顺序以及影响页面二次渲染额的因素的更多相关文章
- JS 和 CSS 的位置对其他资源加载顺序的影响
JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...
- 无阻塞加载js，防止因js加载不了影响页面显示
浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...
- html页面元素加载顺序
一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...
- web.xml加载顺序
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
- 【未整理】web.xml加载顺序.RP
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
- 服务器启动时Webapp的web.xml中配置的加载顺序
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
- 服务器启动时Webapp的web.xml中配置的加载顺序(转载）
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
- 从html页面加载顺序来更好的理解jquery初始化
一,html页面加载顺序 1,用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2,浏览器开始载入html代码,发现<head>标签内 ...
- web页面的加载顺序
1.页面顺序 一个典型的web页面由于三个部分组成:html.css和JS.执行的顺序是: 在构造完HTML的dom结构时.触发DOMContentLoaded事件. 整个执行过程安装html的顺序来 ...
随机推荐
- JS异步执行之setTimeout 0的妙用
最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的 ...
- 虚拟机中Linux设置当前ip
1.查看当前IP,查看网卡信息 ifconfig 2.设置临时IP ifconfig eth0 192.168.1.163 netmask 255.255.255.0 eth0表示第一块网卡 设置完之 ...
- [转]Razor里写函数
本文转自:http://blog.csdn.net/leftfist/article/details/43243177 asp.net mvc的视图里使用Razor来书写服务器代码,人尽皆知.可以常常 ...
- C#编程的几个概念
编译器(计算机) 开发人员 指令&对象 C# 有一批既定的指令, 关键字,方法.函数 变量.控件 通过指令去操作对象. 1. 熟记指令 2. 指令-对象的可操作关系 3. 合乎语法规范
- artDialog组件应用学习（二）
一.没有操作选项的对话框 预览: html前台引入代码:(之后各种效果对话框引入代码致,调用方法也一样,就不一一写入) <script type="text/javascript&qu ...
- div居中方法总结
在日常开发过程中,我们会经常使用到div居中来处理布局,今天我就把我在开发过程中,遇到的div居中处理方法总结一下,方便日后查看! 1. 水平居中:给div设置一个宽度,然后添加marg ...
- sql查询结果多对多转为一对多返回前端
企业表 ent_EnterpriseArchives 有id,企业名称 entName veh_Vehicle 车辆表,有所属企业id companyId,车辆id,车牌号licPlate 目的是 ...
- Maven学习篇一：依赖了解
1.依赖配置 <project> ... <dependencies> <dependency> <groupId>xx</groupId> ...
- Django组件——cookie与session
一.会话跟踪技术 1.什么是会话跟踪技术 可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应. 在JavaWeb中,客户向某一服务器发出第一个请求开始,会话就开始了,直 ...
- POJ1659 Frogs' Neighborhood(Havel–Hakimi定理)
题意 题目链接 \(T\)组数据,给出\(n\)个点的度数,问是否可以构造出一个简单图 Sol Havel–Hakimi定理: 给定一串有限多个非负整数组成的序列,是否存在一个简单图使得其度数列恰为这 ...