从一个url地址到最终页面渲染完成，发生了什么？

1、DNS 解析 ： 将域名地址解析为IP地址

  • 浏览器DNS缓存
  • 系统DNS缓存
  • 路由器DNS缓存
  • 网络运营商DNS缓存
  • 递归搜索： www.baidu.com
    • .com域名下查找DNS解析
    • .baidu域名下查找DNS解析
    • www域名下查找DNS解析
    • 还找不到出错了
      2、TCP连接三次握手
      3、发送请求
  • 请求报文
    4、接收响应
  • 响应报文
    5、渲染页面
  • 遇到HTML标记，浏览器调用HTML解析器解析成 Token 并构建dom树；
  • 遇到style/link标记，浏览器调用css解析器，处理css标记并构建 cssom树；
  • 遇到javascript标记，调用javascript解析器，处理script代码（绑定事件，修改dom树/cssom树）
  • 将dom 树和cssdom树和cssom树合并成渲染树
  • 根据渲染树来计算布局，计算每个节点的几何信息（布局）
  • 将各个节点颜色重绘到屏幕上（渲染）

注意： 这五个步骤不一定按照顺序执行，如果dom树或cssom树被修改了，可能会指定多次重绘重排。
6、 断开连接， TCP 四次挥手

从一个url地址到最终页面渲染完成，发生了什么？的更多相关文章

  1. 输入URL地址到最终页面渲染完成，发生了什么事

    1. 域名DNS解析 - 浏览器DNS缓存 - 系统DNS缓存 - 路由器DNS缓存 - 网络运营商DNS缓存 - 递归搜索...... 2. TCP连接: TCP三次握手 - 第一次握手,由浏览器发 ...

  2. 从一个url输入浏览器到页面渲染出来，这个过程都发生了哪些事情？

    经典问题:在浏览器输入一个url后,会发生什么事情呢? (1)假设是简单的http请求(GET),IPV4,无代理. 浏览器先查看浏览器缓存-系统缓存-路由器缓存,若缓存中有,请略过中间步骤,直接跳到 ...

  3. 13.从url 输入网址到最终页面渲染完成

    从url 输入网址到最终页面渲染完成,发生了什么? 1.DNS解析:将域名地址解析为IP地址 先读取: -浏览器DNS缓存 -系统DNS缓存 -路由器DNS缓存 -网络运营商DNS缓存 -递归搜索:b ...

  4. 使用UrlConnection请求一个url地址获取内容

    访问网络需要加Internet权限:android.permission.INTERNET 使用UrlConnection请求一个url地址获取内容:             //1.创建一个Url对 ...

  5. ajax页面跳转（后台返回的是一个url地址，或者自己传进去的是url地址）

    function modifyMerchantInfo(merchant_code) { $.ajax({ url: '/intra/crm/merchant/OrderMgr.htm?method= ...

  6. 判断一个url地址是不是404状态（用curl函数）

    <?php $url = "http://www.kxblogs.com/n/20161108/74429879.html"; $ch = curl_init (); cur ...

  7. 用jq编码解码一个url地址

    介绍一下编码解码函数对 1.    escape /unescape   主要用于汉字编码,返回字符的unicode编码值, 对“+”不能编码 2.     encodeURI / decodeURI ...

  8. Swift - 通过url地址打开web页面

    通过UIApplication.sharedApplication().openURL()方法,可以使用浏览器打开相应的网页. 1 2 3 var urlString = "http://h ...

  9. 从输入一个URL到页面渲染的流程简介

    首先说明以下是我参考网上答案和自己的思考,给出自己的想法,如果有问题,欢迎大家吐槽从用户在浏览器中输入一个URL,到整个页面渲染,这个过程中究竟发生了什么呢?今天先简单写下整个过程,后面再一点点完善. ...

随机推荐

  1. 58.Partition Equal Subset Sum（判断一个数组是否可以分成和相等的两个数组）

    Level:   Medium 题目描述: Given a non-empty array containing only positive integers, find if the array c ...

  2. Python 读书

    第一章 %d %s %f 数字和表达式 加减乘取模都可以直接输入 除需注意: 1/2=0.5 1/2.0=0.5 --有浮点按浮点计算 1//2=0 --整除 1.0/2.0=0.5 1.0//2.0 ...

  3. JQuery 获取表格table所有行第一列

    main_table 是表ID $("#main_table tr").find("td:eq(0)")

  4. 基于Windows 7（本地）和CentOS7.6（云端）的Minecraft服务器（无Forge/有Forge）搭建方法

    炎炎夏日中想和小伙伴们开黑的同学可以进来看一下了,本教程教你搭建基于两个平台的Minecraft服务器,这里我以Minecraft 1.11.2版本为例给大家讲解搭建流程.其中有Forge版本可以加入 ...

  5. linux---postgresql的安装和配置

    postgresql的安装:源码安装(推荐):http://my.oschina.net/hippora/blog/375292 1.tar -xjvf postgresql-9.3.4.tar.bz ...

  6. nginx实现高性能负载均衡的Tomcat集群

    1. 安装软件: nginx 两个apache-tomcat 安装过程省略. 2.配置两个tomcat的http端口,第一个为18080,第二个为28080 注意:需要把server.xml文件中所有 ...

  7. python3 实现堡垒机功能（并发执行命令及上传下载文件）

    转载请注明出处,欢迎提出宝贵意见,谢谢! 功能介绍: 1.主机分组 登录后显示分组主机及主机数量 选择主机组后显示该主机组下所有主机信息,主机名及IP显示输入选择:1.执行命令利用线程并发组内所有主机 ...

  8. Python中的try-finally

    >>> try: ... raise KeyboardInterrupt ... finally: ... print('Goodbye, world!') ... Goodbye, ...

  9. web,xmlSecurity

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  10. 【Zookeekper】分布锁Curator

    有序节点:假如当前有一个父节点为/lock,我们可以在这个父节点下面创建子节点:zookeeper提供了一个可选的有序特性,例如我们可以创建子节点“/lock/node-”并且指明有序,那么zooke ...