来源：前端-网络课程

URL

DNS

DNS的作用

一般而言服务器都有着自己的IP地址，但它难以被人们记忆，而域名的记忆成本更低

DNS将IP地址和域名进行映射，从而能够通过域名找到服务器IP

DNS查找规则

若其中一步成功则直接结束查找，开始建立连接

  1. 查找浏览器自身缓存DNS
  2. 查找操作系统DNS
  3. 查找本地hosts文件
  4. 查找域名服务器，需要发送请求
    1. 查找本地DNS服务器
    2. 查找根域名服务器
    3. 查找顶级域名服务器
    4. 查找权威域名服务器

通过DNS成功查找到IP后，就要通过OSI七层网络模型发送网络请求了

HTTP请求

HTTP请求位于应用层，HTTP报文必须包含响应标头、请求标头、请求方法

请求方法

  • GET：获取
  • POST：提交
  • DELETE：删除
  • PUT：更新
  • HEAD：只请求首部
  • OPTIONS：预检
    • 跨域时，浏览器会发送OPTIONS请求以作预检，测试请求能否成功；自定义请求头时也会发送
    • 简单请求（GET、HEAD或者POST方法，且Content-Type为application/x-www-form-urlencoded、multipart/form-data或text/plain）不会触发预检，浏览器会直接发送实际请求
  • 等等……

客户端为了实现请求，会进行TCP三次握手，与服务端建立连接

浏览器缓存

请求到资源后，浏览器会根据设置情况进行资源的缓存；缓存结束后，就会进行TCP四次挥手，结束连接

强缓存

让浏览器强制缓存服务端提供的资源，常用于静态资源或较简单的资源，一般是后台配置的

  • Expires：值为绝对时间，但它是HTTP1.0的东西，现在默认浏览器均默认使用HTTP1.1
  • Cache-Control：值为相对时间，如果与Expires同时设置的话，其优先级高于Expires，有几个常用属性
    • max-age：设置失效时间，客户端在这个有效期内，如果又请求该资源，就直接读取缓存
    • no-cache：不使用本地缓存，需要使用协商缓存，过程见上
    • no-store：禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求
    • public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器
    • private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存

服务器通过设置HTTP中header的Expires和Cache-Control字段告诉浏览器缓存的有效期

强缓存会有一个固定时间，但如果服务器数据进行了更新，却还没到强缓存的过期时间，则数据无法更新

Cache-Control的优先级比Expires高

缓存的资源会存在硬盘或内存中，from disk cache是硬盘缓存；from memory cache是内存缓存

多次刷新浏览器就可能触发内存缓存，因为一开始浏览器已经读取到页面并放入缓存了

协商缓存

通过服务器来判断缓存是否可用

请求命中协商缓存时，返回304；不一致则返回新校验值（ETag或Last-Modified）和文件，并返回200

Last-Modify

搭配If-Modify-Since

浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，该资源的最后修改时间

当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since（Last-Modify的值）

服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存

ETag

搭配If-None-Match

web服务器响应请求时，会在header中加一个ETag，用于告诉浏览器，当前资源在服务器的唯一标识（生成规则由服务器决定）

再次向web服务器请求时，会带上头If-None-Match（Etag的值）

web服务器收到请求后将If-None-Match与ETag进行比对，决定是否命中缓存

ETag和Last-Modified的区别
  • 在精度上，ETag要优于Last-Modified：Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出修改，但是ETag每次都会改变确保了精度
  • 在性能上，ETag要逊于Last-Modified，因为Last-Modified只需要记录时间，而ETag需要服务器通过算法来计算出一个hash值，更耗时
  • 在优先级上，服务器校验优先考虑ETag，如果服务器收到的请求没有ETag值，则验证Last-Modified

页面渲染

浏览器拿到资源后，就会开始进行页面渲染

绘制DOM树

HTML解析器将超文本和标签解析为DOM树

样式计算

CSS渲染引擎将CSS样式表转化为浏览器可理解的styleSheets，计算出DOM节点的样式

CSS具有很多属性值单位，如2em、blue、bold，这些不容易被渲染引擎理解，所以会把所有值转化为渲染引擎容易理解、标准化的计算值单位，这个过程就是属性值标准化

处理完单位后，再处理样式的继承和层叠

回流与重绘

回流

部分或全部元素的尺寸、结构，或某些属性发生改变时，浏览器重新渲染部分或者全部文档的过程被称为回流

会导致回流的操作：

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容变化（文字数量或图片大小等）
  • 元素字体大小变化
  • 添加或删除可见的DOM元素
  • 激活CSS伪类（例如:hover）
  • 查询某些属性或调用某些方法

一些常见且会导致回流的属性和方法：

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • scrollIntoView()、scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如color、background-color、visibility等）

，浏览器会将新样式赋予给元素并重新绘制它，这个过程被称为重绘

解析JavaScript

JavaScript是由V8引擎解析的，而V8引擎是用C++编写的

网页具有跨平台性，能在各种平台运行，但是每台电脑的CPU等硬件配置各不相同，所以将源码先转换成字节码、字节码再去适配各个操作系统，转换成机器码，能够做到跨平台兼容

V8使用JIT（Justin Time，即时编译）解释器，能做到边解析边执行

机器码会被交给CPU执行

计算机组成原理主要分为软件和硬件，硬件基于冯诺依曼架构

  • 输入设备/输出设备：鼠标键盘显示屏等外设
  • CPU：主要负责运算
    • 运算器：处理加减乘除与或非这类逻辑
    • 控制器：从内存中读取、翻译、分析指令，再根据指令的内存给相关的部件发送命令
  • 存储器：存储数据
    • 内部存储器：以二进制代码字节（8比特）为单位存储，每个存储单元都有一个唯一地址号
    • 外部存储器