13.从url 输入网址到最终页面渲染完成
从url 输入网址到最终页面渲染完成,发生了什么? 1.DNS解析:将域名地址解析为IP地址
先读取:
-浏览器DNS缓存
-系统DNS缓存
-路由器DNS缓存
-网络运营商DNS缓存
-递归搜索:blog.baidu.com
- .com域名下查找DNS解析
- .baidu域名下查找DNS解析
- blog域名下查找DNS解析
- 页面出错
2、TCP连接:TCP三次握手
-第一次握手,由浏览器发起,告诉服务器我要发送请求了
-第二次握手,由服务器发起,告诉浏览器我准备接受了,你可以发送了
-第三次握手,由浏览器发送,告诉服务器,我马上发送,准备接受
3、发送请求
-请求报文:HTTP 协议的通信内容
4、接受响应
-响应报文
5、渲染页面
-渲染HTML标记,浏览器调用HTML解析器解析成Token并构成dom树
-遇见style/link标记,浏览器调用css解析器,处理css标记并构成cssom树
-遇见script标记,调用JavaScript解析器,处理script代码(绑定事件,修改dom树、cssom树)
-将dom树和cssom树合并成一个渲染树
-根据渲染树来计算布局,计算每一个节点的几何信息(布局)
-将各个节点颜色绘制到屏幕上(渲染) 注意:这五个步骤不一定按照顺序执行,如果dom树或cssom树被修改了,可能会执行多次布局和渲染,
往往实际页面中,这些步骤都会执行多次的 6、断开连接:TCP四次挥手
第一次挥手:由浏览器发起,给服务器,我东西发完了(请求报文),你准备关闭吧
第二次挥手:由服务器发起,告诉浏览器,我东西接收完了(请求报文),我准备关闭了,你也准备关闭吧
第三次挥手:由服务器发起,告诉浏览器,我东西发完了(响应报文),你准备关闭吧
第四次挥手:由浏览器发起,告诉服务器,我东西接收完了,我准备关闭了(响应报文),你也准备关闭吧
13.从url 输入网址到最终页面渲染完成的更多相关文章
- 从一个url地址到最终页面渲染完成,发生了什么?
从一个url地址到最终页面渲染完成,发生了什么? 1.DNS 解析 : 将域名地址解析为IP地址 浏览器DNS缓存 系统DNS缓存 路由器DNS缓存 网络运营商DNS缓存 递归搜索: www.baid ...
- 从url输入网址后发生什么
从url输入网址后发生什么
- 输入URL地址到最终页面渲染完成,发生了什么事
1. 域名DNS解析 - 浏览器DNS缓存 - 系统DNS缓存 - 路由器DNS缓存 - 网络运营商DNS缓存 - 递归搜索...... 2. TCP连接: TCP三次握手 - 第一次握手,由浏览器发 ...
- 前端防止url输入地址直接访问页面
首先,解决这个问题要搞明白此url是从程序内部跳转还是直接在地址栏输入的,如果是程序内部跳转,那就好办啦.方法如下: 判断用户是否登录状态,是否携带token 使用router.beforeEach注 ...
- 9. http协议_响应状态码_页面渲染流程_路由_中间件
1. http协议 超文本传输协议 协议详细规定了 浏览器 和 万维网服务器 之间互相通信的规则 客户端与服务端通信时传输的内容我们称之为报文(请求报文.响应报文) 常见的发送 get 请求方式 在浏 ...
- 《Webkit技术内幕》之页面渲染过程
文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中 ...
- 从 输入网址(URL)到页面展示的过程
1.用户输入url网址(URL) 用户输入url(也就是我们说的网址,也是统一资源定义符,用于定义互联网资源) 比如输入https://www.baidu.com 其中https为协议 baidu.c ...
- 经典面试题:从 URL 输入到页面展现到底发生什么?
前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解! 本文首发地址为GitHub 博客,写文章不易,请多多支持与关注 ...
- 从输入URL按下回车到页面展现,中间发生了什么?
从输入URL按下回车到页面展现,总的来说发生了一下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器 ...
随机推荐
- hdu2098 分拆素数和 素数筛
将一个偶数拆成两个素数的和,欧拉筛暴力 #include<stdio.h> #include<string.h> #define N 10001 ]; ]; ,j; void ...
- javascript的单例模式
单例模式是javascript最基本,最有用的模式之一,它提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码通过单一的变量进行访问.我的理解是在这个作用域中,只有通过单一的变量来访问,不存 ...
- CH4201 楼兰图腾
题意 4201 楼兰图腾 0x40「数据结构进阶」例题 描述 在完成了分配任务之后,西部314来到了楼兰古城的西部.相传很久以前这片土地上(比楼兰古城还早)生活着两个部落,一个部落崇拜尖刀('V'), ...
- web页面的数据从excel中读取
# -*- coding: utf-8 -*- import xdrlib ,sysimport xlrdimport datetimeimport jsonimport conf,reimport ...
- MySQL Disk--SSD与RAID
===================================================SSD与RAID 51.在RAID 5这类Parity-RAID上存在partial-stripe ...
- stylus 知识点
循环的范围可以用两个小数点..表示,如(1..10)就是从1到10,并且包括1和10 for in 的循环范围写法: for index in 1 2 3 等价于: $li_length = 3 fo ...
- vmware :Ubuntu 12.04添加新硬盘
http://blog.csdn.net/hanpengyu/article/details/7475645 一.VMware新增磁盘的设置步骤 (建议:在设置虚拟的时候,不要运行虚拟机的系统,不然添 ...
- Win10 UEFI +Ghost +intel快速启动 新法完美安装
http://tieba.baidu.com/p/4767004289?qq-pf-to=pcqq.c2c Win10 如果主板不用Bios 而用UEFI引导启动,速度快,界面好.现在一般都用win1 ...
- 两个DataTable关联查询(inner join、left join)C#代码
using System; using System.Collections.Generic; using System.Text; using System.Data; namespace Cons ...
- nginx和apache最核心的区别在于apache是同步多进程模型,一个连接对应一个进程;nginx是异步的,多个连接(万级别)可以对应一个进程
nginx和apache的一些优缺点比较,摘自网络,加自己的一些整理. nginx相对于apache的优点: 1.轻量级,同样是web 服务,比apache 占用更少的内存及资源 2.抗并发,ngin ...