从一个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. hdu3555 Bomb(数位dp）

    题目传送门 Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total ...

  2. “CreateRiaClientFilesTask”任务意外失败。 未能加载文件程序集“System.ComponentModel.DataAnnot...

    错误  77  “CreateRiaClientFilesTask”任务意外失败.  System.Web.HttpException (0x80004005): 未能加载文件或程序集“System. ...

  3. Flask-Login的实现

    Flask-Login Flask-Login 为 Flask 提供用户 session 的管理机制.它可以处理 Login.Logout 和 session 等服务. 作用: 将用户的 id 储存在 ...

  4. 【转载】linux查看端口状态相关命令

    具体命令移步:https://www.cnblogs.com/cxbhakim/p/9353383.html

  5. DecimalFormat数字格式化

    DecimalFormat可以按照需要格式化数字,下面简单介绍一下几种使用.其中自己也踏踏实实踩了坑,谨此记录. 保留位数设置 public class DecimalUtils { //保留2位,不 ...

  6. iview table绑定双击事件

    <Table <Table ref="table" highlight-row :columns="columns" :data="new ...

  7. 手写实现indexOf

    突然奇想.自己手写一个indexOf package com.toov5.test; public class Test8 { public static int find(String str1, ...

  8. openwrt增加密码及ssh的方法

    openwrt增加密码及ssh的方法 1.进入openwrt系统源码的顶层目录,然后执行 make menuconfig命令进入 Network--> SSH-->  <*>o ...

  9. boost multi index

    Boost.MultiIndex makes it possible to define containers that support an arbitrary number of interfac ...

  10. 搭建ceph集群（单节点）

    https://blog.csdn.net/Greenchess/article/details/77525786 软件环境: - Centos7 x64 CEPH版本 : - ceph-deploy ...