从输入URL到渲染出整个页面的过程包括三个部分:

1、DNS解析URL的过程

2、浏览器发送请求与服务器交互的过程

3、浏览器对接收到的html页面渲染的过程

一、DNS解析URL的过程

DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip地址不容易记忆,一般会使用URL域名(如www.baidu.com)作为网址。DNS解析就是将域名翻译成IP地址的过程。

具体过程:

1)浏览器缓存:浏览器会按照一定的频率 缓存DNS记录

  2)操作系统缓存:如果浏览器缓存中找不到需要的DNS记录,就会取操作系统中找

   3)路由缓存:路由器也有DNS缓存

   4)ISP的DNS服务器:ISP有专门的DNS服务器应对DNS查询请求

   5)根服务器:ISP的DNS服务器找不到之后,就要向根服务器发出请求,进行递归查询

二、浏览器与服务器交互过程

  1)首先浏览器利用tcp协议通过三次握手与服务器建立连接

  http请求包括header和body。header中包括请求的方式(get和post)、请求的协议 (http、https、ftp)、请求的地址ip、缓存cookie。body中有请求的内容。

  2)浏览器根据解析到的IP地址和端口号发起http的get请求.

  3)服务器接收到http请求之后,开始搜索html页面,并使用http返回响应报文

  4)若状态码为200显示响应成功,浏览器接收到返回的html页面之后,开始进行页面的渲染

三、浏览器页面渲染过程

  1)浏览器根据深度遍历的方式把html节点遍历成dom 树

  2)将css解析成CSS DOM树

  3)将dom树和CSS DOM树构造成render树

  4)JS根据得到的render树 计算所有节点在屏幕中的位置,进行布局(回流)

  5)遍历render树并调用硬件API绘制所有节点(重绘)

 补充: 构造render渲染树的过程

      

  1. 从DOM树的根节点开始遍历每个可见的节点。
  2. 对于每个可见的节点,找到CSS树中的对应的规则,并且应用他们。
  3. 根据每个可见的节点及其对应的样式,组合生成渲染树。

文章主要参考:

浏览器从输入URL到渲染完页面的整个过程的更多相关文章

  1. 浏览器从输入URL到渲染出页面发生了什么

    总体来说分为以下几个过程: 1.  DNS解析 2. TCP连接 3. 发送HTTP请求 4. 服务器处理请求并返回HTTP报文 5. 浏览器解析渲染页面 6. 连接结束 参考资料:[https:// ...

  2. 输入url到渲染出页面的过程

    输入地址 浏览器查找域名的 IP 地址 这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存... 浏览器向 web 服务器发送一个 HTTP 请求 服务器的永久 ...

  3. 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3

    备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...

  4. 从浏览器中输入URL到页面加载的发生了什么-转载

    转:https://www.cnblogs.com/confach/p/10050013.html 背景 “从浏览器中输入URL到页面加载的发生了什么“,这是一道经典的面试题,涉及到的知识面非常多,但 ...

  5. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

  6. 从浏览器地址栏输入url到显示页面的步骤

      在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期 HTTP1.1增加了Cache-Cont ...

  7. 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

    在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 如果资源未缓存,发起新请求 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证. 检验 ...

  8. 在浏览器中输入url地址 -> 显示主页的过程

    -来自<图解HTTP> 最近在进行前端面试方面的一些准备,看了网上许多相关的文章,发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么.仔细思 ...

  9. 【转】浏览器中输入url后发生了什么

    原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...

随机推荐

  1. 每日一问:LayoutParams 你知道多少?

    前面的文章中着重讲解了 View 的测量流程.其中我提到了一句非常重要的话:View 的测量匡高是由父控件的 MeasureSpec 和 View 自身的 `LayoutParams 共同决定的.我们 ...

  2. mongodb连接认证失败

          版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_29143909/arti ...

  3. 2018-2019-2 网络对抗技术 20165230 Exp7 网络欺诈防范

    实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 实验内容 简单应用SET工具建立冒名网站 ettercap DNS spoof 结合应用两种技术,用DNS sp ...

  4. 代码同时支持.NET Framework和.NET Core

    代码同时支持.NET Framework和.NET Core .NetCore技术研究-一套代码同时支持.NET Framework和.NET Core   在.NET Core的迁移过程中,我们将原 ...

  5. List Map Set的线程安全

    常见的ArrayList  LinkedList  HashMap TreeMap LinkedHashMap HashSet TreeSet LinkedHashSet 都是线程不安全的.如果要使用 ...

  6. mount和umount命令使用

    1.mount命令 在Linux系统下,mount命令用于加载文件系统到指定的加载点. (1)命令语法 mount(选项)(参数) (2)常用选项说明 -V:显示版本. -l:显示已加载的文件系统列表 ...

  7. NER(BiLSTM+CRF,Keras)

    数据集为玻森命名实体数据. 目前代码流程跑通了,后续再进行优化. 项目地址:https://github.com/cyandn/practice/tree/master/NER 步骤: 数据预处理: ...

  8. How to let your website login with domain account when using IIS to deploy it?

    如何让你的网站以域账号登录 Select your website in IIS Manager, open Authentication, enable Windows Authentication ...

  9. 『金字塔 区间dp』

    金字塔 Description 虽然探索金字塔是极其老套的剧情,但是这一队 探险家还是到了某金字塔脚下.经过多年的研究,科 学家对这座金字塔的内部结构已经有所了解.首先, 金字塔由若干房间组成,房间之 ...

  10. 如何在ASP.NET Core Web API中使用Mini Profiler

    原文如何在ASP.NET Core Web API中使用Mini Profiler 由Anuraj发表于2019年11月25日星期一阅读时间:1分钟 ASPNETCoreMiniProfiler 这篇 ...