kerryChen95

怎样更快的让页面可见且可操作

讨论的前提条件：

1. head里的css文件体积较大，加载时间较长
2. 要求不仅能够尽快展现东西给用户（需要尽快加载、解析完相应的html+css），还要让用户能够尽快交互某些东西（在此以搜索框为例，需要尽快加载、解析完相应的html+js）
3. 对不支持预加载的浏览器

分析

kerryChen95

.foo:before {
  content: attr(data-line-number); // equal `content: 95`
}

kerryChen95

.hd, .ft {
  height: 20px;
  background-color: red;
}
.bd {
  overflow: hidden;
}
.bd::after {
  content: '';
  clear: both;

kerryChen95

.hd, .ft {
  height: 20px;
  background-color: red;
}
.bd {
  overflow: hidden;
}
.bd::after {
  content: '';
  clear: both;

kerryChen95

      .item { 
        margin-bottom: 20px;
        padding: 10px; 
        font-size: 0;
        border: 1px solid #efefef;
      }
      .item .pic , 
      .item .content {
        display: table-cell;
        *display: inline;

kerryChen95

Real undefined valued element

Way 1: in operator, and for...in loop

Due to indexes are not even defined for empty element, in operator return false.

var arr = new Array(5);
console.log(1 in arr); // false

arr[1] = undefined;

kerryChen95

var foo = 'foo';
console.log(this.foo); // 'foo'

In global execution context, declaring a variable means add a property to this

(function () {
  var bar = 'bar';
 console.log(this.bar); // undefined

kerryChen95

var objInGlobal = {
  a: 'a',
  b: 'b'
};

(function (baseTypeVar, referTypeVar, notPassedArg) {
  baseTypeVar = 2;
  console.log(baseTypeVar === arguments[0]); // true
 

kerryChen95

Array in JavaScript is actually object:

• automatically maintains indexed values and length property.
• its constructor is Array which provides some methods to be inherited, e.g. forEach.
• may use non-sequence memory since it's an object.

Array in C is different, it always uses sequence memory, at this point, it is real array.

So what it means?

kerryChen95

// example 1
(function () {
  console.log(typeof func); // 'function'
  function func () {}
  console.log(typeof func); // 'function'
})();


// example 2
(function () {