Minibase

阅读《高性能JavaScript》(下)
Oct 3, 2016

接前四节的总结

5.字符串和正则表达式
字符串构建原理
str += 'one' + 'two'

这行代码运行时会经历四个步骤：

1.在内存中创建一个临时字符串
2.链接后的字符串 ‘onetwo’ 被赋值给该临时字符串
3.临时字符串与 str 当前值连接
4.结果赋给 str

...more
阅读《高性能JavaScript》(上)
Sep 26, 2016
这篇只包含前四章节。

1.加载与执行
浏览器使用单一进程来处理用户界面UI刷新和JavaScript脚本执行。脚本执行过程中会阻塞页面渲染。

减少脚本执行对性能影响的方法：
- 把所有 <script> 标签尽可能放到 <body> 标签底部。
- 合并脚本，减少HTTP请求带来的额外性能开销。
- 无阻塞下载执行JavaScript脚本：
  - <script> 的 defer 属性可以使脚本下载后先不执行，老版本浏览器不支持
  - 书中未提到的 HTML5 async 属性可以使脚本异步加载执行
  - 使用XHR对象动态加载脚本
...more

一些关于 fetch api 的基本设定

Aug 22, 2016

长久以来，我们一直都通过XMLHttpRequest(XHR)来执行异步请求，但它有很多缺陷与不便之处，W3C官方则推出了新的api Fetch来替换它。

XMLHttpRequest的缺陷

先看一个典型的XHR例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
  console.log(xhr.response);
};
xhr.onerror = function() {
  console.log("Booo");
};
xhr.send();

可以看出，XHR是基于事件的异步模型，在设计上不符合分离原则，输入、输出和用事件来跟踪的状态混杂在一个对象里。我们必须创建实例来发送请求。相比于ES6发布的Promise，Generator，基于事件的模型是非常落后难用的。

...more

关于浏览器缓存
Jul 18, 2016
浏览器缓存就是将web资源保存在本地，就不用再每次都向服务器请求相同的资源。当下一个请求发起，如果是同样的url，浏览器会根据缓存机制来决定是读取本地的内容还是向服务器发送请求。显而易见，浏览器缓存可以减少带宽消耗，加快用户的访问速度同时减轻服务器压力。

浏览器的缓存机制主要分为两种，http协议定义的缓存机制和非http协议定义的缓存机制。后者主要通过在html文件中设置meta标签来实现。

与缓存相关的首部字段
...more
避免脏pr：使用git rebase避免无谓的merge
Jun 9, 2016
问题复现与解决
在团队开发中，由于git使用的不够合理规范，开pr之后就会发现其中掺杂着若干merge的commit:

事实上我们本地的branch和远端的branch会同步地非常频繁，这两个分支几乎完全同步，所以以上的merge动作是没有必要的。并且如果一个pr中存在merge，那么pr的files changed中就会看到merge目标的代码。这会给代码 Review 的工作代码困扰。因为代码reviewm时通常是看一个pr修改了哪些代码，现在pr中满是merge目标的代码，是没办法review的。

想要解决这个问题的关键是永远不要merge主分支，而是rebase主分支。
...more
How does data binding work in AngularJS
Jun 5, 2016
AngularJS可以记住value值并且会把它和之前的value值进行比较。这就是基本的脏检查机制。如果某处的value值发生了变化，那么AngularJS就会触发指定事件。

$apply()这个方法是用来处理AngularJS框架之外的表达式的，与它相辅相成的还有$digest()方法。一次digest就是一次完全的脏检查，它可以运行在所有的浏览器中。

关于$watch
每一次你在UI中绑定什么东西时你就会往$watch的队列中插入一条$watch，想象一下$watch就是在所监测的model中可以侦查数据变化的东西。比如说：
1
2
User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />
在这里我们分别给两个input绑定了$scope.user和$scope.pass，就是说我们向$watch队列添加了两个$watch。
...more
Viewport-Percentage (or Viewport-Relative) Lengths
Mar 17, 2016
什么是视区百分比长度（viewport-percentage lengths）？
先看一下W3C给出的定义：

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

意为视区百分比长度是与其包含块的尺寸有关，并且是随之变化的。initial containing block意为浏览器内部的可视区域，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
...more
[译]JavaScript最佳实践：提高代码质量的技巧和建议
Mar 13, 2016
原文地址：https://www.codementor.io/javascript/tutorial/javascript-best-practices

每天学习新知识可以让我们变成一个更优秀更理性的人。作为一名开发者，持续学习也是我们工作的一部分，无论如何，这些新知识的学习过程都是积极有益的经验积累。

在这篇教程中，我会提出一些JavaScript的最佳实践，你就不会觉得学习起来很困难了。准备好了就来一起升级你的代码吧！

1.避免污染全局作用域
声明变量的过程中有很多有趣的地方。有的时候，你可能在不知情的情况下却声明了一个全局变量。在现代浏览器中，全局变量会被储存在window对象中，因此会有很多内容运行在其中，你不知情声明的全局变量可能会覆盖掉一些默认值。
...more
Cookie, LocalStorage 与 SessionStorage
Mar 10, 2016
有关Cookie, LocalStorage 与 SessionStorage的基本概念，区别，共同点，各自的应用场景。

基本概念
Cookie
Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递，是随HTTP请求一起被传递的额外数据。主要用途有保存登陆信息，大多数浏览器支持最大为 4096 字节的 Cookie

localStorage
localStorage 是 HTML5 标准中新加入的技术,大小限制在500万字符左右，各个浏览器不一致。永久有效，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。
...more
有关闭包，作用域，this对象
Jan 2, 2016
首先看一下维基百科中，闭包的概念：

在计算机科学中，闭包（也称词法闭包或函数闭包）是指一个函数或函数的引用，与一个引用环境绑定在一起。这个引用环境是一个存储该函数每个非局部变量（也叫自由变量）的表。
闭包，不同于一般的函数，它允许一个函数在立即词法作用域外调用时，仍可访问非本地变量。

在创建函数和调用函数时，都发生了什么
- 创建函数时
  1. 创建了预先包含全局变量对象的作用域链
  2. 该作用域链保存在内部[[scope]]属性中
- 调用函数时
  1. 创建执行环境
  2. 复制函数[[scope]]属性中的对象构建作用域链
  3. 用arguments与其它形参初始化函数的活动对象
...more

5.字符串和正则表达式

字符串构建原理

1.加载与执行

XMLHttpRequest的缺陷

与缓存相关的首部字段

问题复现与解决

关于$watch

什么是视区百分比长度（viewport-percentage lengths）？

1.避免污染全局作用域

基本概念

Cookie

localStorage

首先看一下维基百科中，闭包的概念：

在创建函数和调用函数时，都发生了什么