完整渲染过程——从URL到页面

原创 2017年10月06日 10:52:17

当用户输入一串URL(统一资源定位符)到完整的页面渲染出来,到底经历了什么呢~下面我来描述一下整个过程。
先列出他的大致流程:

  1. 浏览器根据请求的URL交给DNS域名解析,找到真实的IP,向服务器发起请求;
  2. 服务器交给后台处理完后返回数据,浏览器接受文件(HTML/CSS/JS/图像等);
  3. 浏览器对加载到的数据进行解析,建立起相应的内部结构;
  4. 载入解析到的资源文件,渲染页面,完成。

    我们主要分为两部分具体解释,一部分重点讲解URL,另一部分讲解渲染过程。

    输入URL后

      首先,浏览器会开启一个线程来处理这个请求,对URL分析判断,如果是http协议就按照Web方式来处理,如果是本地文件就不用发送请求啦。
      然后,调用浏览器内核中的相应方法,比如Web中的loadUrl方法;

    1. 缓存

      我们会查看浏览器内部缓存,系统缓存,路由器(有时候也叫DNS缓存)缓存,看是否需要向服务器请求全部数据,如果查到域名对应的ip,就根据缓存的具体情况,判断从服务器端请求文件还是从本地读取文件。不同的浏览器默认缓存保留时间也有不同。
      浏览器http缓存

    2. 域名解析

      如果没有从本地找到对应ip,我们需要进一步解析域名。
      首先你要了解,URL是统一资源定位符。由于IP地址很长且难以记忆,直接通过IP不方便,我们使用URL访问网站,并发明了DNS(域名系统)服务器,来解析域名为IP地址。抽象的来说,DNS就像是一个记录IP地址的超级分布式数据库。
      当我们输入www.cici.cn访问网站,实际上是访问域名表示的IP地址。在这段URL中,”cn”是顶级域,她和”cici”(二级域)合起来可以称为主域名(一级域名),”www”是三级域名。”www.cici.cn”就是当前域名(二级域名)。
      我们将当前域名交给DNS服务器解析。首先会发送查询请求给本地DNS服务器,如果在本地DNS服务器中查询不到指定的域名,他就会向其他根域名服务器继续发送查询请求(替主机继续查询)。其他根服务区或者返回查到的IP,或者告诉本地服务器”我没查到,你下一步可以问问那个谁(别的域名服务器)”。
      简单提一下,域名解析时本地DNS发送请求使用无连接的UDP协议,广播式发送,速度快但是不是完全可靠。其他情况以及TCP/UDP的比较可以戳这里

    3. 建立链接

      如果上一步成功返回IP地址,那么我们可以接下来的操作。在服务器端与浏览器建立链接,这要需要TCP三次握手。
      TCP三次握手
      这部分可以插入一些cookie & session的知识。
      建立好可靠的TCP连接,客户端就可以发送http请求啦。服务端处理好请求后,将需要的资源发送回来。

    4. 服务器处理

      服务器接(如Apache、Node.JS等)收到了浏览器发送的请求后,根据某个协议,通过web-server把浏览器发送的数据进行打包(包含请求头,ip地址,请求路径和查询参数等)。
      web-server把数据打包后,发送给后端应用。
      进入到部署好的后端应用,找到对应的请求处理。后端服务软件会根据路径和查询参数进行相应处理,返回给浏览器对应的数据包(包括http协议组成的代码。里面包含页面的布局、文字。数据也可能是图片、脚本程序,反应头,反应数据,请求头等)

    5. 浏览器渲染

      终于可以接受数据啦,在浏览器下载html文档,同时使用缓存。
      浏览器将HTML字节数据经过一个流程解析为DOM树:

    字节->字符->令牌->节点对象->对象模型

      当HTML代码遇到<link>标签时,浏览器会发送请求获得该标签中标记的CSS文件。令人欣喜的是,这是一个异步请求,不影响其他操作,浏览器获得数据后就会像构建DOM树一样构建CSSOM树。
      DOM树描述了文档的结构与内容,CSSOM树描述了对文档应用的样式规则,想要渲染出页面,就需要将DOM树和CSSOM树结合在一起,成为渲染树。
      浏览器会先从DOM树的根节点开始遍历每个可见节点(不包括display:none,包括visibility:hidden),对每个可见节点找到配适的样式规则,最后渲染树构建完成。
      下一步就是布局阶段, 计算每个节点在窗口内的确切位置与大小。布局阶段的输出是一个盒子模型,精确计算出每个元素的位置与大小,将测量值转换为像素值。当布局事件完成后,就可以渲染啦,渲染出整个页面给用户。
      这是比较理想状态下,没有考虑浏览器渲染阻塞的情况。实际应用中,HTML/CSS/JS资源都可能对渲染过程造成阻塞。
      HTML是构建DOM必须的。
      如果CSS过大,虽然下载异步,但下载过慢,会造成渲染的暂停等待,因为没有CSS样式是无法对DOM进行渲染的,避免渲染一部分后,CSSDOM树构建好了,DOM又得从头渲染,用户可能会看到闪烁的回流重绘过程。
      如果将JS文件放在<head>中,当浏览器的HTML解析器遇到<script>标签会暂停构建DOM,然后将控制权移交给JS引擎,这是引擎会开始执行JS脚本,直到执行结束后,浏览器才会从刚刚断开的地方恢复,继续构建DOM。为什么解析必须要暂停呢?那是因为脚本可以改变 HTML以及它的产物 —— DOM。
      如果这个JS脚本还操作了CSSOM树,而正好CSSOM树还没有下载和构建,浏览器甚至会先下载并构建好CSSOM树。显而易见,JS脚本的执行位置不当会严重影响渲染速度。
      这就是为什么我们常常将外部css文件放在head中,而将js文件放在body最后。更多帮助js延迟加载提高浏览器性能的知识,戳这里

      到这里,整个从URL到页面渲染的过程就结束啦,我将自己看到的一些文章和知识捏合汇总,整个过程里面包含着许多网络和渲染的知识并没有一个一个写明,需要大家自己搜索汲取。
      如果有错,拜托评论里告诉我啦!

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Hadoop+Hive部署安装配置

最近结合具体的项目,搭建了Hadoop+Hive,在运行Hive之前要首先搭建好Hadoop,关于Hadoop的搭建有三种模式,在以下的介绍中,我主要的采用的是Hadoop的伪分布安装模式。写下来给各...

Nginx报504 gateway timeout错误的解决方法

转载文章来源:http://www.111cn.net/sys/nginx/90669.htm(若侵删) Nginx报504 gateway timeout错误引起,一个是文件配置问题,另一个是相关处...

Hadoop+Hive环境的搭建

Hadoop+Hive环境的搭建,在这儿我就不一一介绍Hadoop和Hive了,直接进入正题1. 准备工作:Hadoop,Hive二进制文件下载路径,在这儿我只直接下载的编译好的二进制文件,这样我...

Java调用python之lxml解析xpath

一、需求背景: 公司有爬虫需求,希望通过xpath解析网页,最早的版本是调用Java版本的Jsoup来完成的,但是Jsoup只能处理一些简单的xpath,对于一些特殊函数的xpath无法支持,后...

hive元数据库配置、metadata

介绍hive默认元数据Derby(嵌入模式),修改hive的元数据库,使用mysql。配置mysql的几种不同机制

Android开发之assets目录下资源使用总结

因为系统在编译的时候不会编译assets下的资源文件,所以我们不能通过R.XXX.ID的方式访问它们。那我么能不能通过该资源的绝对路径去访问它们呢?因为apk安装之后会放在/data/app/**.a...

Spring JDBC-混合框架的事务管理

概述 问题 解决方案 示例Hibernate Spring JDBC概述Spring 抽象的 DAO 体系兼容多种数据访问技术,它们各有特色,各有千秋。 Hibernate 是非常优秀的 ORM 实...

Hadoop集群之Hive安装配置

Hadoop集群之Hive安装配置转自:Hadoop集群之Hive安装配置Hive是基于Hadoop构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的...

React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)

在我们常用的App中经常会看到分享与第三方登录的功能,可以说分享与第三方登录已经成为了各大APP的必备功能。对于产品运行与推广来说,分享与第三方登录不仅能加强用户粘性,增加流量及新用户,也能提升用户存...

OpenCV图像剪切的扩展和高级用法:任意裁剪,边界扩充

OpenCV图像剪切的扩展和高级用法:任意裁剪,边界扩充 , 利用感兴趣区域ROI和矩形类Rect,在OpenCV中可以很简单的就实现图像裁剪和剪切的功能,但剪切时常常会出现超出图像边界的区域的情况,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)