`
hyl198611
  • 浏览: 228218 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html页面-浏览器加载顺序

    博客分类:
  • html
阅读更多

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>
而使用非嵌套tables或者divs
<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
转自:http://blog.sina.com.cn/s/blog_648738620100yumh.html
分享到:
评论

相关推荐

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

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

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

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

    html加载顺序.zip

    HTML加载顺序是Web前端开发中的一个关键概念,它关乎到网页元素何时呈现、何时执行以及如何交互。了解这个过程对于优化网页性能、提高用户体验至关重要。本文将深入探讨HTML的加载流程,包括解析、渲染和执行的各个...

    html中js代码的加载顺序

    在HTML文档中,JavaScript代码的加载顺序是网页解析过程中至关重要的一部分。这关乎到脚本何时执行、页面元素的渲染以及整个用户体验。理解这一过程对于优化网页性能和编写高效的JavaScript至关重要。 首先,我们要...

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

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

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

    通过优化网页的加载顺序,特别是将非关键的JavaScript广告放在最后加载,我们可以显著提高网页的首屏加载速度,从而提升用户体验。同时,对于网页性能的优化,还可以考虑使用CDN加速资源获取,压缩代码减少传输量,...

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

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

    测试浏览器运行速度

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

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

    浏览器是现代互联网中不可或缺的应用程序,它的工作原理涉及多个层面,从处理用户输入到渲染网页。浏览器的主要功能包括接收用户的网络请求、向服务器获取网络资源、解释并渲染这些资源以供用户查看。本文将深入探讨...

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

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

    LABjs-master--js有序加载.rar

    它旨在解决在网页开发中遇到的一个常见问题:JavaScript文件的异步加载顺序无法自定义,这可能导致依赖关系混乱,影响页面的正常运行。LAB.js通过智能管理和控制脚本加载顺序,确保了即便在异步加载的情况下,也能...

    Chrome浏览器调试教程

    通过本文的学习,我们不仅了解了Chrome浏览器的基础知识及其下载安装流程,还深入探讨了浏览器加载HTML页面的过程以及如何利用Chrome开发者工具进行高效调试。掌握这些技能对于前端开发人员来说至关重要,能够显著...

    JS深度揭秘第七章-浏览器渲染原理及数据交互

    理解浏览器的渲染机制有助于优化页面性能,掌握同源策略及其解决方案可以保证Web应用的安全性和兼容性,熟练运用JavaScript的异步加载特性能提升用户体验,而WebSocket和postMessage则为实时交互提供了可能。...

    讨论html与javascript在浏览器中的加载顺序问题

    一、html页面的详细加载过程是什么呢?页面元素在加载时的优先级是什么? 二、javascript的作用域、变量的作用域、不同脚本段之间的关系? 三、html页面的生命周期? 这些问题真的打中了我的死穴。不了解这些,我就...

    jsp页面中的代码执行加载顺序介绍

    JSP(JavaServer Pages)是一种动态网页技术,允许开发者将Java代码嵌入到HTML页面中。JSP页面被编译成Servlet,然后在服务器上执行。了解JSP页面中的代码执行加载顺序对于Web开发人员来说至关重要,因为它影响页面...

    静态HTML页面加载和解析

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

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

    3. **脚本和样式表的处理**:浏览器按顺序执行JavaScript脚本,预解析CSS以加快页面加载速度。同时,样式表被用来构建呈现树,这是一个包含所有可视元素及其样式的树状结构。 4. **呈现树构建**:呈现树是从DOM树和...

    兼顾多个浏览器的网页模块

    同时,要确保脚本在文档加载完成后执行,避免在IE中因文档加载顺序引发的问题。 文件名为"sub"的压缩包可能是项目源代码的一部分,通常包含HTML、CSS、JavaScript等文件。解压后,我们可以深入研究这些文件,查看...

    js在html中的加载执行顺序.docx

    1. **加载顺序**:JavaScript代码在HTML文档中的加载与执行顺序遵循其在文档中的出现顺序。无论是内联在`&lt;script&gt;`标签内的代码还是通过`src`属性引用的外部文件,都会按照它们在HTML文档中的位置顺序进行加载和执行...

    CSS 的加载及加载顺序简介

    CSS的加载与加载顺序是前端开发中的重要话题,因为它直接影响到网页的渲染速度和用户体验。首先,我们了解一个基本的加载原则:CSS样式通常被放置在HTML文档的部分,以便在页面开始渲染时能立即应用样式,避免出现...

Global site tag (gtag.js) - Google Analytics