`

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

 
阅读更多

前阵子,在组内给大家做了一次关于“浏览器加载和渲染javascript:;" onClick="javascript:tagshow(event, 'HTML');" target="_self">HTML的顺序”的分享(PS:这前面html几个字在51testing上可能展示有点问题),这里再总结一下吧。
1.浏览器加载和渲染html的顺序

1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)
3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。阻塞加载
5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数

2. JS的加载

2.1 不能并行下载和解析(阻塞下载)
2.2 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

3.如何加快HTML页面加载速度

1,页面减肥
页面的肥瘦是影响加载速度最重要的因素
删除不必要的空格、注释
将inline的script和css移到外部文件
可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥
2,减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数
许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了
3,减少域名查询
DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好
4,缓存重用数据
使用缓存吧
5,优化页面元素加载顺序
首先加载页面最初显示的内容和与之相关的JavaScript和CSS
然后加载DHTML相关的东西
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
6,减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大
不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容
7,使用现代CSS和合法的标签
使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片
使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥
8,Chunk your content
不要使用嵌套tables
<table>
  <table>
    <table>
      ..
    <table>
  <table>
<table>
<table>
  <table>
    <table>
      ..
    <table>
  <table>
<table>
而使用非嵌套tables或者divs
<table>...</table>
<table>...</table>
<table>...</table>
<table>...</table>
<table>...</table>
<table>...</table>
将基于大块嵌套的tables的layout分解成小tables,这样显示时不用加载整个页面(或大table)的内容
9,指定图像和tables的大小
如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作
这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变
image使用height和width
table使用table-layout: fixed并使用col和colgroup标签指定columns的width
10,根据用户浏览器明智的选择策略
IE、Firefox、Safari等等等等
11,页面结构的例子
· HTML

    · HEAD

        · LINK ...
        CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.

        · SCRIPT. ...
        JavaScript. files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
        Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.

    · BODY
    · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.

        · SCRIPT. ...
        Any scripts which will be used to perform. DHTML. DHTML script. typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.
        Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.
        If any images are used for rollover effects, you should preload them here after the page content has downloaded.



4.HTML页面加载和解析流程

1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件; 
2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件; 
3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件; 
4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了; 
5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码; 
6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码; 
7.浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它; 
8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码; 
9.终于等到了</html>的到来,浏览器泪流满面…… 
10.等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径; 
11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。


5.Yahoo对网页设计性能的建议,个人感觉是说得非常好的。
  英文版:http://developer.yahoo.com/performance/rules.html
  中文翻译:http://www.cnblogs.com/smjack/archive/2009/02/24/1396895.html

参考资料:
http://hideto.javaeye.com/blog/133384
http://blog.chinaacc.com/liuzhantao/blog/20100430-3015241029081.html

分享到:
评论

相关推荐

    浏览器加载、渲染和解析过程黑箱简析

    在理解浏览器加载、渲染和解析过程时,首先我们要知道这是一个复杂且高度优化的过程,涉及到了多个步骤和机制。浏览器的主要任务是将HTML、CSS和JavaScript等资源转化为用户可见的网页。下面我们将详细探讨这些过程...

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    浏览器执行JavaScript脚本加载与代码执行顺序是网页开发中至关重要的一环,因为它直接影响到网页的渲染和用户体验。本文主要探讨了两种关键的概念:JavaScript脚本的阻塞性和执行顺序。 1. JavaScript脚本的阻塞性...

    详解关于html,css,js三者的加载顺序问题

    它们的加载顺序直接影响了网页的渲染速度和用户体验。本文将详细探讨这三种资源的加载顺序,以及如何处理它们之间的相互依赖和潜在冲突。 首先,我们要明确一点,浏览器在渲染网页时是按照DOM(文档对象模型)的...

    html加载顺序.zip

    本文将深入探讨HTML的加载流程,包括解析、渲染和执行的各个阶段。 一、HTML文档解析 1. **请求发送**:当浏览器接收到URL,它会向服务器发送HTTP请求,请求HTML文档。 2. **响应接收**:服务器返回HTML文件,...

    静态HTML页面加载和解析

    今天给大家分享一篇文章,关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。

    网页按顺序加载 最后加载js广告

    在这个过程中,浏览器会按照HTML、CSS、JavaScript的顺序逐行解析资源,最后加载JS广告。这样的加载策略有助于优化用户体验,因为主要内容可以更快地呈现给用户,而广告通常被视为非关键元素。 首先,我们来看网页...

    html中js代码的加载顺序

    了解JavaScript加载顺序对于优化页面性能和解决脚本依赖关系至关重要。正确地管理脚本加载可以帮助减少页面加载时间,提供更好的用户体验。通过使用异步、延迟加载和模块化等技术,开发者可以更加灵活地控制脚本的...

    浏览器的加载与页面性能优化

    JavaScript和CSS的加载顺序直接影响页面的渲染流程。通常,JS文件应放置在页面底部,以避免阻塞页面的其他元素加载;而CSS则应优先加载,确保页面的基本布局和样式能够快速呈现。同时,使用`defer`和`async`属性可以...

    页面加载顺序,loading巧妙解决

    页面加载顺序对于用户体验至关重要,因为它直接影响到用户首次看到网页内容的速度和形式。在网页开发中,浏览器遵循一定的规则来解析HTML、CSS和JavaScript文件,从而构建出完整的页面。本篇文章将详细探讨页面加载...

    测试浏览器运行速度

    当遇到"ASP.NET开发的网页在浏览器中运行速度特别慢"的问题时,这可能是由多种因素引起的,包括但不限于网络延迟、服务器响应时间、JavaScript执行效率、CSS和HTML的加载顺序等。为了找出问题的症结所在,我们可以...

    王志刚:浏览器的多进程架构与渲染优化

    同时,该架构还涉及如何对浏览器的渲染引擎进行优化,以加快网页加载和渲染速度,减少内存消耗,提升用户交互体验。 在浏览器多进程架构中,通常至少包括以下几个进程:UI进程(UIProcess)、网络进程(WebProcess...

    HTML页面加载和解析流程详细介绍

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载...

    html中嵌入js执行顺序_html中嵌入js执行顺序_

    1. **同步与异步加载**:默认情况下,`&lt;script&gt;`标签内的脚本和通过`src`引入的脚本都是同步加载的,这意味着浏览器会阻塞页面渲染直至脚本执行完毕。然而,为了提高页面加载速度,可以使用`async`或`defer`属性。 ...

    html延迟加载JS和CSS

    这种技术允许网页在不阻塞页面渲染的情况下,延迟加载非关键性的脚本和样式表,从而提高页面的初始加载速度,提升用户体验。尤其在支持像IE6这样的较旧浏览器时,这种策略显得尤为重要,因为这些浏览器可能对大量...

    浏览器的工作原理

    在众多浏览器中,**WebKit**和**Gecko**是最为知名的两种渲染引擎。WebKit主要用于Safari和Chrome浏览器,而Gecko则是Firefox的核心组件。这篇文章将详细介绍这两种渲染引擎的内部运作机制。 #### 2. 浏览器的主要...

    浏览器的工作原理-现代网络浏览器幕后揭秘

    浏览器会进行全局绘制和增量绘制,按绘制顺序对元素进行绘制,并优化绘制过程。绘制完成后,浏览器还可能进行动态变化的处理和呈现引擎的线程操作。 7. CSS2可视化模型 CSS2可视化模型定义了如何在页面上绘制元素,...

    Chrome浏览器调试教程

    W3C(万维网联盟)制定了HTML和CSS的标准规范,虽然过去各浏览器在遵循标准方面表现不一致,但现在大部分浏览器都能较好地遵循这些规范。 - **用户界面元素**: - 地址栏:输入统一资源标识符(URI)。 - 前进和...

    Vue组件用于Vue组件的延迟渲染

    尽管它们不延迟客户端的组件渲染,但在服务器端预先生成静态HTML,减少了首次加载时的 JavaScript 执行,从而提高了用户体验。 为了实现高效的延迟渲染,开发者需要注意以下几点: - **合理划分组件**:确保每个...

Global site tag (gtag.js) - Google Analytics