可视化格式模型

在可视化格式模型中，文档树中的每个元素会根据框模型（box model）产生零到多个框。

不解：根据框模型产生零到多个框，产生的框指的是什么？是box model中的content box、padding box、border box、margin box吗？如果是，那么在布局中应用的所谓“主要的框（principal box）”指的又是以上哪一个呢？
可能的解答：根据W3help：1. 元素生成的框会扮演它子孙元素包含块的角色；2. 元素定位为staitc或relative的元素，其包含块由离它最近的块级、table-cell和inline-block祖先元素的内容框创建。推断主要的框恐怕是元素的内容框（content box）。

这些框的布局被以下因素管理：

• 框的尺寸和类型
• 定位体系（常规流、浮动和绝对定位）
• 在文档树中元素之间的关系（比如一个块元素包含两个互为兄弟节点的浮动元素，后面那个浮动元素的布局会受前面元素以及它的包含块的影响）
• 外部因素（如viewport，即可视窗口的大小，图片的固有尺寸会影响行内替换性元素的尺寸，从而影响布局）

简单说，可视化格式模型的定义就是，文档树中的每个元素都会根据框模型产生零个到多个框，这些框的布局被我们所熟知的各种因素统治着。

不同类型的框

• 包含块（containing block）
• 块级元素（block-level element）
• 块元素（block element）
• 块级框（block-level box）、块容器框（block container box）、块框（block box）
• 行内级元素（inline-level element）
• 行内元素（inline element）
• 行内级框（inline-level box）、原子行内级框（atomic inline-level box）、行内框（inline box）
• 匿名框（anonymous box）

一直都知道margin塌陷可以用overflow/float或增加border/padding解决，却一直不知道overflow/float为什么可以解决这个问题。今天彻查了一下，发现这是和BFC相关的。

格式化上下文

提到BFC，首先从格式化上下文开始。在常规流中的框，都属于一个格式化的上下文中。这个上下文可能是块格式上下文，可能是行内格式上下文，但不可能同时是块格式上下文和行内格式上下文。

块框参与块格式上下文，行内框参与行内格式上下文。（之前不懂这句话，不觉得块框只参与块格式上下文，行内框只参与行内格式上下文，直到理解了匿名框：可视化格式模型和各种框。我的理解就是，不符合规范的框都被符合规范的框圈了起来。）

BFC（块格式化上下文）

BFC（Block Formatting Context），直译为块级格式化范围。

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

简单说，BFC就是一个独立的容器，这个容器完全隔离，容器里box的布局和容器外互不相关，既不会被容器外的元素影响，也不会影响到容器外的元素。

循环（O(n^2)）

普通对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function unique (arr) {
  var ans = []
  for (var i = 0; i < arr.length; i ++) {
    for (var j = 0; j < ans.length; j ++) {
      if (arr[i] === ans[j]) {
        break
      }
    }
    if (j == ans.length) {
      ans.push(arr[i])
    }
  }
  return ans
}
var a = [1, 1, 3, 2, 1, 2, 4, '1', {}, {}]
var ans = unique(a)
console.log(ans) // [ 1, 3, 2, 4, '1', {}, {} ]

publicPath

迷之总忘！Come on！让我们来记一下！
在生产环境中，静态资源（css、js、图片等）不一定会像开发环境一样，通过相对路径就可以取得。比如html放在一个位置，而js和css被迫放在另外的位置。此时，配置publicPath，会将改变对静态文件引入的路径。比如，你的静态文件放在cdn，publicPath就可以写为一个完整的地址，那么所有文件都会从这个地址取得。如publicPath为https://www.baidu.com，则取文件会变为http://www.baidu.com/main.css，静态文件取静态文件（比如css取图片）也会从这个路径获取。
将publicPath改为绝对路径同理。
publicPath默认是相对路径./，相对于index.html。如果部署到生产环境的目录结构与开发时没有任何不同，则不需要设置。

这样，也能看出publicPath和path的区别了。实际上，除了名字相似，并没有什么可见的联系。path是打包时，生成文件“放在哪里”的路径。而publicPath是引入打包出的文件时，判断“要从哪里引入”的路径。

盒模型在W3C和IE中的区别

IE盒模型问题只会出现在IE5.5及更早的版本。

W3c盒模型，width = content-width。设定好width后，增加padding等都会增加整体盒子的宽度。

IE盒模型，width = content-width + padding + border。设定好width后，增加padding会减少content-width的宽度，整体盒子的宽度不变。

EM

父元素也用em表示，子元素font-size如何计算：子元素以父元素font-size为基准，子元素1em等于父元素font-size大小。若子元素设为1.2em，实际px为1.2*1.2。

绝对定位，水平竖直居中，需要设定margin: auto的原因

水平竖直居中有一种写法，设定宽高，left、right、top、bottom都为0，margin为auto。

绝对定位的元素的布局取决于三个因素：元素的位置、元素的尺寸、元素的margin。

在元素位置固定的时候则分配尺寸（因此四边都为零会平铺满），尺寸固定则分配margin，此时margin设为auto自适应，元素就居中了。

浅复制和深复制

针对JS引用类型值（Object、Array），浅复制只复制原对象的一层属性，如果引用类型值中的一个值仍旧是引用类型值，会导致复制出的对象与原对象的这个值引用同一个地址。

深复制不仅将原对象的各个属性逐个复制，而且将原对象各个属性所包含的对象也采用深复制的方法递归复制到新对象上。

深复制递归实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function copyObj(obj) {
  if (obj.constructor == Array) {
    return obj.slice()
  }

  var newObj = {}
  for (var key in obj) {
    if (obj[key].constructor == Array || obj[key].constructor == Object) {
      newObj[key] = copyObj(obj[key])
    } else {
      newObj[key] = obj[key]
    }
  }
  return newObj
}

TCP

TCP三次握手

客户端端首先发送一个带SYN标志的数据包给对方。服务器端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。最后，客户端再回传一个带有ACK标志的数据包，代表握手结束。

若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

为什么不“两次握手”

发送端发出的第一个连接请求报文段并没有丢失，而是在某个网络节点长时间地滞留了，以至于延误到连接释放后的某个时间点才到达接收端。但接收端收到此失效的连接请求报文段后，会误认为是发送端再次发送的一个新的连接请求，就向发送端发出确认报文段，同意连接。假设不采用“三次握手”，新的连接就建立了。由于采用了“三次握手”，发送端不会理睬接收端的确认，不会发送ACK包，避免了失误。

与HTTP请求/响应关系

先进行TCP三次握手，建立TCP连接，然后发送HTTP请求，HTTP响应，完成后断开TCP连接。

DNS服务

DNS服务是和HTTP协议一样位于应用层的协议。它提供域名到IP地址之间的解析服务，通过域名查找IP地址，或通过IP地址反查域名。

article

article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

• 当元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中。
• 元素的作者信息可通过address元素提供，但是不适用于嵌套的article元素。
• article元素的发布日期和时间可通过time元素的pubdate属性表示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

1. 减少HTTP请求次数

尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发，图片亦然。

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

队列解法

简单说，就是建立一个队列，在调用eat、sleep等方法时将所有执行任务的函数推入队列，然后在下一个事件循环中才开始依次执行队列中的任务。

写的过程中注意到的点：

不太清楚原作者为什么不直接将函数推入队列，而是推入一个立即执行函数返回的函数。猜测他是想要利用闭包，外部函数执行完毕后，内部函数仍可访问到外部函数的变量，使得下一个事件循环执行队列中的函数时仍旧可以访问到传入的参数。但其实单单将函数推入队列也是将内部函数保留了下来，内部函数为该被推入的函数，外部函数为构造函数/原型中的sleep、eat等函数，也形成了闭包。

setTimeout(0)，主要看了以下链接的文章：http://www.cnblogs.com/silin6/p/4333999.html

JavaScript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。