- 浏览: 280768 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (129)
- 数据交互---协议---编码---乱码 (6)
- 客户端技术---JS---JQUERY (25)
- 客户端技术---CSS (2)
- 平台技术---类加载器 (5)
- 平台技术---线程安全 (3)
- 平台技术---JAVA---API---反射PROXY---AOP---IO (15)
- 服务端技术---SERVLET、JSP (2)
- 服务端技术---WEB容器 (12)
- 服务端技术---EJB容器 (1)
- 服务端技术---SSH (4)
- 持久技术---SQL、连接池、数据库 (22)
- 系统---设计模式 (3)
- 系统---报表---BRIT (2)
- 系统---UML (2)
- 开源项目---RED5 (2)
- 开源项目---JDK_JAVAC (1)
- 开源项目---BEANSHELL (2)
- 有技术含量的面试题 (3)
- IDE---ECLIPSE---MAVEN (11)
- 自我总结 (4)
- 性能调优 (2)
最新评论
-
jaywcjlove:
http://jaywcjlove.github.io/hot ...
JS 网页快捷键设置 -
xubindehao:
编译后的字节码放到缓存中
JAVAC动态编译 -
luyanfei78:
"maven.test.skip同时控制maven- ...
Maven编译打包时如何忽略测试用例 -
石斧砍柴好慢:
学习了!
修改Maven本地仓库和eclipse3.6的Maven本地仓库地址 -
至尊宝_唯一:
今天在myeclipse中出现了定义在META-INF在的co ...
数据源放于:/META-INF/context.xml
前阵子,在组内给大家做了一次关于“浏览器加载和渲染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>而使用非嵌套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,页面结构的例子
|
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
发表评论
-
JS--大批量数量处理(分批续传)
2012-04-28 17:30 1657<html><head><% r ... -
项目中关于IFRAME引发的问题【出现率很高】
2012-03-08 18:09 1056常见的问题: 1.点击页面报JS错误(绑定方法错误、方法未定 ... -
js中判断某个对象类型
2012-02-18 07:16 1284在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js ... -
IE报错 不能执行已释放的script代码
2012-02-13 11:25 1606有可能是IE版本问题,该错是在虚拟机里面的ie6跑出来的,换成 ... -
总结:jquery操作html时小写变大写==很诡异
2012-02-08 13:51 2212<div id='a'></div> ... -
总结:字符串转JSON时报的错==很诡异
2012-02-07 10:59 858var ss="a:'\'d'"; al ... -
contentWindow
2012-01-12 11:38 1118contentWindow属性是指指定的frame或者ifra ... -
JQUERY应用注意
2011-12-26 12:00 880什么时候用jQuery代替$? 在commhead.jsp中 ... -
JS实现AOP
2011-12-25 17:15 925<script> function che ... -
简单换肤(另参看浏览器加载顺序)
2011-11-20 21:35 1096<%@page contentType="te ... -
切换多个SRC容易犯的错
2011-11-20 21:22 866先来看一段错误代码: var aa = document.g ... -
Google baidu悄悄跟踪用户点击:有可能根据搜索结果点击率改善排名
2011-11-06 15:47 1360GOOGLE的界面中很早就已经加入了基于鼠标事件的用户点击 ... -
JS 网页快捷键设置
2011-11-06 14:52 2888我们希望能用快捷键代替鼠标点击做一些事情,例如一个典型的应用就 ... -
JQUERY窗口大小自适应
2011-11-01 20:04 2000function resizeMenu(){ $('.area ... -
判断IFRAME是否加载完成
2011-10-22 13:49 2161<html> <head> < ... -
JUQERY实现的提示信息页
2011-10-21 19:45 872/** * 浮动DIV定时显示提示信息,如操作成功, 失败 ... -
如何提升Web应用程序性能---JS缓存
2011-10-17 17:21 1949如何提升Web应用程序性能,是我们经常要面对的一个问题,其中服 ... -
JQUERY常用代码
2011-09-13 17:51 589隐藏: $("#contractFrame_org ... -
js-页面跳转
2011-09-11 17:03 483第一种: <script language=&q ... -
JQUERY---插件
2011-09-11 16:15 1061<html xmlns="http://www ...
相关推荐
在理解浏览器加载、渲染和解析过程时,首先我们要知道这是一个复杂且高度优化的过程,涉及到了多个步骤和机制。浏览器的主要任务是将HTML、CSS和JavaScript等资源转化为用户可见的网页。下面我们将详细探讨这些过程...
浏览器执行JavaScript脚本加载与代码执行顺序是网页开发中至关重要的一环,因为它直接影响到网页的渲染和用户体验。本文主要探讨了两种关键的概念:JavaScript脚本的阻塞性和执行顺序。 1. JavaScript脚本的阻塞性...
它们的加载顺序直接影响了网页的渲染速度和用户体验。本文将详细探讨这三种资源的加载顺序,以及如何处理它们之间的相互依赖和潜在冲突。 首先,我们要明确一点,浏览器在渲染网页时是按照DOM(文档对象模型)的...
本文将深入探讨HTML的加载流程,包括解析、渲染和执行的各个阶段。 一、HTML文档解析 1. **请求发送**:当浏览器接收到URL,它会向服务器发送HTTP请求,请求HTML文档。 2. **响应接收**:服务器返回HTML文件,...
今天给大家分享一篇文章,关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。
在这个过程中,浏览器会按照HTML、CSS、JavaScript的顺序逐行解析资源,最后加载JS广告。这样的加载策略有助于优化用户体验,因为主要内容可以更快地呈现给用户,而广告通常被视为非关键元素。 首先,我们来看网页...
了解JavaScript加载顺序对于优化页面性能和解决脚本依赖关系至关重要。正确地管理脚本加载可以帮助减少页面加载时间,提供更好的用户体验。通过使用异步、延迟加载和模块化等技术,开发者可以更加灵活地控制脚本的...
JavaScript和CSS的加载顺序直接影响页面的渲染流程。通常,JS文件应放置在页面底部,以避免阻塞页面的其他元素加载;而CSS则应优先加载,确保页面的基本布局和样式能够快速呈现。同时,使用`defer`和`async`属性可以...
页面加载顺序对于用户体验至关重要,因为它直接影响到用户首次看到网页内容的速度和形式。在网页开发中,浏览器遵循一定的规则来解析HTML、CSS和JavaScript文件,从而构建出完整的页面。本篇文章将详细探讨页面加载...
当遇到"ASP.NET开发的网页在浏览器中运行速度特别慢"的问题时,这可能是由多种因素引起的,包括但不限于网络延迟、服务器响应时间、JavaScript执行效率、CSS和HTML的加载顺序等。为了找出问题的症结所在,我们可以...
同时,该架构还涉及如何对浏览器的渲染引擎进行优化,以加快网页加载和渲染速度,减少内存消耗,提升用户交互体验。 在浏览器多进程架构中,通常至少包括以下几个进程:UI进程(UIProcess)、网络进程(WebProcess...
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载...
1. **同步与异步加载**:默认情况下,`<script>`标签内的脚本和通过`src`引入的脚本都是同步加载的,这意味着浏览器会阻塞页面渲染直至脚本执行完毕。然而,为了提高页面加载速度,可以使用`async`或`defer`属性。 ...
这种技术允许网页在不阻塞页面渲染的情况下,延迟加载非关键性的脚本和样式表,从而提高页面的初始加载速度,提升用户体验。尤其在支持像IE6这样的较旧浏览器时,这种策略显得尤为重要,因为这些浏览器可能对大量...
在众多浏览器中,**WebKit**和**Gecko**是最为知名的两种渲染引擎。WebKit主要用于Safari和Chrome浏览器,而Gecko则是Firefox的核心组件。这篇文章将详细介绍这两种渲染引擎的内部运作机制。 #### 2. 浏览器的主要...
浏览器会进行全局绘制和增量绘制,按绘制顺序对元素进行绘制,并优化绘制过程。绘制完成后,浏览器还可能进行动态变化的处理和呈现引擎的线程操作。 7. CSS2可视化模型 CSS2可视化模型定义了如何在页面上绘制元素,...
W3C(万维网联盟)制定了HTML和CSS的标准规范,虽然过去各浏览器在遵循标准方面表现不一致,但现在大部分浏览器都能较好地遵循这些规范。 - **用户界面元素**: - 地址栏:输入统一资源标识符(URI)。 - 前进和...
尽管它们不延迟客户端的组件渲染,但在服务器端预先生成静态HTML,减少了首次加载时的 JavaScript 执行,从而提高了用户体验。 为了实现高效的延迟渲染,开发者需要注意以下几点: - **合理划分组件**:确保每个...