- 浏览: 25021 次
- 性别:
- 来自: 北京
文章分类
最新评论
网页加载的详细步骤拆分:
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)直到真正需要时;
相关推荐
主要介绍了php实现网页上一页下一页翻页过程详解,大致功能就是页面只显示几条信息,按上一页、下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页和尾页选项不可选,需要的朋友...
1.2.2 windows系统下的搭建过程 1.2.3 linux系统下的搭建过程 1.3 常见问题汇总 1.4 使用本书的配套实例 1.5 小结 第2章 android开发必备 2.1 android体系结构 2.1.1 各种库和android运行环境 2.1.2 应用程序框架 ...
我们有一个需求就是要统计在加载过程中还未到达角色创建界面而流失的用户数量。 我们在加载开始就进行统计人数,加载完成之后再记录人数。这样,通过用加载前的人数减去成功加载后的人数。就知道了加载的流失率。就...
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 2.AJAX在原生JS中的实现 尽管随着JS框架的盛行,在jQuery中,实现AJAX...
前言: 最近新到一个团队,才意识到基础的薄弱,牛人遍地,还是好好学习,天天向上。...在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载, 而ht
React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了... 在这个过程中,一般用户只能等待,什么都做不了,如果用户在一个高速的网络中,高配置的设备中,以上先要加载所有的js然后再执行的过程
下面是通过自己写的一个demo,绝对不是官方demo,来给大家讲述了如何在android studio如何导入.so文件的流程和方法,欢迎大家在下方留言讨论指正。 1,android studio如何加载极光推送的jar包和.so库文件. 2,如何获取...
入门学习Linux常用必会60个命令实例详解 Linux必学的60个命令 Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作、文件存取、目录操作、进程管理、文件权限设定等。所以,在Linux系统上工作离不...
8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...
8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...
8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...
8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...
6 一、利于搜索引擎蜘蛛爬行 6 二、易于修改 7 三、减少网页加载时间 7 四、代码精简 7 五、相对表格的嵌套问题 8 六、搜索排名的影响 8 第四节 div+css布局方式 8 第五节 div+css理论概述 9 一、理解CSS盒子模型 9 ...
8、查看DB2存储过程源代码的SQL 380 9、获取建表脚本 380 10、获取DB2数据库日志操作方法 380 二十一、LINUX相关 383 1、从命令模式切换到视图模式 383 二十二、TDS相关 383 1、LINUX下启动TDS管理界面 383 2、LINUX...
SQL过程自动C#封装,支持从表到基本存储过程生成 使用SQLDMO控制 SQL Server 使用SQL-DMO实现定制SQL Scripts Create Tables and Build inserts from Tables by using Mygeneration Templates(Sql Server) C# 获取...
第5章 BlazeDS框架详解 139 5.1 BlazeDS介绍 139 5.1.1 什么是BlazeDS 139 5.1.2 使用BlazeDS的原因 140 5.1.3 BlazeDS功能特色 140 5.2 BlazeDS体系结构 141 5.2.1 BlazeDS的组件 143 5.2.2 构建一个简单的...
12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON数据格式比较 13.2 容器类MixedCollection 13.3 数据存储基本单元Record与dataField 13.3.1 dataField 13.3.2 Record 13.4 数据存储store 13.4.1 ...
12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON数据格式比较 13.2 容器类MixedCollection 13.3 数据存储基本单元Record与dataField 13.3.1 dataField 13.3.2 Record 13.4 数据存储store 13.4.1 ...