浏览器渲染过程

暂时只是大概读了一遍,先记下来

网络分层

自上而下

  • 应用层
  • 传输层
  • 网络层
  • 链路层
  • 物理层

前四层构成TCP/IP协议族,之所以分层,我觉得可以理解为像前端的模块化,易于管理,改动。实际上设计也变得简单,各层只需考虑自己分内的事

应用层

应用层决定了向用户提供应用服务时通信的活动。

包含FTP,DNS,HTTP

传输层

传输层对上层应用层,提供处于网络连接中的两台计算机之间的数据传输。

包含TCP,UDP(用户数据报协议)

网络层(网络互连层)

网络层用来处理在网络上流动的数据包。数据包是网络传输的最小数据单位。该层规定了通过怎样的路径(所谓的传输路线)到达对方计算机,并把数据包传送给对方。

IP

链路层(数据链路层)(网络接口层)

用来处理连接网络的硬件部分。包括控制操作系统、硬件的设备驱动、NIC(Network Interface Card,网络适配器,即网卡),及光纤等物理可见部分(还包括连接器等一切传输媒介)。硬件上的范畴均在链路层的作用范围之内。

三次握手

发送端首先发送一个带 SYN 标志的数据包给对方。接收端收到后,回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。最后,发送端再回传一个带 ACK 标志的数据包,代表“握手”结束。 若在握手过程中某个阶段莫名中断,TCP 协议会再次以相同的顺序发送相同的数据包。

http

职责

生成针对目标服务器的HTTP请求报文

从输入 URL 到页面加载完成的过程中都发生了什么事情?

  • 输入URL
  • 发起请求:URL解析/DNS解析
  • 网络连接:三次握手
  • 服务器响应请求:返回数据
  • 客户端接收响应:浏览器加载/渲染页面

两个引擎

浏览器两个引擎

  1. 渲染引擎

    常称为浏览器的内核,webkit,gecko,persto(opera)

  2. js引擎

两个树

遇到的一些问题和解决办法

Unchecked runtime.lastError: The message port closed before a response was received.

调试工具中报如上的错误,查阅资料得知是chrome某个插件报的错,自己一一验证,发祥是迅雷下载插件这个毒瘤,禁用可消除如上的报错

浏览器的渲染原理简介

简书,浏览器加载解析渲染

图解http