码迷,mamicode.com
首页 > Web开发 > 详细

网页加载流程

时间:2016-02-22 16:38:11      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

网页加载过程详解

  网页加载的详细步骤拆分:
  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树的情况,所以 就会阻塞其他的下载和呈现.

网页加载流程

标签:

原文地址:http://www.cnblogs.com/muwei/p/5207390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!