本文为译文，原文地址：

Virtual DOM is pure overhead

        如果您在最近几年中使用过JavaScript框架，那么您可能已经听说过“虚拟DOM很快”这一短语，通常被说来意味着它比真实DOM快。这是一个令人惊讶的前端技术概念。例如，人们问Svelte在不使用虚拟DOM时如何更快。（作者在反讽🤔）

        是时候让我们仔细揣摩揣摩了。

什么是虚拟 dom ？

深入浅出react&redux笔记

1. 高内聚（js、jsx、css） 低耦合（弱化不同组件间的关系）

2. react组件数据

   1. 生命周期 (执行顺序如序号顺序)

      • 装载过程
        1. constructor (初始化state，绑定this。当然也可以不绑定，在class中使用声明变量&尖头函数的写法)
        2. getlnitialState (React.createClass中使用)
        3. getDefaultProps (React.createClass中使用)
        4. componentWillMount (这个时候没有任何渲染出来的结果，即使调用this.setState 修改状态也不会引发重新绘制换句话说，所有可以在这个 component­WillMount 中做的事情，都可以提前到 constructor 中间去做)
        5. render (完全根据 this.state 和 this.props 来决定返回的结果，而且不要产生任何副作用。在 render 函数中去调用 this.setState 毫无疑问是错误的，因为一个纯函数不应该引起状态的改变)
        6. componentDidMount (组件已经被装载到 DOM 树上了,这个时候我们可以通过请求来填充组件的内容、使用三方代码获取dom, 需要注意的是该生命周期不会在一个render后立即执行，而是在所有子组件render结束后执行，这是因为render只返回jsx对象并不往dom树上装载内容，具体的内容装载是react经过vm后才决定的)
      • 更新过程
        1. shouldComponentUpdate (如果这个函数返回 true，那就会继续更新过程，接下来调用 render 函数;反之，如果得到 一个 false，那就立刻停止更新过程，也就不会引发后续的渲染了)
        2. componentWillReceiveProps (只要是父组件的 render 函数被调用，在 render 函数里面被谊染的子组件就会经历更新过程，不管父组件传给子组件的 props 有没有改变，都会触发子组件的 componentWillReceiveProps 函数, 子组件中的 setstate 不会调用该方法)
        3. componentWillUpdate
        4. render
        5. componentDidUpdate
      • 卸载过程
        1. componentWillUnmount (通常解绑事件、定时器等)

        在做跨境电商网站的时候避免不了接入三方的支付、统计等代码来进行一系列的数据统计、分析、引流等。这里记录一下自己踩过的坑。

worldpay俩方

        之前不论是 paypal 还是 worldpay 接支付都是跳转到三方页面，因为中间跳转的这一步会导致部分用户弃单，转化率下降。根据我们自己的统计和与海外客户沟通来看得到的结论时尽量不要跳转，所以要把之前的三方改为俩方，即页面中嵌套 iframe 的方式。

1. 引入资源css/js/helper.html
2. 创建目标div
3. 执行setup

      Javascript的继承是基于原型的，之前理解的比较简单，直到最近在用 es5 写星级评分组件的时候遇到了些问题，解决之后理解深了一些。总结归纳，以便后用。

星级评分

原本的需求有俩个：

1. 根据后台返回的评价分数单纯进行5颗星的展示
2. 用户可以在5颗星上为商品进行打分，单击后上传

开始用最笨的方法，从业务出发很快速的把俩个需求都实现了。最后想着能不能利用继承来优化，方便后期扩展可以进行半星或者四分之一星评分。

具体效果如下：

利用原型分别实现满星与半星

变量

1. 声明不用，数据只使用一次或不使用就无需装到变量中

2. 变量命名，驼峰、简洁、易懂

3. 特定变量：

   1 2 3 4 5

   const MAX_INPUT_LENGTH = 8; if (value.length < MAX_INPUT_LENGTH) { // 一目了然，不能超过最大输入长度 .... }

4. 使用说明性的变量(即有意义的变量名)

        对于使用 vue 的同学来说，响应式、模版解析/渲染应该都很熟悉，vue 开发离不开这些特性。用了 vue 挺长时间了，写写总结。

响应式

创建一个普通的对象：

1
2
3
4
5

let t = {
    name: 't1'
    age: 19
}
console.log(t.age) // 19 那么如何监听age属性的访问与设置呢？

在es5中加入了一个api叫 Object.defineProperty,该api允许

本文为译文，原文地址：

Understanding the Virtual DOM

        我最近在写一些如何正确区分 dom 与 shadow dom 的文章。总的来说，dom 是HTML文档的基于对象的表示，以及操作该对象的接口。shadow dom 可以被认为是轻量级版本的 dom。它同样是以原生对象为基础的 html document，但是它并不是完整的。可能有些难懂，换一种说法来看，shadow dom 允许我们去将我们的 dom 划分的更小，更轻，可以跨文档使用。（这里作者想表达的意思是我们可以根据需要截取部分 dom 生成 vdom，而不用每次从 html 标签开始写 vdom 直到 html 标签闭合）

        另一个你可能遇到过的相似说法称 “shadow dom” 为 “virtual DOM”。尽管

之前也有 event loop 的概念，但一直都是琐碎的。直到阅读以下三篇文章后，琐碎的点串在了一起。

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

这一次，彻底弄懂 JavaScript 执行机制

Event Loop的规范和实现

为了印象深刻，还是决定自己写一写。总结如下：

1、进程与线程的区别

1、什么是进程？

在计算机操作系统中，只有进程才能在系统中运行。所以要使程序运行就必须为其创建进程。当我们打开浏览器时就已经创建了进程。创建进程之后，系统会为其分配资源(内存等)供其使用。

进程是程序（指令和数据）的真正运行实例。若干进程有可能 …

        
跨域、缓存这些都是开发中常常遇到的，做些笔记供日后查阅。

CORS（Cross-Origin Resource Sharing）跨源资源分享

同源策略

同源策略（same-origin policy）是浏览器保障安全的一种方法。
主要指的是在同协议，同域名，同端口下才能访问资源。为什么要这样限制？假设某用户登陆了自己的网上网上银行，接着去访问了其他网站，如果没有同源策略的限制，那么其他网站就可以访问银行网站的cookie，而cookie一般存放着与用户相关的某些信息，这样用户的信息就会被泄漏或者被冒名顶替去访问网上银行。

HTTP 基础

网络间通信的大体流程

osi 模型较为复杂，一般常说的是五层模型：

物理层 -> 数据链路层 -> 网络层 -> 传输层 -> 应用层