2021-07-15

前端进击笔记

前端框架模板引擎的实现原理

Vue 模板引擎工作过程

以 Vue 为例子，对于开发者编写的 Vue 代码，Vue 会将其进行以下处理从而渲染到页面中：

1.解析语法生成 AST 对象；

2.根据生成的 AST 对象，完成 data 数据初始化；

3.根据 AST 对象和 data 数据绑定情况，生成虚拟 DOM 对象；

4.将虚拟 DOM 对象生成真正的 DOM 元素插入到页面中，此时页面会被渲染。

2021-07-13

前端进击笔记

浏览器是如何渲染的

渲染过程

1.解析 HTML 文件，创建 DOM 树
浏览器解析 html 源码，然后创建一个 DOM 树。并行请求 css/image/js 在 DOM 树中，每一个 HTML 标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM 树的根节点就是 documentElement，对应的是 html 标签。

2.解析 CSS,形成 CSS 对象模型
浏览器解析 CSS 代码，计算出最终的样式数据。构建 CSSOM 树。对 CSS 代码中非法的语法它会直接忽略掉。解析 CSS 的时候会按照如下顺序来定义优先级：
浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html 中的 style。

3.将 CSS 与 DOM 合并，构建渲染树（renderingtree）
DOM Tree + CSSOM –> 渲染树（rendering tree）。渲染树和 DOM 树有点像，但是是有区别的。DOM 树完全和 html 标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如 head、display:none 的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的 css 属性。

2021-07-12

前端进击笔记

什么是 HTTP 协议

什么是 RESTful 接口

RESTful 不是一种协议，而是一种接口设计风格，其要点如下：

URL 只有名词
看 URL 就知道是什么业务
看 method 就知道是什么操作

GET /orders/1234	// 查询订单
POST /orders/1234	// 新增订单
PUT /orders/1234	// 修改订单
DELETE /orders/1234	// 删除订单

2021-07-08

前端

接口对接 SOP —及时沟通、前置风险并解决

接口对接过程遇到的问题

在开发一个项目的时候，接口对接是必不可少的。接口对接也不止发生在前端后端之间，也发生在后端与其他业务线、后端与外部系统，也就是说接口对接是频繁的，并且是重要的。

然而，在对接过程中，往往我们会遇到以下问题：

没有接口文档，接口口头或者企业微信简单确认（特别是只有一两个接口时）
接口文档没有确定交付时间，或者到时间没有交付
接口文档不全，接口缺失或者接口字段缺失
接口变更，实际接口与接口文档不一致
……

SOP 的重要性

接口对接是一个很小但是很重要的事情，接口对接不顺畅，可能会导致项目返工以及进度落后。在丰富的工程实践中，我总结了一套接口对接 SOP，针对接口对接过程中的种种问题，将接口对接变成一步步标准化的流程，减少遗漏和错误，提高接口对接过程中的工作效率。

该 SOP 的策略是：通过主动沟通、及时沟通，保证接口不成为阻塞开发的障碍，及时将在对接过程中存在的风险暴露，将风险前置并且解决，达到对接流畅的目的。

我的接口对接 SOP

1.确定接口文档交付时间

在项目评审阶段，确定好接口文档交付时间，有两个主要原因。

接口交付时间会影响到接口对接下游的开发进度和排期
在企业微信消息或者项目进度表确定时间，尽量确保接口文档按时交付

2.主动索要接口

临近交付时间了，可以主动索取接口文档，提高交付准时性。

有时候虽然按时交付了，但是交付质量非常一般，如多个接口缺失、接口返回错误。所以，交付时对齐、评估并快照接口就显得非常重要。

3.交付时对齐、评估并快照接口

接口文档交付时，作为下游，不是回一句 ”收到“ 就够了，而应该分三步走。

对齐接口

对齐本次有哪些接口
接口分别在哪些地方使用
就算只有一两个接口也应该落地到接口文档，方便自己还有后来人对接
评估接口

评估接口的方法就是：一个个看接口返回，评估不通过的，及时沟通调整。
对于比较复杂的接口，交付前应该协商好接口方案，上下游共同将方案确定。
- 确定接口字段，确定是否满足前端业务需求
- 评估接口方案是否会影响性能
- 确定有推送，以及推送的数据结构
- …..
快照接口

快照接口是将接口文档通过截图、或者复制等方式快照，包括接口请求方法、content-type、以及返回。

快照接口主要是防止开发过程接口变更，导致联调时接口与一开始约定不一致，最后浪费时间在最终的沟通上。当然，快照接口策略是比较麻烦的，对于一些复杂的接口或者一些特殊情况，我们才视情况使用。

4.明白我们的最终目标

接口上下游最终目标是一致，都是把项目完成，把项目做好。可能接口对接过程中，会有出现这样那样问题，但我们都应该保持积极向上昂扬的态度，推动事情发展，保证最终目标的达成。永远相信美好的事情将会发生。

以上。

2021-07-06

前端进击笔记

浏览器如何进行网络请求

输入一个 URL 敲下回车键发生了什么

1.DNS 域名解析（此处涉及 DNS 的寻址过程），找到网页的存放服务器；

2.浏览器与服务器建立 TCP 连接；

3.浏览器发起 HTTP 请求；

4.服务器响应 HTTP 请求，返回该页面的 HTML 内容；

5.浏览器解析 HTML 代码，并请求 HTML 代码中的资源（如 JavaScript、CSS、图片等，此处可能涉及 HTTP 缓存）；

6.浏览器对页面进行渲染呈现给用户（此处涉及浏览器的渲染原理）。

2021-07-05

前端进击笔记

JavaScript 的运行机制

JavaScript 作为是一门单线程语言，使用事件循环(Event Loop)机制，来执行代码和收集回调队列的子任务。

2021-06-30

前端进击笔记

JavaScript 实现继承

问题

JavaScript 的函数怎么也是个对象？
1.JavaScript 中除了基本类型，其他都是对象，Symbol 也是基本数据类型。
2.函数是一种特殊的对象，它也拥有属性和值，有一个特别的属性 prototype，该属性就是函数的原型对象。
3.函数的原型对象(prototype) 都拥有 constructor 属性，该属性指向与之关联的构造函数。
__proto__ 和 prototype 到底是啥关系？
1.每个对象都有 __proto__ 属性来标识自己所继承的原型对象，但只有函数才有 prototype 属性。
2.每个函数都有一个 prototype 属性，该属性为函数的原型对象。
3.通过将实例对象的 __proto__ 属性赋值为其构造函数的原型对象 prototype，JavaScript 可以使用构造函数创建对象的方法，来实现继承。
JavaScript 中对象是怎么实现继承的？
通过原型链访问对象的方法和属性，找到返回对应的值，直到访问 Object.prototype 的原型对象 null 仍没找到的，返回 undefined。
JavaScript 是怎么访问对象的方法和属性的？