页面加载的过程

浏览器加载和渲染html的顺序

1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。

3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。

4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

5. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

JS的加载

1. 不能并行下载和解析(阻塞下载)。

2. 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有

代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修

改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

如何加快HTML页面加载速度

1. 页面减肥:

a. 页面的肥瘦是影响加载速度最重要的因素。

b. 删除不必要的空格、注释。

c. 将inline的script和css移到外部文件。

d. 可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥。

2. 减少文件数量:

a. 减少页面上引用的文件数量可以减少HTTP连接数。

b. 许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了。

3. 减少域名查询:

a. DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好。

4. 缓存重用数据:

a. 对重复使用的数据进行缓存。

5. 优化页面元素加载顺序:

a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS,然后加载HTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。

6. 减少inline JavaScript的数量:

a. 浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大。

b. 不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容。

7. 使用现代CSS和合法的标签:

a. 使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片。

b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥。

8. Chunk your content:

a. 不要使用嵌套table,而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table,这样就不需要等到整个页面(或大table)内容全部加载完才显示。

9. 指定图像和table的大小:

a. 如果浏览器可以立即决定图像或table的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作。

b. 这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。

c. image使用height和width。

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文件,重新渲染页面

时间: 2024-10-14 19:07:56

页面加载的过程的相关文章

http --- 从输入URL到页面加载的过程发生了什么?

可以分为这几个大的过程: DNS解析 TCP连接 客户端发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 结束 其中(1)DNS解析可以理解为主寻找这个IP地址的过程,其中如果找到IP地址会进行本地缓存,以便下次继续使用 (2)HTTP协议是使用TCP作为其传输层协议的 (3)HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文. (4)HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文.  状态码是由3位数组成,第一个数字定义了响应的类别,且有五种

页面加载中的图片性能优化【转】

我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,“JS和CSS是页面上最重要的部分”. 几个月后,我意识到这是错误的.图片才是页面上最重要的部分. 我关注JS和CSS的重点也是如何能够更快地下载图片.图片是用户可以直观看到的.他们并不会关注JS和CSS.确实,JS和CSS会影响图片内容 的展示,尤其是会影响图片的展示方式(比如

提高页面加载速度的方法

提高页面加载速度的方法有如下几个方面:(一)减少HTTP强求(1)增加并行连接(2)合并资源文件:将多个小的css还有javascript文件进行合并成一个大文件,这样页面在加载页面的相关资源的时候,就会减少HTTP的请求,从而加快页面的加载速度(3)使用CSS sprite:将整个网站上所有共用的小图片都合成一张图片,然后使用background-position进行控制所需要的图片位置.原理是虽然每次只是使用了一张小图片,但是整个图片都已经被保存到了缓存中,这样每次使用就不需要再去请求图片

【转】 从输入 URL 到页面加载完成的过程中都发生了什么事情?

该问题总结 一. 往浏览器输入URL后给你一个页面,你天天在使用的东西,学过计算机网络的知道是怎么回事,就DNS解析然后页面的回馈,不过要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的博客: http://fex.baidu.com/blog/2014/05/what-happen/ 厉害的地方是将整个计算机体系和硬件都涉及进来,很广很深,太强大了. 然后找到一个StackOverFlow的答案: what happens when you type in a URL in br

从输入URL 到页面加载完成的过程

转载自:http://www.tuicool.com/articles/V7JN32Z 根据 URL 请求页面过程 说实话,这类文章网上一抓一大把,而我仍想写这篇博客,一方面是想再仔细缕一下这个过程,另一方面是希望用清晰的语言和结构来解释,也算是小小地挑战一下自己. 过程概述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理请求: 浏览器与服务器断开连接. 天啦撸,结束了?也太简单了吧...各位看官,不急,

从输入 URL 到页面加载完成的过程中都发生了什么(转)

从输入 URL 到页面加载完成的过程中都发生了什么 过程描述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理请求: 浏览器与服务器断开连接. 根据域名查找IP地址 概念解析 IP地址:IP协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址.IP地址如同门牌号码,通过 IP地址才能确定一台主机位置.服务器本质也是一台主机,想要访问某个服务器,必须先知道它的IP地址: 域名(HOST):IP 地址由四个

从输入 URL 到页面加载显示完成的过程

前言:"一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?" 这个问题我想大多数人都不会陌生,好像是前端面试题经常会出现的,在此我也好好梳理梳理了一番,总结成这篇文章,希望能对和我一样在前端道路上奋进的小白们有所帮助,一起学习,交流. 我把这个问题拆解成两个过程: 1. 用户输入 url ---> 客户端(浏览器)拿到服务端的数据 2. 浏览器拿到数据 ---> 呈现页面(也就是浏览器工作过程) 搞清楚这两个过程后,我们也算是完整的回答了前言部分所提的问题

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了: 1.浏览器补全URL地址 在输入完URL之后,浏览器会自动检查该地址是否完整,例如是否有添加https协议,若发现不完整,会自动补全. 2.向DNS查询IP地址 每个域名都对应一个或多个提供相同服务服务器的 IP 地址,只有知道服务器 IP 地址才能建立连接,所以需要通过 DNS 把域名解析成一个 IP 地址. 3.得到IP地址后,建立连接,进行三次握手 即每次建立连接前,客户端和服务端都要先进行三次对话才开始正式传输内容,三次对

从输入URL到页面加载发生了什么

从输入URL到页面加载发生了什么 转自: https://segmentfault.com/a/1190000006879700 作者写得很不错,作者忽略了的,我加了上去,完善了一些,如get与post的区别等 总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 1.DNS解析 DNS解析的过程就是寻找哪台机器上有你需要资源的过程.当你在浏览器中输入一个地址时,例如www.baidu.com,其实不是百度网站真正意