嗯，又是纪录几个小的知识点

Hash maps without side effects

简单的来说，当我们用对象字面量 {} 来创建这个 hash 表时，他会默认从 Object 继承属性，这等同于 Object.create(Object.prototype) , 这么来创建的话，就会有脏数据，因为其实你只是需要一个 map 而已。并且在 for in 的时候，还需要使用 hasOwnProperty 来判断。

但如果使用 Object.create(null), 我们明确的指定其原型为 null, 因此他才是真正的没有构造器，没有 toString(), hasOwnProperty, valueOf 等。注意这里不要使用 Object.create({}),这个效果跟前面是一样的。

const dirtyMap = {};
const cleanMap = Object.create(null);

dirtyMap.constructor    // function Object() { [native code] }

cleanMap.constructor    // undefined

// Iterating maps

const key;
for(key in dirtyMap){
  if (dirtyMap.hasOwnProperty(key)) {   // Check to avoid iterating over inherited properties.
    console.log(key + " -> " + dirtyMap[key]);
  }
}

for(key in cleanMap){
  console.log(key + " -> " + cleanMap[key]);    // No need to add extra checks, as the object will always be clean
}

angular 双向绑定和 vue双向绑定

AngularJS 采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

移动端调试- eruda

eruda 类似于小程序的 console 控制台。但是比小程序的更好，他还可以看 network,cookies,localStorage 这些都可以显示出来，非常的方便。用法也很方便。引入文件，init下就可以了。如果觉得引入了多余的文件，生产环境去掉就行。 github 地址是：eruda

1 2	<script src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init();</script>

编译和解释的区别

编译器

编译器是一种计算机程序，负责把一种编程语言编写的源码转换成另外一种计算机代码，后者往往是以二进制的形式被称为目标代码(object code)。这个转换的过程通常的目的是生成可执行的程序。

编译器需要产出另外一个代码。他往往是执行前的一步，产出可执行或者再需要编译的代码。

解释器

解释器是一种计算机程序，它直接执行由编程语言或脚本语言编写的代码，并不会把源代码预编译成机器码。一个解释器，通常会用以下的姿势来执行程序代码：分析源代码，并且直接执行。把源代码翻译成相对更加高效率的中间码，然后立即执行它。执行由解释器内部的编译器预编译后保存的代码

可以把解释器看成一个黑盒子，我们输入源码，它就会实时返回结果。

总结起来可以像下面这样理解：
编译 Compile：把整个程序源代码翻译成另外一种代码，然后等待被执行，发生在运行之前，产物是「另一份代码」。

解释 Interpret：把程序源代码一行一行的读懂然后执行，发生在运行时，产物是「运行结果」。

Javascript Style Guide

最近看到了一个我觉得很合理的 Javascript 的规范指南。 github 地址是： Airbnb Javascript Style Guide 可以利用他的 eslint 规范自己的代码。我觉得不错。

Google PageSpeed Insights

想要快速提高网站的性能，用这个网站非常好。他会给你详细的分析，根据网页的代码质量得出报告。开发者根据这个报告，进行调整。除了这个外，使用 WebPagetest 也是很好的。

什么是关键 CSS

对CSS文件的请求可以显著增加网页呈现所需的时间。原因是默认情况下，浏览器将延迟页面呈现，直到它完成加载、解析和执行所有在“页面”中引用的CSS文件。这样做是因为它需要计算页面的布局。

不幸的是，这意味着如果我们有一个非常大的CSS文件，并且需要一段时间才能完成下载，我们的用户将在浏览器开始呈现页面之前等待整个文件被下载下来。幸运的是，有一个巧妙的技术，使我们能够优化我们的CSS的传输并减轻阻塞。这种技术被称为优化关键渲染路径。关键渲染路径表示浏览器呈现页面的所有必须步骤。我们想要找到最小的阻塞CSS集合，或者关键 CSS，以使页面显示给用户。关键资源是可能阻塞页面首屏呈现的所有资源。这背后的想法是，网站应该在前几个TCP数据包响应中为用户获取第一个屏幕的内容（或“首屏”内容）。

人工去找关键 CSS，当然不太方便，现在出来了很多的工具，可以帮助我们提取出关键CSS，比如 grunt 这类工具来提取。只是单纯的好奇什么是关键 CSS，但是我已经好久没有写过 CSS 了。

解决个 http 缓存的困惑

访问百度首页的时候，为什么刷新页面后，静态资源都是返回 200， from cache? 有的人问，from cache 不是返回 304 才合理吗？

其实不是的，百度首页再资源在刷新后实际没有发送任何请求，因为 caache-control 的缓存时间还没到期，也就是在 chrome 中根本没有发送请求。只要是 chrome 没有发送请求，资源从本地读取，都会在 network 中显示状态为 200， from cache, 其中的 response 只是上一次回包留下的数据。如果 cache-control 的缓存到期了，然后发了请求到服务器，但是服务器通过 etag 等，发现资源没改变，这时候肯定就是返回 304 了。不要被绕道坑里了。

总结

开始工作了以后，基本上都是零零散散的学习。有些东西想要系统的写成博客，但是基本上一篇精心想写的文章，要花至少3个小时，时间略不够。我会想办法解决。比如上面的双向绑定，想仔细的写篇文章说说里面的原理，再比如 http 缓存。