1：javaScript入门

作者: jrg陈咪咪sunny | 来源:发表于2017-12-07 18:11 被阅读0次

如何异步加载脚本？

JavaScript脚本对现代网站来说是必不可少的。当用户访问站点，需要下载各种资源，例如JS脚本，CSS，图片，iframe等。

浏览器下载除JS外的资源时，会并行下载，以提高性能。但下载JS脚本时，会禁止并行下载（称为脚本阻塞Scripts Block Downloads）。浏览器遇到JS时，必须等JS下载，解析，执行完后，才能继续并行下载下一个资源。原因是JS可能会改变页面或改变JS间的依赖关系，例如A.js中用document.write改变页面，B.js依赖于A.js。因此要严格保证顺序，不能并行下载。

为了避免白屏，通常的建议是将JS放到<body>标签底下，可以有最佳的用户体验，你可以点击例子页面试一下。如果你放到了<body>标签的上部，因为脚本阻塞，可能会影响用户体验。例子中位于<body>上部的JS耗时2s，因此位于JS下面的两张img图片，会等2s后才开始加载。

异步处理外部脚本：（按推荐度从高到低排列）
Dynamic Script Element
Script async
Script defer
XHR Eval
XHR Inject
Script in iframe
直接写入HTML
document.write Script

忙指示器
异步处理外部脚本总结
异步处理行内脚本

ES3、ES5、ES6分别指什么？


ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。 强大的正则表达式，更好的文字链处理，新的控制指令，异常处理，错误定义更加明确，数输出的格式化及其它改变。

什么是ES5

作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。

    strict模式

严格模式，限制一些用法，'use strict';

    Array增加方法

增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法

PS： 还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

    Object方法
    Object.getPrototypeOf
    Object.create
    Object.getOwnPropertyNames
    Object.defineProperty
    Object.getOwnPropertyDescriptor
    Object.defineProperties
    Object.keys
    Object.preventExtensions / Object.isExtensible
    Object.seal / Object.isSealed
    Object.freeze / Object.isFrozen
    PS：只讲有什么，不讲是什么。
    什么是ES6

ECMAScript6在保证向下兼容的前提下，提供大量新特性，目前浏览器兼容情况如下：

ES6特性如下：

1.块级作用域 关键字let, 常量const

2.对象字面量的属性赋值简写（property value shorthand）

var obj = {
// proto
proto: theProtoObj,
// Shorthand for ‘handler: handler’
handler,
// Method definitions
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names

[ 'prop_' + (() => 42)() ]: 42

};

3.赋值解构

let singer = { first: "Bob", last: "Dylan" };
let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan"
let [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2015-10-25");
let [x, y] = [1, 2, 3]; // x = 1, y = 2

4.函数参数 - 默认值、参数打包、 数组展开（Default 、Rest 、Spread）

//Default
function findArtist(name='lu', age='26') {
...
}

//Rest
function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6

//Spread
function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

5.箭头函数 Arrow functions

(1).简化了代码形式，默认return表达式结果。

(2).自动绑定语义this，即定义函数时的this。如上面例子中，forEach的匿名函数参数中用到的this。

6.字符串模板 Template strings

var name = "Bob", time = "today";
Hello ${name}, how are you ${time}?
// return "Hello Bob, how are you today?"

    Iterators（迭代器）+ for..of

迭代器有个next方法，调用会返回：

(1).返回迭代对象的一个元素：{ done: false, value: elem }

(2).如果已到迭代对象的末端：{ done: true, value: retVal }

for (var n of ['a','b','c']) {
console.log(n);
}
// 打印a、b、c

8.生成器 （Generators）

9.Class

Class，有constructor、extends、super，但本质上是语法糖（对语言的功能并没有影响，但是更方便程序员使用）。

class Artist {
constructor(name) {
this.name = name;
}

perform() {
    return this.name + " performs ";
}

}

class Singer extends Artist {

constructor(name, song) {
    super.constructor(name);
    this.song = song;
}

perform() {
    return super.perform() + "[" + this.song + "]";
}

}

let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true

james.perform(); // "Etta James performs [At last]"

10.Modules

ES6的内置模块功能借鉴了CommonJS和AMD各自的优点：

(1).具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点。

(2).类似AMD，支持异步加载和可配置的模块加载。

// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

Module Loaders:
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
alert("2π = " + m.sum(m.pi, m.pi));
});

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

11.Map + Set + WeakMap + WeakSet

四种集合类型，WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉。

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

12.Math + Number + String + Array + Object APIs

一些新的API

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior

[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

    Proxies

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情。

var target = {};
var handler = {
get: function (receiver, name) {
return Hello, ${name}!;
}
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

可监听的操作： get、set、has、deleteProperty、apply、construct、getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf、enumerate、ownKeys、preventExtensions、isExtensible。

14.Symbols

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。

var key = Symbol("key");
var key2 = Symbol("key");
key == key2 //false

15.Promises

Promises是处理异步操作的对象，使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观（类似jQuery的deferred 对象）。

function fakeAjax(url) {
return new Promise(function (resolve, reject) {
// setTimeouts are for effect, typically we would handle XHR
if (!url) {
return setTimeout(reject, 1000);
}
return setTimeout(resolve, 1000);
});
}

// no url, promise rejected
fakeAjax().then(function () {
console.log('success');
},function () {
console.log('fail');
});

解释浏览器的渲染机制


解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成 渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting)

1、解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 -- 内容树。
2、构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
3、布局渲染树: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4、绘制渲染树: 遍历渲染树，每个节点将使用UI后端层来绘制。

repaint 和 reflow 分别指什么


对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
可见这两个东东对浏览器渲染页面是很重要的啊，都是会影响性能的，因此我们需要了解一些常见的会引起repaint和reflow的一些操作，并且应该尽量减少以提高渲染速度。

解释白屏和 FOUC。


两者是因为不同浏览器的加载顺序不同或者JS阻塞造成的
白屏：

如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏

FOUC：

如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象。

【动手题】把视频里关于白屏和无样式内容删除的测试代码下载到本地，动手演示白屏和FOUC 效果。

GitHub 代码：https://github.com/jirengu-inc/whitescreen-fouc-test

简单介绍 JavaScript的发展历史。

JavaScript历史：

　　JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。

　　JavaScript 1.0获得了巨大的成功，Netscape随后在Netscape Navigator 3（网景浏览器）中发布了JavaScript 1.1。之后作为竞争对手的微软在自家的IE3中加入了名为JScript（名称不同是为了避免侵权）的JavaScript实现。而此时市面上意味着有3个不同的JavaScript版本，IE的JScript、网景的JavaScript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本不同暴露的问题日益加剧，JavaScript的规范化最终被提上日程。

　　1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）该协会指定39号技术委员会负责将其进行标准化，TC39来此各大公司以及其他关注脚本语言发展的公司的程序员组成，经过数月的努力完成了ECMA-262——定义了一种名为ECMAScript的新脚本语言的标准。第二年，ISO/IEC（国标标准化组织和国际电工委员会）也采用了ECMAScript作为标准（即ISO/IEC-16262）。

介绍浏览器的渲染机制。


解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成 渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting)

样式、JS 在 HTML 中如何放置？


用 link 标签将样式表放在顶部
将JS放在底部
    脚本会阻塞后面内容的呈现
    脚本会阻塞其后组件的下载

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.
HTML放在body当中。

JavaScript 定义了几种数据类型？哪些是原始类型？哪些是复杂类型？


JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值）

数值（number）：整数和小数（比如1和3.14）
字符串（string）：字符组成的文本（比如"Hello World"）
布尔值（boolean）：true（真）和false（假）两个特定值
undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
null：表示无值，即此处的值就是“无”的状态。
对象（object）：各种值组成的集合

通常，我们将数值、字符串、布尔值称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。

对象又可以分成三个子类型。

狭义的对象（object）
数组（array）
函数（function）

如何判断一个变量是否是数字、字符串、布尔、函数？


用typeof检测变量类型：
1.typeof (变量)；
2.功能：检测变量类型；
3.返回值：有可能，string, number, boolean, object, undefined, function;

Object.prototype.toString()也行哦

1：javaScript入门

如何异步加载脚本？

ES3、ES5、ES6分别指什么？

解释浏览器的渲染机制

repaint 和 reflow 分别指什么

解释白屏和 FOUC。

简单介绍 JavaScript的发展历史。

介绍浏览器的渲染机制。

样式、JS 在 HTML 中如何放置？

JavaScript 定义了几种数据类型？哪些是原始类型？哪些是复杂类型？

如何判断一个变量是否是数字、字符串、布尔、函数？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1：javaScript入门

如何异步加载脚本？

ES3、ES5、ES6分别指什么？

解释浏览器的渲染机制

repaint 和 reflow 分别指什么

解释白屏和 FOUC。

简单介绍 JavaScript的发展历史。

介绍浏览器的渲染机制。

样式、JS 在 HTML 中如何放置？

JavaScript 定义了几种数据类型？ 哪些是原始类型？哪些是复杂类型？

如何判断一个变量是否是数字、字符串、布尔、函数？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaScript 定义了几种数据类型？哪些是原始类型？哪些是复杂类型？