URL输入到渲染的原理整理及知识点收集

最新推荐文章于 2022-07-27 17:26:31 发布

GGdido

最新推荐文章于 2022-07-27 17:26:31 发布

阅读量328

点赞数

分类专栏：笔记经验文章标签： URL解析浏览器

本文链接：https://blog.csdn.net/GGdido/article/details/88532049

版权

笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

经验

9 篇文章 0 订阅

订阅专栏

本文是从网上各方资料整理来做个人知识梳理之用，主干梳理来自于这里

补充知识点：

CDN
浏览器线程和进程
- 待补
轮询和websocket
反向代理
- 正向代理是指客户端代理，客户端和代理服务器在同域，需要你主动设置代理服务器ip或者域名进行访问。正向代理的典型使用场景就是vpn，访问vpn需要设置vpn的地址，将vpn作为代理服务器，从而通过它获取另外服务器的数据
- 反向代理则是服务器代理，代理服务器和服务器端同域，客户端不需要做设置，对代理服务器无感，仿佛直接访问server，反向代理直接应用场景是负载均衡

负载均衡
- 是将访问流量根据转发策略分发到后端多台云服务器（ECS实例）的流量分发控制服务。负载均衡扩展了应用的服务能力，增强了应用的可用性。
- 负载均衡算法：
  - 权重随机
  - 权重轮询
  - 一致性哈希
  - 最小连接数算法
css可视化模型：规定了浏览器在页面上怎么处理文档树
- 包含块：元素的尺寸（width或者height的百分比值，或者inherit）和定位与包含其的矩形框有关，包含这个元素的矩形框就是这个元素的包含块。一般来讲，非行内元素，包含块指的是包含块的内边距区域，如果是行内元素，需要取决于其包含块的direction（流方向）特性
  - 包含块与元素的position值有关系，当position为static和relative的元素在正常流中，它的包含块由它最近的块级、单元格或者行内块祖先元素的内容框（content）创建。
  - position为fixed的元素包含块为当前视窗
  - position为absolute的元素的包含块就是由它的最近的 position 的值不是 static（也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
  - 根元素(<html></html>)组成的包含块叫做初始包含块
- 控制框：
  - 块框：块级元素会形成一个块框，每个块框占据一行。块框只能要么只包含块框要么只包含行框，如果一个块框内有块级元素有行内元素，该行内元素会被匿名行框（非行内框）包围
  - 行内框：一个行内元素生成一个行内框，多个行内框可以处在一行上，允许左右有其他元素
  - display可以影响框的性质：block：块框，inline：行框，inline-block：行内块框，none：不生成框，ps：visible：hidden，生成框，但是不显示
- 格式上下文（BFC）
  - BFC：块级格式上下文
    - 块级元素组成的独立渲染域，规定了其内部渲染方式，且不会影响到其外部的渲染
    - 规则：
      - 内部的Box会在垂直方向，一个接一个地放置。
      - Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
      - 每个元素的左外边缘（margin-left)，与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
      - BFC的区域不会与float box重叠。
      - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
      - 计算BFC的高度时，浮动元素也参与计算
    - 如何触发一个BFC：
      - 根元素或其它包含它的元素
      - 浮动 (元素的 float 不是 none)
      - 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
      - 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
      - 块级元素具有overflow ，且值不是 visible
  - IFC：行内框格式上下文
    - 规则：
      - 在行内格式上下文中，行内框一个一个的水平排列，起点是包含块的顶部
      - 框在水平方向上的margin、padding、border得以保留
      - 框在垂直方向上可以以不同的方式对齐，可以使用顶部对齐、底部对齐、基线对齐
    - 行框：
      - 包含行内框的长方形区域，就是行框。行框的宽度由它的包含块和其中的浮动元素决定，高度的确定由行高度计算规则决定
    - 行框的规则：
      - 行内框在水平方向无法放入一个行框内，则他们可以分配在两个活多个垂直堆叠的行框中（折行）
      - 行框的高度永远高于其包含的所有行内框的最高的高度，但未必等于（取决于对齐方式）
      - 行框的左边接触包含块的左边，右边接触其包含块的右边
    - IFC的规则
      - 浮动元素可能会处于包含块边缘和行框边缘之间
      - 尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度（包含块的宽度），它们可能会因浮动元素缩短了可用宽度，而在宽度上发生变化
      - 同一行内格式化上下文中的行框通常高度不一样（如，一行包含了一个高的图形，而其它行只包含文本）
      - 当一行中行内框宽度的总和小于包含它们的行框的宽，它们在水平方向上的对齐，取决于 `text-align` 特性
      - 空的行内框应该被忽略，即不包含文本，保留空白符，margin/padding/border非0的行内元素，以及其他常规流中的内容(比如，图片，inline blocks 和 inline tables)，并且不是以换行结束的行框，必须被当作零高度行框对待
    - 总结：
      - 行内元素总是会应用IFC渲染规则
      - 行内框内部，对于那些行内元素，一样应用IFC渲染规则
      - inline-block，会在元素外层产生IFC（所以这个元素是可以通过text-align水平居中的），当然，它内部则按照BFC规则渲染
JS引擎解析
- js解释阶段
  - js不是编译性语言，是一边用一边编译的
  - 引擎对js的处理可以是：
    - 读取代码，词法分析，代码->词元
    - 语法分析，将代码整理成语法树？
    - 使用翻译器，将代码转化成字节码
    - 字节码解释器，将字节码转化成机器码
- js预处理
  - 为了保证js能顺利运行，做了一些预处理工作，如变量提升和分号补全等
- js运行
  - 执行上下文，执行堆栈概念（如全局上下文，当前活动上下文）
  - VO（变量对象）和AO（活动对象）
  - 作用域链
  - this机制等
- js回收
  - 标记清除
  - 引用计数