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 省份城市二级动态联动的例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Cannot connect to VM com.sun.jdi.connect.TransportTimeoutException
Cannot connect to VM com.sun.jdi.connect.TransportTimeoutException 描述 在用eclipse进行debug的时候弹出了上面的错误,在s ...
- js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
- 读《Wireshark网络分析就这么简单》读书笔记
晚上花了两个多小时看完这本书,记录下一些看书过程中的笔记. 一.问题:A和B 是否能正常通信? 两台服务器A和服务器B的网络配置 A ...
- [转]ASP.NET MVC中的两个Action之间值的传递--TempData
本文转自:ASP.NET MVC中的两个Action之间值的传递--TempData 一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在 ...
- sql 全局查询
select * from sysobjects o ,syscomments c where o.id=c.id and text like '%ST_Status%'
- 使用Git(msysgit)和TortoiseGit上传代码到GitHub
1.准备 下载Git for Windows (msysgit) 下载TortoiseGit 安装过程很简单,一直点击下一步到完成即可. 2.配置TortoiseGit 1.双击TortoiseGit ...
- js数组与字符串相互转换
一.数组转字符串(将数组元素用某个字符连接成字符串) var a, b;a = new Array(0,1,2,3,4);b = a.join("-"); 二.字符串转数组(将字符 ...
- node express formidable 文件上传后修改文件名
//我是用php的思想来学习nodejs var express = require('express'); var router = express.Router(); var fs = requi ...
- python的用户输入和while循环
1.函数input()工作原理 函数input()让程序暂停运行,等待用户输入一些文本.获取用户输入后,Python将其存储在一个变量中,以方便你使用. (1)获取数值可以用 int()函数 (2)求 ...