web基础笔记

浏览器渲染页面的过程

浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此，我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。

参考：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

ECMA Script 与 JavaScript

JavaScript = ECMA Script + DOM + BOM

分号

因为js是解释型的语言，解释器会逐行执行，所以分号不是必须的。

如果在别人的代码后增加内容，一个小trick是以分号开头，避免被前面的代码影响。

// 如：
a = b
(function(){
...
})()

// 会被解释为 a = b(function(){...})()
// 其实，本意应该是

a = b
;(function(){
...
})()

JavaScript 基本数据类型

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

var x = true; // x为布尔值

var cars = new Array(); // cars 是数组
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
cars[4] = "QQ";  // cars[3] = undefined

// person 是对象
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

js的阻塞加载

js脚本最好放在html的尾部，并且使用defer标签等手段，使js脚本在DOM完成后再生效。

1. js下载会阻塞网页的渲染，影响用户体验。
2. 资源的下载受网络延时影响，如果js下载完毕就执行，无法获取对应的DOM，会引发错误。

一个较为简单的解决办法：

window.onload=function(){
  document.getElementById("bg").style.backgroundColor="#F90";
}

js的闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

第一个匿名函数的关闭使得counter变量只能通过add() 访问。

js的闭包可以认为是在函数里面定义私有成员。