一、浏览器加载和渲染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文件，重新渲染页面。 浏览器每天就这么来来回回跑着，要知道不同的人写出来的 HTML 和 CSS 代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。
各个步骤的加载渲染时间，可以通过各个浏览器的插件跟踪到，例如IE的 httpwatch、火狐的firebug等等。
二、如何加快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页面引入JavaScript的几种方式，分析HTML中JavaScript脚本的执行顺序问题，通过本文给大家分享浏览器执行JavaScript脚本加载与代码执行顺序，对浏览器执行javascript及执行顺序相关知识感兴趣的...
主要是对html与javascript在浏览器中的加载顺序问题进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
来自微软官方的IE11安装包，安装过程...IE11也是首款能够支持W3C资源优先级规范的浏览，这一功能可以正确区分网页的优先顺序，从而减少网页的加载时间，支持HTML5链接预先同步和预计，可以提前预测用户要浏览的内容。
如果回调用于ajax，例如分页，应该控制好ajax顺序
javascript在浏览器中的性能，可以认为是开发者所面临的最严重的可用性问题，今天，自己看完高性能的javascript的加载和执行这一章，聊聊怎么解决js的加载顺序和执行的原理，下面话不多说了，来一起看看详细的介绍：...
(8) 网址自动加载功能：单击“运行”按钮后，程序会弹出一个浏览器窗口，按顺序加载列表中的所有网址并逐个单击指定ID 的网页元素，浏览器窗口可以查看加载进度，加载完成后会自动退出浏览器窗口，运行前可以设置...
在 IE8, Safari, Chrome 等浏览器下也类似。 Firefox 对下载顺序做了优化：Firefox 会将 js, css 提前下载，而将图片等资源延迟到后面下载。 对于渲染，利用 Fiddler 将网速调慢，可以看到 css 下载后会马上渲染到...
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性，从字面上来看，二者的功能很好理解，分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探
今天给大家分享一篇文章，关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。
在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中，我们研究了延迟脚本(defer)和异步脚本(async)的执行时机、浏览器支持情况...我们使用《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
浏览器会异步加载 javascript 文件,但是会按照引用文件中的书写顺序从上到下执行解析 javascript Defer属性标记 defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档...
通用的延迟加载工具LazyLoad,支持下载多个JavaScript文件，并能保证在所有浏览器中都以正确的顺序执行，同时还能加载CSS文件
浏览器的一个更简单，更小的模块加载器。 不用担心您JavaScript文件包含在其中的顺序。 只需声明每个模块需要哪些依赖关系，并且在加载所有依赖关系后，Payload就会初始化该模块。 还有另一个模块加载器？ 是的，...
电源关闭针对标签上瘾者的浏览器扩展程序，用于关闭所有包含带有关键字或域名的URL的标签。 例如，如果您打开了许多Facebook选项卡，但没有按顺序打开，则可以使用此扩展名，输入“ facebook.com”，按Enter键，瞧，...
浏览器加载和渲染顺序 HTML页面加载和解析流程 减少 HTTP 的请求数 添加Cache缓存 减少域名查询 网站图片的合并压缩 压缩css和js代码 去除页面中没有用到的CSS 优化页面元素加载顺序 避免使用css表达式 CSS和JS在...
事件处理程序（事件出发后要执行的代码函数形式）存在问题：浏览器加载一个页面的时候，是按照自上而下的顺序加载的，若将script标签写到head内部，在代码执行时候，页面还没有加载，页面中的DOM对象也没有加载。...
把js放在head里，浏览器是怎么去执行它的呢，是按顺序加载还是并行加载呢？在旧的浏览器下，都是按照先后顺序来加载的，这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了，也就是...
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载...