- 浏览: 26589 次
- 性别:
- 来自: 北京
文章分类
最新评论
网页加载的详细步骤拆分:
1、用户打开url链接
2、浏览器查询url的dns地址
3、提交url请求到服务器端
4、服务器端处理
5、传输处理好的html文本内容到浏览器
6、浏览器解析html,并加载css,js,图片等内容
7、加载完成,用户看到完整的页面内容
其中第六步的浏览器解析过程将是前端优化最直接、有效的地方,该过程的详细过程为:接受网络数据-》将二进制码变成字符-》将字符变为unicode code points.-》tokenizer -》tree constructor -》DOM ready -》Window ready。前端编程,主要理解的是tree constructor -> dom ready -> window ready的流程。
浏览器加载和渲染html的顺序
1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
5. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。
JS的加载(js是单线下载和执行的)
1. 不能并行下载和解析(阻塞下载)。
2. 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有
代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修
改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.
如何加快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。
附(转载):Javascript 异步加载详解
<script src="http://yourdomain.com/script.js"></script>
(function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();
异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。
(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
{var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();
(function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); } if (window.attachEvent) window.attachEvent('onload', async_load); else window.addEventListener('load', async_load, false); })();
- XHR Eval
- XHR Injection
- Script in Iframe
- Script Defer
- document.write Script Tag
- 还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。
var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; doc.open().write('<body onload="insertJS()">'); doc.close();
<script type="text/javascript"> /* var ... */ </script>
<script src="file.js" defer></script>
<script src="file.js" async></script>
- type 属性在HTML 4中是必须的,在HTML5中是可选的。
- async 属性是HTML5中新增的。
- 个别属性(xml:space)在HTML5中不支持。
- 没有 async 属性,script 将立即获取(下载)并执行,然后才继续后面的处理,这期间阻塞了浏览器的后续处理。
- 如果有 async 属性,那么 script 将被异步下载并执行,同时浏览器继续后续的处理。
- HTML4中就有了defer属性,它提示浏览器这个 script 不会产生任何文档元素(没有document.write),因此浏览器会继续后续处理和渲染。
- 如果没有 async 属性 但是有 defer 属性,那么script 将在页面parse之后执行。
- 如果同时设置了二者,那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理,而不是同步方式。
<head> <script src=“…”></script> </head>
- 阻止了后续的下载;
- 在IE 6-7 中 script 是顺序下载的,而不是现在的 “并行下载、顺序执行” 的方式;
- 在下载和解析执行阶段阻止渲染(rendering);
... <script src=“…”></script> </body>
- 不阻止其它下载;
- 在IE 6-7 中 script 是顺序下载的;
- 在下载和解析执行阶段阻止渲染(rendering);
var se = document.createElement ('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se);
- 不阻止其它下载;
- 在所有浏览器中,script都是并行下载;
- 只在解析执行阶段阻止渲染(rendering);
var se = new Image(); se.onload = registerScript(); se.src = 'http://anydomain.com/A.js'; 把下载 js 与 解析执行 js 分离出来
- 不阻止其它下载;
- 在所有浏览器中,script都是并行下载;
- 不阻止渲染(rendering)直到真正需要时;
相关推荐
它通过模拟加载过程,向用户展示页面正在逐步加载的状态,避免用户因长时间等待而感到不安。本文将深入探讨如何实现网页加载进度条,并提供几种不同的实现方法。 首先,我们来看一种简单的模拟进度条的方法,即...
在网页加载过程中,如果内容加载时间较长,用户可能会感到不安或者失去耐心。此时,一个美观且富有吸引力的loading GIF图标可以吸引用户的注意力,让他们知道页面正在加载,从而提高用户满意度。 3. **如何在网页...
"CSS3 Animation圆点动画网页加载特效"就是一个典型的例子,它利用CSS3的强大功能,为网页加载过程增添了一份优雅与动感。 **一、CSS3简介** CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,它扩展了CSS2...
`Event.INIT`表示加载已完成且内容已初始化,`Event.COMPLETE`表示整个加载过程结束,`ProgressEvent.PROGRESS`用于跟踪加载进度。 ```actionscript loader.contentLoaderInfo.addEventListener(Event.INIT, ...
本资源"JavaScript 动态网页开发与详解(光盘视频动画)"深入浅出地介绍了JavaScript在动态网页开发中的应用,通过光盘视频动画的形式,帮助学习者更直观、更生动地理解这一技术。 首先,JavaScript的基础知识是学习...
7. **网页优化**:加载速度、图像优化、代码简洁性对用户体验的影响。 8. **实例分析**:可能包含不同类型的网页设计案例,如企业网站、电商网站、博客或新闻网站,分析它们的设计策略和成功之处。 其次,“项目...
本文将详细介绍如何在Android Webview中添加网页加载进度条的实例。 首先,我们需要创建一个自定义的WebView类,这个类继承自WebView,并添加一个ProgressBar。在自定义的`ProgressWebView`类中,我们初始化一个...
在实现遮罩效果时,如果涉及到与百度广告管家的结合,可能需要考虑如何在广告展示时添加遮罩,以防止用户在广告加载过程中进行其他操作。例如,可以监听广告加载事件,当广告加载完成后显示遮罩层,广告关闭时则移除...
5. **绑定事件**:使用`.on()`方法将预加载函数绑定到页面加载事件,如`$(document).ready()`,确保在页面完全加载后开始预加载过程。 6. **测试与优化**:在实际环境中测试预加载效果,根据性能和视觉感受进行调整...
### Android WebKit HTML 主资源加载过程详解 #### 前言 在移动互联网时代,Android WebView 成为了开发者不可或缺的一部分,特别是在构建混合应用时。本文旨在深入解析 Android WebKit 中 HTML 主资源的加载流程,...
你可以下载并运行这个示例,观察预加载图片在滚动过程中的动态加载过程,更好地理解其工作原理和使用方法。 总之,jQuery LazyLoad是一个强大的图片预加载工具,通过它我们可以有效地提升网页性能,优化用户体验。...
它们的加载顺序直接影响了网页的渲染速度和用户体验。本文将详细探讨这三种资源的加载顺序,以及如何处理它们之间的相互依赖和潜在冲突。 首先,我们要明确一点,浏览器在渲染网页时是按照DOM(文档对象模型)的...
在“JavaScript动态网页开发详解——JavaScript特效”这一主题中,我们将深入探讨JavaScript如何实现各种炫酷的网页效果。 一、JavaScript基础 在讨论特效之前,我们需要了解JavaScript的基础。JavaScript语法与...
- **`void setWebViewClient(WebViewClient client)`**:设置`WebViewClient`实例,用于处理网页加载过程中的事件。 - **`void setWebChromeClient(WebChromeClient client)`**:设置`WebChromeClient`实例,用于...
- **性能优化**:讨论减少HTTP请求、缓存策略、代码压缩等优化技巧,提升网页加载速度。 7. **源码分析** - **21章的源代码分析**:每章的源代码都是一个实例,通过分析这些实例,你可以深入理解JavaScript在实际...
本资源“JavaScript动态网页技术详解实例源代码”旨在深入解析JavaScript在创建动态网页时的技术细节,并通过实例源代码帮助学习者更好地理解和应用这些知识。 首先,我们要了解JavaScript的基本语法,包括变量、...
1. 加载动画:在图片加载过程中,可以添加加载动画以提升用户体验。 2. 分页加载:除了点击加载,还可以结合分页功能,每次加载一定数量的新图片。 3. 滚动加载:结合滚动事件,实现滚动到底部自动加载下一批图片...
### 网页设计详解及制作方法 #### 一、网页设计概述 网页设计是创建美观且功能强大的网站的过程,它涉及到视觉艺术、用户体验(UX)设计以及交互设计等多个方面。一个好的网页设计不仅能够吸引用户的眼球,还能让...
"CSS3 SVG网页加载图标动画特效"是一种利用CSS3和SVG(Scalable Vector Graphics)技术来实现的动态加载图标效果,旨在提升用户体验,尤其是在网页内容加载过程中提供反馈,让用户感知到页面正在加载而不会感到枯燥...