zoukankan      html  css  js  c++  java
  • 当输入URL、敲下回车、最后浏览器页面显示,这里面有什么故事?

    当输入URL、敲下回车、最后浏览器页面显示,这里面有什么故事?

    当输入URL、敲下回车、最后浏览器页面显示,这里面有什么故事?键盘到操作系统、操作系统到浏览器、浏览器到服务器、服务器返回数据页面渲染……

    键盘到操作系统

    回车键按下时,与键盘相关的电路闭合,通过消抖操作,键盘的电路系统将回车键转化为键码13。按键被按下会触发中断事件,回车键的键码被编码并通过通用串行总线(USB)传输到中断请求线上(IRQ),中断控制器接收到IRQ上的信号后,会映射一个中断向量。中断描述符表将中断向量映射到对应的处理函数上(中断处理器)。

    操作系统到浏览器

    操作系统通过相应的API函数获取到当前的活动窗口(该浏览器)并获取到当前浏览器地址栏句柄,操作系统使用sendMessage函数将消息添加到地址栏句柄的消息队列中,sendMessage函数参数将带有按键以及按键的信息。然后浏览器地址栏句柄的消息处理函数将被调用,处理消息队列中的消息。

    浏览器到服务器

    处理URL

    关键字or地址:浏览器搜先分析地址栏的内容是关键字还是URL。若地址栏的为关键字,则使用浏览器的搜索引擎搜索该关键字。当把文字作为关键字传递给搜索引擎时,通常会在URL后面加上一个参数,这个参数告诉搜索引擎搜索来自哪个浏览器。

    HSTS列表: HSTS强制客户端使用HTTPS与服务器创建连接。若访问的URL在HSTS列表里,则浏览器会把HTTP协议变为HTTPS。

    编码: 对URL进行Unicode编码

    DNS查询

    浏览器处理完URL后,将获取要访问的URL所在服务器的地址。这时需要进行DNS查询。

    DNS查询过程:

    1.查询本地DNS缓存
    2.查看本地host表
    3.查询DNS服务器在DNS服务器上进行查询时,首先查询本地DNS服务器。若本地DNS 服务器上有域名的缓存,则本地DNS服务器将对应IP发送给查询方。若本地DNS服务器上没有域名的缓存,则向根域名服务器发起查询(递归)。根域名服务器收到请求后,会返回下一级域名信息的DNS服务器地址。本地DNS服务器收到地址后继续进行查询(迭代),最后获取到目标域名的IP并发送给查询方。

    TCP连接

    此时获取到URL中域名的IP地址,通过协议可以获取到端口(HTTP:80、HTTPS:443),下一步该进行浏览器与服务器之间的连接。
    浏览器使用socket函数来进行TCP连接,初始化socket时参数为 AF_INET和SOCK_STREAM。

    TCP建立连接过程(三次握手):

    1.客户端发送一个TCP包。设置SYN=1(请求建立连接)、Seq=X(随机产生的序列号)
    2.服务器发回确认包(ACK)应答。SYN=1、ACK=1、ACK number = X+1、Seq = Y(随机产生)
    3.客户端再次发送确认包(ACK) 。SYN=0、ACK=1、ACK number= Y+1、Seq = X+1

    TCP断开连接过程(四次挥手):

    1.客户机给服务器一个FIN为1的TCP报文
    2.服务器返回给客户端一个确认ACK报文
    3.服务器给客户端发送一个FIN报文
    4.客户机回复ACK报文

    服务器动作

    从浏览器发起请求到请求到页面数据的过程中,可能会经过负载均衡等中间部分

    负载均衡

    请求处理

    1.服务器收到请求后将请求解析为:请求方法、域名、请求路径
    2.服务器找到该域名对应的虚拟主机,并验证该虚拟主机是否可以使用该请求方法
    3.服务器获取请求路径对应的内容,并根据内容使用指定的程序来处理(e.g.使用不同的程序解析PHP、JSP等文件),将输出的结果发送给浏览器

    PLUS - 请求方法

    浏览器页面渲染

    浏览器收到服务器返回的页面数据后,开始对页面进行渲染

    浏览器进程与线程

    浏览器是多进程的,用于页面显示的有Browser进程、第三方插件进程、GPU进程(3D绘制等)、浏览器渲染进程(浏览器内核,每个Tab页面都有一个渲染进程)。

    浏览器渲染进程包含的线程:

    GUI渲染线程
    JS引擎线程
    事件触发线程
    定时器触发器线程
    异步http请求线程
    注意: JavaScript可以操作DOM,如果修改元素的时候同时渲染页面,就可能出现不可预料的结果,所以GUI渲染线程与JS引擎线程是互斥的

    浏览器渲染页面过程

    1.解析HTML建立dom树
    2.解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)
    3.布局render树(确定每个节点在屏幕上的位置)
    4.绘制render树(遍历render树,并使用UI后端层绘制每个节点)

     

    CSS加载是否会阻塞dom树渲染?

    css加载不会阻塞DOM树解析
    css加载会阻塞render树渲染

    回流和重绘

    回流:浏览器重新渲染部分或全部文档的过程
    重绘:元素改变的样式不影响元素位置时,浏览器将新样式赋予给元素并重新绘制它的过程

     
  • 相关阅读:
    array_map()与array_shift()搭配使用 PK array_column()函数
    Educational Codeforces Round 8 D. Magic Numbers
    hdu 1171 Big Event in HDU
    hdu 2844 poj 1742 Coins
    hdu 3591 The trouble of Xiaoqian
    hdu 2079 选课时间
    hdu 2191 珍惜现在,感恩生活 多重背包入门题
    hdu 5429 Geometric Progression 高精度浮点数(java版本)
    【BZOJ】1002: [FJOI2007]轮状病毒 递推+高精度
    hdu::1002 A + B Problem II
  • 原文地址:https://www.cnblogs.com/TiAmo-zhang/p/14324735.html
Copyright © 2011-2022 走看看