- 浏览: 276771 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 1595<html><head><% r ... -
项目中关于IFRAME引发的问题【出现率很高】
2012-03-08 18:09 1033常见的问题: 1.点击页面报JS错误(绑定方法错误、方法未定 ... -
js中判断某个对象类型
2012-02-18 07:16 1245在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js ... -
IE报错 不能执行已释放的script代码
2012-02-13 11:25 1557有可能是IE版本问题,该错是在虚拟机里面的ie6跑出来的,换成 ... -
总结:jquery操作html时小写变大写==很诡异
2012-02-08 13:51 2180<div id='a'></div> ... -
总结:字符串转JSON时报的错==很诡异
2012-02-07 10:59 834var ss="a:'\'d'"; al ... -
contentWindow
2012-01-12 11:38 1099contentWindow属性是指指定的frame或者ifra ... -
JQUERY应用注意
2011-12-26 12:00 861什么时候用jQuery代替$? 在commhead.jsp中 ... -
JS实现AOP
2011-12-25 17:15 907<script> function che ... -
简单换肤(另参看浏览器加载顺序)
2011-11-20 21:35 1068<%@page contentType="te ... -
切换多个SRC容易犯的错
2011-11-20 21:22 848先来看一段错误代码: var aa = document.g ... -
Google baidu悄悄跟踪用户点击:有可能根据搜索结果点击率改善排名
2011-11-06 15:47 1336GOOGLE的界面中很早就已经加入了基于鼠标事件的用户点击 ... -
JS 网页快捷键设置
2011-11-06 14:52 2851我们希望能用快捷键代替鼠标点击做一些事情,例如一个典型的应用就 ... -
JQUERY窗口大小自适应
2011-11-01 20:04 1978function resizeMenu(){ $('.area ... -
判断IFRAME是否加载完成
2011-10-22 13:49 2131<html> <head> < ... -
JUQERY实现的提示信息页
2011-10-21 19:45 848/** * 浮动DIV定时显示提示信息,如操作成功, 失败 ... -
如何提升Web应用程序性能---JS缓存
2011-10-17 17:21 1917如何提升Web应用程序性能,是我们经常要面对的一个问题,其中服 ... -
JQUERY常用代码
2011-09-13 17:51 556隐藏: $("#contractFrame_org ... -
js-页面跳转
2011-09-11 17:03 461第一种: <script language=&q ... -
JQUERY---插件
2011-09-11 16:15 1038<html xmlns="http://www ...
相关推荐
今天给大家分享一篇文章,关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。
对于渲染,利用 Fiddler 将网速调慢,可以看到 css 下载后会马上渲染到页面,渲染和下载同步进行。js 的解析和运行,也类似。 对于 js 运行,以及页面加载相关事件的触发,特别做了测试。在 Firefox 下,打开测试...
JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕①。这一点是没有争议的,并且在所有浏览器中的行为都是一致...
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载...
浏览器加载和渲染顺序 HTML页面加载和解析流程 减少 HTTP 的请求数 添加Cache缓存 减少域名查询 网站图片的合并压缩 压缩css和js代码 去除页面中没有用到的CSS 优化页面元素加载顺序 避免使用css表达式 CSS和JS在...
javascript在浏览器中的性能,可以认为是开发者所面临的最严重的可用性问题,今天,自己看完高性能的javascript的加载和执行这一章,聊聊怎么解决js的加载顺序和执行的原理,下面话不多说了,来一起看看详细的介绍:...
总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方面的...
把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了,也就是...
本项目旨在使用 HTML 和 CSS 来构建一个小兔鲜项目,学习目标是能够在网页中使用精灵图,使用背景大小属性,设置背景图片的大小,认识 CSS 写作顺序,提高代码专业性和浏览器渲染性能,以及使用专业方式完成项目结构...
Flexbox布局提供了高渲染性能,容器可以决定子元素的大小、顺序、对齐方式和间隔,支持双向布局。 Preload和Prefetch: Preload 用于提前加载对当前页面重要的资源。 Prefetch 用于提前加载后续页面或路由所需的资源...
Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面的生成速度,让用户等待更久的时间。) Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。 (增加设计的复杂度,增加页面加载时间,增加HTTP会话数。) ...
我学习时候用sharpmap开源代码写的一个小项目...存在一些BUG,比如地图打开先后顺序,渲染覆盖,重复打开同一个文件报BUG等问题。由于就是用来学习的小项目,没往深里面做。 希望可以对学习sharpmap的人有提示作用把。
* JavaScript 的加载与执行、单线程的 JavaScript、浏览器渲染、JS 动画性能、Repaint 和 Reflow * URL 编码与解码、字体的渲染、图片格式的优缺点、性能优化、编码规范 * JavaScript 代码最佳实践、移动 H5 前端...
ajax请求异步队列加载 我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况。ajax默认使用异步加载...那么我们要怎么实现顺序加载而不引起该问题呢? 示例代码一: <script src="http://libs.b
前端的世界 提供前端入门的知识框架,由前端进击团队开发。 该项目使用开源的方式一起...浏览器加载顺序 浏览器渲染过程 浏览器EventLoop 浏览器同源策略 跨域方案/ CORS 浏览器缓存 常见调试技巧 HTTP / Ajax HTTP请
本篇文章主要涵盖了前端开发中性能优化和安全相关的知识点,包括 web 语义化、SEO、会话跟踪、图像优化、Web 攻击技术、渐进增强、内存泄漏、从输⼊URL 到页⾯加载的过程、重绘和回流的优化、⽹站性能优化等。...
画布动画一个Vue.js项目构建设置# install dependenciesnpm install# serve with hot...-report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpm test 有关工作原理的详细说明,请查看的和。
Blazor应用程序由使用C#,HTML和CSS实现的可重用Web UI组件组成。客户端和服务器代码都是用C#编写的,允许您共享代码和库。 在WebAssembly或服务器上运行 Blazor可以使用WebAssembly直接在浏览器中运行客户端C#...
全站 AJAX 加载,即使是 AJAX 加载也能使用浏览器的前进和后退功能;在不支持 JavaScript 的情况下依然可以通过普通的加载方式正常浏览网站;AJAX 加载时可以显示进度条 响应式设计,移动端完全重新设计,模仿 iOS ...