其实这类题的目的很清楚，即考察：

• 数组方法的基础知识
• 数值转换方法的基础知识

也就是考察基础知识的扎实程度，换句话说这是一道基础题。

map()、filter()、reduce() 等数组方法

说明一下：map()、filter() 是 ES5 为数组定义的迭代方法， reduce() 是 ES5 为数组定义的归并方法。这些方法并不是 ES6 新增的语法（之前在一场面试中，面试官很肯定的说这是 ES6 新增的方法）。

• 你可以在 《JavaScript 高级程序设计-第三版》 96-97 页中看到明确的说明。

语法:

  array.filter(callback[,thisObject]);
  // array.map(callback[,thisObject]);
  // array.reduce(callback[,initialValue])

都不会改变原始数组。

参数：

  callback：要对每个数组元素执行的回调函数。
  thisObject：在执行回调函数时定义的 this 对象(没有传递或者为 null，将会使用全局对象)。
  // initialValue: 作为第一次调用 callback 函数时的第一个参数的值。
 

map()

对原数组中的每个元素按顺序执行一次指定的函数（即 callback），callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

回调函数可以有三个参数：当前元素，当前元素的索引 [可选] 和当前的数组对象 [可选] 。

filter()

对原数组中的每个元素执行一次指定的函数（即 callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。

回调函数可以有三个参数：当前元素，当前元素的索引 [可选] 和当前的数组对象 [可选] 。

reduce()

对原数组中的每个元素执行一次指定的函数（即 callback），返回最后一次回调返回值。

回调函数可以有四个参数：累计器，当前元素，当前元素的索引 [可选] 和当前的数组对象 [可选] 。

提醒：reduce() 区别于 map()/filter() 的地方就在回调函数的第一个参数 - accumulator：累计器。

parseInt()、parseFloat() 两个数值转换方法

parseInt 语法

  parseInt(string, radix)  

将一个字符串 string 转换为 radix（值默认为 10） 进制的整数，radix 为介于 2-36 之间的数。

注意：string 将看作是一个数的 n 进制表示，返回的值为十进制。

返回值：

• 如果被解析参数的第一个字符无法被转化成数值类型，则返回 NaN
• 如果 radix 小于 2 或者大于 36，则返回 NaN

在 radix 为 undefined，或者 radix 为 0 或者没有指定的情况下，JavaScript 作如下处理：

• 如果字符串 string 以"0x"或者"0X"开头, 则 radix 是 16 (16进制).
• 如果字符串 string 以"0"开头, radix 是8（八进制）或者10（十进制），具体值由实现环境决定。ECMAScript 5 规定使用 10，但是并不是所有的浏览器都遵循这个规定。因此，永远都要明确给出 radix 参数的值
• 如果字符串 string 以其它任何值开头，则 radix 是 10 (十进制)。

parseFloat 语法

  parseFloat(string)

只有一个参数，用作将给定值解析成浮点数（如果给定值不能被转换成数值，则会返回 NaN）。

解释 arr.filter(parseInt)

其实以上的过程就很好地解析了这个问题，此类问题只要理解基本方法的传参就不会出错了，而且不需要强记['1', '2', '3'].map(parseInt)的结果。

let arr = [2,0,11,10];
arr.filter(parseInt);

// arr.map(parseInt); // [2, NaN, 3, 3]

1、首先 arr 的每个元素执行一次 parseInt，传入 parseInt 的参数就是当前元素和当前元素的索引。

2、经历如下过程：

- parseInt(2,0)   // 结果为 2，转成 Boolean 为 true
- parseInt(0,1)   // 结果为 NaN，转成 Boolean 为 false
- parseInt(11,2)  // 结果为 3，转成 Boolean 为 true
- parseInt(10,3)  // 结果为 3，转成 Boolean 为 true

所以最后返回 [2, 11, 10]。

代码已上传至 GitHub 【https://github.com/wanqihua/blog】，感兴趣的可以 clone 代码到本地运行。

入题

需求给出的 UI 样式如下：

UI 的需求是雪花下落的方向有点倾斜角度，每片雪花的下落速度不一样但要保持在一个范围内。

需求了解的差不多就开始实现这个效果（在看这篇文章之前你需要对 canvas 的一些基本 API 了解）。

drawImage

drawImage 可传入 9 个参数，上图中的 5 个参数是比较常用的，另外几个参数是拿来剪切图片的。

直接使用 drawImage 来剪切图片，其性能不会太好，建议先将需要使用的部分用一个离屏 canvas 保存起来，需要用到的时候直接使用即可。

requestAnimationFrame

requestAnimationFrame 相对于 setinterval 处理动画有以下几个优势：

1. 经过浏览器优化，动画更流畅
2. 窗口没激活时，动画将停止，节省计算资源
3. 更省电，尤其是对移动终端

这个 API 不需要传入动画间隔时间，这个方法会告诉浏览器以最佳的方式进行动画重绘。

由于兼容性问题，可以使用以下方法对 requestAnimationFrame 进行重写：

window.requestAnimationFrame = (function(){
        return  window.requestAnimationFrame       || 
                window.webkitRequestAnimationFrame || 
                window.mozRequestAnimationFrame    || 
                window.oRequestAnimationFrame      || 
                window.msRequestAnimationFrame     || 
                function (callback) {
                    window.setTimeout(callback, 1000 / 60); 
                };
    })();

对于其他 API 烦请查阅文档。

第一次尝试

有一个大概想法后就开心的开始写代码了，基本思路就是使用 requestAnimationFrame 来刷新 canvas 画板。

由于雪花不规则，所以雪花是 UI 提供的图片，既然是图片我们就需要先将图片预加载好，要不然在转换图片的时候很可能影响性能。

使用的预加载方法如下：

function preloadImg(srcArr){
    if(srcArr instanceof Array){
        for(let i = 0; i < srcArr.length; i++){
            let oImg = new Image();
            oImg.src = srcArr[i];
        }
    }
}

前前后后写了一个下午，算是写好了，在手机上查看的效果发现很是卡顿。100 片雪花 FPS 尽然平均才 40 多。而且在某些机型会出现都懂得情况。

要是产品看到这个效果，恐怕是又要召集相关人员开相关会议了。这么卡顿肯定是写了些开销大的代码，于是乎需要第二次尝试。

晚上还是需要按时下班的。不过下班回家后也不能闲着，开始找相关的资料，以便第二天快速的完成。

第二次尝试前的准备

经过一个晚上的查找学习，大概知道了以下几个优化 canvas 性能的方法：

1. 使用多层画布绘制复杂场景

分层的目的是降低完全不必要的渲染性能开销。

即：将变化频率高、幅度大的部分和变化频率小、幅度小的部分分成两个或两个以上的 canvas 对象。也就是说生成多个 canvas 实例，把它们重叠放置，每个 Canvas 使用不同的 z-index 来定义堆叠的次序。

<canvas style="position: absolute; z-index: 0"></canvas>
<canvas style="position: absolute; z-index: 1"></canvas>
// js 代码

2. 使用 requestAnimationFrame 制作动画

上面有提到。

3. 清除画布尽量使用 clearRect

一般情况下的性能：clearRect > fillRect > canvas.width=canvas.width;

4. 使用离屏绘制进行预渲染

当时用 drawImage 绘制同样的一块区域：

1. 若数据源（图片、canvas）和 canvas 画板的尺寸相仿，那么性能会比较好；
2. 若数据源只是大图上的一部分，那么性能就会比较差；因为每一次绘制还包含了裁剪工作。

第二种情况我们就可以先把待绘制的区域裁剪好，保存在一个离屏的 canvas 对象中。在绘制每一帧的时候，在将这个对象绘制到 canvas 画板中。

drawImage 方法的第一个参数不仅可以接收 Image 对象，也可以接收另一个 Canvas 对象。而且，使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。

当每一帧需要调用的对象需要多次调用 canvasAPI 时，我们也可以使用离屏绘制进行预渲染的方式来提高性能。

即：

let cacheCanvas = document.createElement("canvas");
let cacheCtx = this.cacheCanvas.getContext("2d");

cacheCtx.save();
cacheCtx.lineWidth = 1;
for(let i = 1;i < 40; i++){
    cacheCtx.beginPath();
    cacheCtx.strokeStyle = this.color[i];
    cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);
    cacheCtx.stroke();
}
this.cacheCtx.restore();

// 在绘制每一帧的时候，绘制这个图形
context.drawImage(cacheCtx, x, y);

cacheCtx 的宽高尽量设置成实际使用的宽高，否则过多空白区域也会造成性能的损耗。

下图显示了使用离屏绘制进行预渲染技术所带来的性能改善情况：

5. 尽量少调用 canvasAPI ，尽可能集中绘制

如下代码：

for (var i = 0; i < points.length - 1; i++) {
    var p1 = points[i];
    var p2 = points[i + 1];
    context.beginPath();
    context.moveTo(p1.x, p1.y);
    context.lineTo(p2.x, p2.y);
    context.stroke();
} 

可以改成：

context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
    var p1 = points[i];
    var p2 = points[i + 1];
    context.moveTo(p1.x, p1.y);
    context.lineTo(p2.x, p2.y);
}
context.stroke();

tips: 写粒子效果时，可以使用方形替代圆形，因为粒子小，所以方和原看上去差不多。有人问为什么？很容易理解，画一个圆需要三个步骤：先 beginPath，然后用 arc 画弧，再用 fill。而画方只需要一个 fillRect。当粒子对象达一定数量时性能差距就会显示出来了。

6. 像素级别操作尽量避免浮点运算

进行 canvas 动画绘制时，若坐标是浮点数，可能会出现 CSSSub-pixel 的问题.也就是会自动将浮点数值四舍五入转为整数，在动画的过程中就可能出现抖动的情况，同时也可能让元素的边缘出现抗锯齿失真情况。

虽然 javascript 提供了一些取整方法，像 Math.floor， Math.ceil， parseInt，但 parseInt这个方法做了一些额外的工作（比如检测数据是不是有效的数值、先将参数转换成了字符串等），所以，直接用 parseInt 的话相对来说比较消耗性能。

可以直接用以下巧妙的方法进行取整：

function getInt(num){
    var rounded;
    rounded = (0.5 + num) | 0;
    return rounded;
}

另 for 循环的数组效率是最高的，具体感兴趣的可以自行实验。

第二次尝试

通过昨天晚上的查阅，对这个动画做了以下几点优化:

1. 使用离屏绘制进行预渲染
2. 减少部分 API 的使用
3. 浮点数取整
4. 缓存变量
5. 使用 for 循环，替代 forEach
6. 将整体代码使用原型链方式改写了一遍

方案写好了就开始愉快的写代码了。

200 片雪花的时候 FPS 基本稳定在 60，而且抖动的情况也没了；
增加到 1000 片的时候， FPS 还是基本稳定在 60；
增加到 1500 片的时候，稍微有点零星的卡帧；
增加到 2000 片的时候，开始卡顿。

这说明这个动画还是没有优化好，还有优化空间，请各位大佬不吝指教。

推荐使用 stats.js 插件，这个插件可以显示动画运行时的 FPS。

主要代码

let snowBox = function () {
    let canvasEl = document.getElementById("snowFall");
    let ctx = canvasEl.getContext('2d');
    canvasEl.width = window.innerWidth;
    canvasEl.height = window.innerHeight;
    let lineList = []; // 雪的容器
    let snow = function () {
        let _this = this;
        _this.cacheCanvas = document.createElement("canvas");
        _this.cacheCtx = _this.cacheCanvas.getContext("2d");
        _this.cacheCanvas.width = 10;
        _this.cacheCanvas.height = 10;
        _this.speed = [1, 1.5, 2][Math.floor(Math.random()*3)];                // 雪花下落的三种速度，便于取整
        _this.posx = Math.round(Math.random() * canvasEl.width);               // 雪花x坐标
        _this.posy = Math.round(Math.random() * canvasEl.height);              // 雪花y坐标
        _this.img = `./img/snow_(${Math.ceil(Math.random() * 9)}).png`;        // img
        _this.w = _this.getInt(5 + Math.random() * 6);
        _this.h = _this.getInt(5 + Math.random() * 6);
        _this.cacheSnow();
    };

    snow.prototype = {
        cacheSnow: function () {
            let _this = this;
            // _this.cacheCtx.save();
            let img = new Image();   // 创建img元素
            img.src = _this.img;
            _this.cacheCtx.drawImage(img, 0, 0, _this.w, _this.h);
            // _this.cacheCtx.restore();
        },
        fall: function () {
            let _this = this;
            if (_this.posy > canvasEl.height + 5) {
                _this.posy = _this.getInt(0 - _this.h);
                _this.posx = _this.getInt(canvasEl.width * Math.random());
            }
            if (_this.posx > canvasEl.width + 5) {
                _this.posx = _this.getInt(0 - _this.w);
                _this.posy = _this.getInt(canvasEl.height * Math.random());
            }
            // 如果雪花在可视区域
            if (_this.posy <= canvasEl.height || _this.posx <= canvasEl.width) {
                _this.posy = _this.posy + _this.speed;
                _this.posx = _this.posx + _this.speed * .5;
            }
            _this.paint();
        },
        paint: function () {
            ctx.drawImage(this.cacheCanvas, this.posx, this.posy)
        },
        getInt: function(num){
            let rounded;
            rounded = (0.5 + num) | 0;
            return rounded;
        }
    };

    let control;
    control = {
        start: function (num) {
            for (let i = 0; i < num; i++) {
                let s = new snow();
                lineList.push(s);
            }
            (function loop() {
                ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
                for (let i = 0; i < num; i++) {
                    lineList[i].fall();
                }
                requestAnimationFrame(loop)
            })();
        }
    };
    return control;
}();

window.onload = function(){
    snowBox.start(2000)
};

建议从 GitHub clone 代码到本地运行。

后话

这篇文章虽然说是关于 canvas 动画的性能优化。一些大佬也已经看出，其他方面的性能优化方案和这个大抵相同，无非是：

1. 减少 API 的使用
2. 使用缓存（重点）
3. 合并频繁使用的 API
4. 避免使用高耗能的 API
5. 用 webWorker 来处理一些比较耗时的计算
6. ……

希望这篇文章可以在性能优化方面给你作一个参考。

其实 F5 和 Ctrl+F5 使用的频率是很高的，可是在使用的时候有没有想过 F5 和 Ctrl+F5 的区别是什么？这篇文章会将 F5 和 Ctrl+F5 刷新页面的原理讲清楚。通过这篇小文，即便是对浏览器缓存机制加深一点点的认知，也是有所裨益的。

入题

下图是我们第一次打开掘金的 Network 界面，由于是第一次打开，所以全部资源是从服务器请求的， Status 都是 200。

接下来我们按一下 F5，看看效果；

发现静态资源的 Size 都是 fromdisk cache；说明此时的静态资源是从缓存中取的。具体为什么 Size 是 fromdisk cache 我先按下不表。我先来说说 size 选项的 4 种情况。

size 选项的 4 种情况

1. 资源的大小
2. from disk cache
3. from memory cache
4. from ServiceWorker

from memory cache

表示此资源是取自内存，不会请求服务器。已经加载过该资源且缓存在内存当中；关闭该页面此资源就被内存释放掉了，再次打开相同页面时不会出现 frommemory cache 的情况。

from disk cache

表示此资源是取自磁盘，不会请求服务器。已经在之前的某个时间加载过该资源，但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会 fromdisk cache。

资源本身大小数值

当 http 状态为 200 是实实在在从浏览器获取的资源，当 http 状态为 304 时该数字是与服务端通信报文的大小，并不是该资源本身的大小，该资源是从本地获取的。

from ServiceWorker

表示此资源是取自 fromServiceWorker。

现在我们再按下 Ctrl+F5，看看效果。

发现 Size 显示的又是资源自身的大小，说明 Ctrl+F5 后的资源又是重新从服务器中请求得到的。

F5 同 Ctrl+F5 的区别

为什么 F5 后请求的是缓存，而 Ctrl+F5 就重新请求资源呢？答案就是这两种方式发送的请求头不一样（不同的浏览器发送的请求头也有一些区别）。

F5

在 chrome 浏览器中按 F5 后，看到资源的请求头中有 provisional headers are show 字样。这是为什么呢？

原因：未与服务端正确通信。该文件是从缓存中获取的并未进行通信，所以详细标头并不会显示。强缓存 fromdisk cache 或者 frommemory cache ，都不会正确的显示请求头。

下面看看按 F5 后在 firefox 浏览器中的表现。

从图中可以看出返回的状态码是 304NotModified。

这是因为按 F5 进行页面刷新时请求头会添加 If-Modify-Since 字段，如果资源未过期，命中缓存，服务器就直接返回 304 状态码，客户端直接使用本地的资源。

可以看出 chrome 和 firefox 在按下 F5 后，其内部使用的缓存机制不同。firefox 使用的是协商缓存，而 chrome 使用的是强缓存。

Ctrl+F5

我们还是先看看在 chrome 中 Ctrl+F5 的表现。

我们发现在请求头中多了两个 Cache-Control:no-cache，Pragma:no-cache 参数，这两个参数什么意思呢？

在请求头中的 Cache-Control:no-cache 表示客户端不接受本地缓存的资源，需要到源服务器进行资源请求，其实可以使用缓存服务器的资源，不过需要到源服务器进行验证，验证通过就可以将缓存服务器的资源返回给客户端。

那么在 Firefox 中的表现是怎样的呢？

请求头中同样多了两个 Cache-Control:no-cache，Pragma:no-cache 参数。

可以看出 chrome 和 Firefox 在按下 Ctrl+F5 后，都不会使用本地缓存，并且对缓存服务器的资源会再验证。

写到这里差不多就把 F5 同 Ctrl+F5 的缓存原理讲的差不多了。不过每个浏览器它们在实现同一个动作的时候，总是会有差异，不过在业界内 chrome 的缓存优化机制是做的最好的。这也是为什么我们在使用 chrome 开发或者是浏览网站的时候体验都不错的原因。

读完 F5 同 Ctrl+F5 刷新页面的原理，其实你也把强缓存和协商缓存的区别也复习了一遍。

补充

我们可以通过勾选 Network 面板中的 Disablecache 选项，这样当你按 F5 的时候，也是直接请求服务器资源的效果。

这几个月几乎每天都会有朋友加我微信，而他们问的最多的问题就是 —— 前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。

虽然这篇文章花了很长时间，肯定也有其局限性；希望各位不吝指出。

入题

我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是 CSS&HTML&JavaScript 了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中 JavaScript 又是重中之重。

接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。

目录

• 三大件学习
• 库工具
• 前端框架（ MVVM ）的学习
• 浏览器 & 计算机基础
• 前端工程化
• 性能优化
• Nodejs
• 数据结构和算法
• 依葫芦画瓢

三大件学习

现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。

刚入门的朋友，我觉得不应该一开始就学习像 Vue、TypeScript、Webpack 等知识。应该把重点放在 CSS&HTML&JavaScript 基础知识的学习上。

CSS & HTML

对于刚入门的朋友我依旧建议先将 CSS(3)&HTML(5) 的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。

当然如果你愿意，建议你可以先仿一个网站的静态页面（掘金、知乎等都可以），有一些属性就可以了解他实际的实现场景。

当然刚开始敲代码的时候还是不要过分依赖自动补全功能，一开始就使用自动补全对你记忆一些属性时没有帮助的；踏实点学习，日后会有回报的。

关于 CSS(3) 你需要了解的一些知识点

• 盒模型（标准 & IE ）
• flex、float、Normal Flow 等的理解
• CSS 常用选择器
• 行内、内部、外部样式的区别
• CSS 层叠规则
• BFC 与 IFC 的了解
• CSS3 的 transform、transition、animation 等属性的运用了解
• 响应式布局的理解
• ……

CSS 说容易也容易，说复杂也复杂；因为 CSS 总是能给你意外的惊喜。

HTML(5) 你需要了解的一些知识点

说到 HTML 我想有很多人是 div 一把梭。因为 div 用的爽，不用担心默认样式。

有人说 HTML 语义化的优点很多，比如清晰的页面结构、有利于 SEO、便于团队开发和维护；这些我都承认，不过我还是喜欢 div 一把梭。

• HTML 语义化( 不是很理解为什么面试总会问 )
• canvas
• 本地存储（ localStorage、sessionStorage、cookie 的理解 ）
• video 和 audio 的使用
• 应用缓存( cache manifest )
• ……

JavaScript

JavaScript 一直都是我们前端的基石，一定程度上 JavaScript 的理解深度决定了你的发展。所以一定要用心学习。

现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过，你现在可以自问一下你的确理解这些基础的知识点吗？

JavaScript 的基础知识点确实很多，所以《JavaScript 高级程序设计》 写了 700 多页；不过当你 JS 基础扎实后，你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。

JavaScript（ES6+） 你需要了解的一些知识点

• 类型转换
• this
• 作用域（作用域链）
• 原型链以及继承
• 闭包的理解
• 动态作用域和词法作用域
• JavaScript 执行机制
• promise & async
• ……

上面说的 CSS&HTML&JavaScript 的基础知识点并不需要你一入门就全部都理解透彻；有些虽然是基础，但却也有它的难度。就算是高级也不敢说自己全都掌握了，有句话说的挺好 —— 书读百遍、其义自见。

我们第一遍学习不可能尽懂，到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候，你肯定会有一个全新的理解。学习只一个需要一直在线的任务，重复的学习可以帮助你保持持续的竞争力。

我先声明一点，我并没有说其他技术不需要去学习，只不过初入门最好重点是先将基础夯实。

其实三大件的学习不需要花费多少时间，有基础的大概 3 个月就可以大致的看一遍。是否真的理解这是后话，不过已经算是入门了。

CSS & HTML & JavaScript 推荐书籍/网站

1. _ W3C 的 CSS&HTML 网络教程
2. 《CSS 权威指南》
3. 《CSS 揭秘》
4. 《JavaScript 高级程序设计》
5. 《你不知道的 JavaScript》上卷
6. _ ECMAScript 6 入门

HTML 不知道推荐什么书。我个人觉得看教程和动手实践就基本没什问题。

接下来我们就可以学习一些工具类的库了。

库工具

对于库工具而言我们常用的有 JQuery、underScore、zepto、Moment 等

• JQuery: 降低开发者操作 DOM 的复杂度
• UnderScore: 提供实用的函数
• Zepto: JQuery 的简化版
• Moment: 日期和时间操作库

这些库给我们提供了很大的便利，省去了我们编写相关方法的时间，同时也是我们的程序更加稳健 —— 我们自己写的方法很可能在某些情况下就出 bug 了。

当然对于这些库我们不仅仅只是去了解 API，我们需要去学习它的源码。看看如果自己写相关方法的话是不是也想到了这种方式，这些库工具是也是一个很好的学习工具，我们不应该忽略。

• 比如让你自己实现节流函数，你会如何实现。
• 过滤对象应该如何实现
• ……

这种问题的答案不就在 Underscore 源码里面吗？

我们在学习库工具的时候，必定是需要回头看 JavaScript 基础的；这也就进一步夯实了基础。

前端框架（ MVVM ）的学习

当下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。

至于 React 和 Vue 该学习哪一个，更多的还是看当下公司使用的是哪一个（也不是必然）。对于 Vue(React) 该如何使用其实不用多久就能上手，我们更应该关心的是他们背后的设计思想和实现原理。

一些问题

• 响应式的基本原理是什么
• 发布订阅模式的理解
• Virtual DOM 的理解
• 前端路由的实现原理
• nextTick / setState 的实现原理
• diff 算法
• 单页面应用（SPA）的原理和优缺点
• ……

我们对于框架的 API 使用没必要花太多时间，应该多研究他们背后的设计思想和实现原理。

Vue 和 React 我该选择哪一个？

对于这个问题相比很多人都有困扰（有些人两个都学，也就没有这个困扰），这个问题已经有很多人回答了。但我还是觉得不是非要选择哪一个才是政治正确，选择你需要的。

感兴趣的可以看看这篇文章：
React or Vue: Which Javascript UI Library Should You Be Using?

以下是提炼的文中观点：

Vue的优势是：

• 模板和渲染函数的弹性选择
• 简单的语法和项目配置
• 更快的渲染速度和更小的体积

React的优势是：

• 更适合大型应用和更好的可测试性
• 同时适用于 Web 端和原生 App
• 更大的生态系统，更多的支持和好用的工具

Vue 相关资料

对于框架的一些学习资料我个人更倾向于推荐官方文档，有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写（不排除有精良之作）。

1. Vue 官网 & Vue Router 官网 & Vuex 官网
2. 剖析 Vue.js 内部运行机制 掘金小册
3. vue 技术揭秘

浏览器 & 计算机基础

如果你希望能能快速进阶到高级工程师，那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。

浏览器一直是 JavaScript 最重要的宿主环境，所以我们必须去了解 JavaScript 在浏览器中是如何执行的。

我们前端开发接触最多的应该就是浏览器了，记得工作第一年最头痛的就是处理 IE 的兼容问题。工作中出现的很多问题都和浏览器有关，所以我觉得了解浏览器工作原理是非常有必要的。

为何要学习浏览器工作原理？

1. 准确评估 Web 开发项目的可行性
2. 从更高维度审视页面
3. 解决面试中遇到的绝大部分浏览器问题

计算机基础

对于计算机基础我们需要做到大体了解，这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。

需要了解的一些知识点

• 浏览器缓存机制
• 浏览器中 JavaScript 的执行机制
• 页面渲染原理
• 浏览器安全问题
• 浏览器为什么会跨域
• 如何系统的优化页面
• HTTP 与 HTTPS 的区别
• TCP/IP 协议
• 三次握手和四次挥手
• CDN 的作用和原理
• 正向代理与反向代理的特点
• ……

这里仅仅列出了一部分知识点，如果想全面的学习可以看下面推荐的资料。

浏览器 & 网络基础推荐书籍/资料

1. 《浏览器工作原理与实践 》专栏
2. 《图解 HTTP》
3. 《网络是怎样连接的》

前端工程化

从事前端稍微久一点的开发就一定会有这个感受 —— 前端开发越来越工程化，越来越复杂。

对于前端开发来说，现在前端要做的不只是切页面调接口这么简单，我们需要了解的技术无疑更加广泛。

前端工程化的一点浅见

由于项目的复杂度越来越高，前端需要做的工作就越来越繁重。当项目复杂就会产生许多问题，比如：

• 如何进行高效的多人协作？
• 如何保证项目的可维护性？
• 如何提高项目的开发质量？
• 如何降低项目生产的风险？

前端工程化细分的话我觉得可以分成模块化、组件化、规范化三个方向。或者说一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化的实践。

模块化

• JavaScript 模块化
• CSS 模块化
• 资源模块化

组件化

从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

也就是将复杂页面按功能拆分成多个独立的组件。

规范化

• 编码规范
• 接口规范
• git 使用规范
• CodeReview
• UI 元素规范

前端工程化一些知识点

• 理解 Babel、ESLint、webpack 等工具在项目中的作用
• Babel 的核心原理
• Webpack 的编译原理、构建流程、热更新原理
• nginx 的基本理解
• 理解 Git 的工作流程
• Mock 的意义及优点

性能优化

提起性能优化，大家最先想到的是什么？我最先想到的是一道面试题：

从输入 URL 到页面加载完成的具体过程

因为从直观层面来看，我们前端需要优化的步骤基本都在这个加载工程当中。

性能优化现在对于前端来说已经是必不可少的技能了，当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。

我们需要关注两个方向的性能优化：

1. 运行时的优化
2. 开发时的优化

性能优化一些知识点

• 前端性能衡量指标、性能监控（performance,LightHouse）
• 常见的性能优化方案有哪些
• SSR 方案的性能优化
• Webpack 的性能优化方案
• React、Vue 等框架使用性能优化方案
• 网络层面的优化方案
• 页面渲染层面的优化方案
• 白屏的优化方案
• ……

推荐资料

• 《大型网站性能优化实战》

Nodejs

我们知道由于 Nodejs 的出现，前端开发出现了一个新的高潮。JS 开始可以涉及后端领域，JS 的可能性更大了。

Nodejs 一些知识点

• Nodejs 在应用程序中的作用
• Express 和 Koa 的区别
• Nodejs 的底层运行原理、和浏览器的异同
• Nodejs 非阻塞机制的实现原理
• ……

数据结构和算法

这一点我也比较薄弱，就不展开了。关于这部分你可以刷 leetcode。

另外推一本书《学习 JavaScript 数据结构与算法》（第三版）

依葫芦画瓢

我们在项目开发的过程中可以接触到很多优秀的库工具或者是 UI 库，如 lodash、underscore、moment、element-ui、antd design 等。

我们可能自己设计不出来这么优秀的工具，但是我们完全可以依葫芦画瓢自己按着这些工具写一遍，你就会发现里面有很多不可思议的技巧、优秀的思想。

依葫芦画瓢对学习来说也是一个非常有用的技巧。

这篇文章我会介绍 11 个在开发过程中经常遇到的 CSS 相关知识点，以及 11 个有趣亦实用的 JavaScript 特性。

这些都是我在日常开发中总结而来，想必于你也是有或多或少的帮助。

文中的代码发布在 GitHub，想了解的朋友可以前往。

11 个常见的 CSS 知识点

声明，这里也包含了部分 CSS 预处理器知识，愿各位不要纠结于此。

1. position:fixed 降级问题

不知道曾经的你是不是遇到吸顶效果，就是使用 position:fixed 这个属性。其实如果其父元素中有使用 transform， fixed 的效果会降级为 absolute。

解决方案：

既然会降级为 absolute 效果，我们该怎么解决这个问题呢？我们就改考虑什么情况下 fixed 和 absolute 的表现效果会是一样的。

即当使用 fixed 的直接父元素的高度和屏幕的高度相同时 fixed 和 absolute 的表现效果会是一样的。

如果这个直接父级内的元素存在滚动的情况，那就加上 overflow-y:auto。

2. 合理使用变量

一般设计稿中的某一类的文字（元素）都是用相同的字体大小、颜色、行高等样式属性，所以这些值我们不必每次都重复写，因为当 UI 更新设计方案，你需要改的地方就很多了。这些重复使用的值我们完全可以存放在变量里面。

Sass 和 Less 稍微有点区别：

// sass
$direction: left;
// less
@direction: left;

当然 CSS 原生也是存在变量的，使用规则如下：

变量定义的语法是：--；// *为变量名称。
变量使用的语法是：var()；

1. 无论是变量的定义和使用只能在声明块 {} 里面
2. CSS 变量字符限制为：[0-9]、[a-zA-Z]、_、-、中文和韩文等。

:root {
--blue_color: #3388ff;
--main_bgcolor: #fafafa;
--font_size_12: 12px;
--font_size_14: 14px;
--color: 20px;
}
.div1{
background-color: var(--main_bgcolor);
font-size: var(--font_size_12);
}

3. 使用 Mixin 归类重复样式

和重复变量一样，重复的样式也可以归类。我觉得优秀的代码其中有一条肯定是代码的复用性强。

之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class，如下图：

这样下一个接手得人难免会有点迷糊，而且这样会造成样式越来越难修改。

这个时候，mixin( 可以理解成 class 中的 class )就能发挥它的作用了。

这是一个描述性文字的样式：

.font-description {
.font-des-style(24px,#fff,1.5em);
.line-camp(2);
}

// less
/* 多行显示 */
.line-camp( @clamp:2 ) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @clamp;
-webkit-box-orient: vertical;
}

.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {
font-size: @fontSize;
color: @color;
line-height: @lineHeight;
text-align: @textAlign;
}

这只是一个简单的例子，我们可以把可复用的样式放在 mixin 中，这样接手项目的人只需要熟悉你写的 mixin.less 就可以开始迭代需求了

4. 1px 方案

做过移动端需求的前端肯定是避免不了处理 1px 细线问题，这个问题的原因就是 UI 对页面美观度的要求越来越高（不要和我说这是 retina 屏的问题）。

代码如下：

.min-device-pixel-ratio(@scale2, @scale3) {
@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
transform: @scale2;
}
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
transform: @scale3;
}
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
&::before {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1PX @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.33);
}
}
}

.border-top-1px(@color: #DDD, @style: solid) {
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 1Px @style @color;
transform-origin: 0 0;
.min-device-pixel-ratio(scaleY(.5), scaleY(.33));
}
}

5. 内联首屏关键 CSS

性能优化中有一个重要的指标 —— 首次有效绘制（FMP），即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而 内联首屏关键 CSS（即 Critical CSS，可以称之为首屏关键 CSS） 能给用户一个更好的心理预期。

如图：

我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前，即在 HTML 下载完成之后就能渲染了。

既然是内联关键 CSS，也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。至于内联哪些 CSS 你可以使用 Critical。

6. 文字两端对齐

需求中我们也经常遇到这样的需求，这里直接提供方案。

// html
<div>姓名</div>
<div>手机号码</div>
<div>账号</div>
<div>密码</div>

// css
div {
margin: 10px 0;
width: 100px;
border: 1px solid red;
text-align: justify;
text-align-last:justify;
}
div:after{
content: '';
display: inline-block;
width: 100%;
}

效果如下：

7. 样式的顺序

CSS 代码：

.red {
color: red;
}
.blue {
color: blue;
}

HTML 代码：

<div class="red blue">这是什么颜色</div>
<div class="blue red">这是什么颜色</div>

记得之前这是一道比较火的 CSS 考题，当时好像是有不少的人答错（30% 以上）

8. 浏览器会从右到左解析 CSS 选择器

.content_box div p a {
// ...
}

浏览器会对上面的例子做如下的步骤处理：

1. 首先找到页面所有的 <a> 元素
2. 然后向上找到被 <p> 元素包裹的 <a> 元素
3. 再向上查找到一直到 .content_box 的元素

从上面的步骤我们可以看出，越靠右的选择器越具有唯一性，浏览器解析 CSS 属性的效率就越高。

所以一定换成使用具体的 class 编写 CSS 代码。

9. 每个单词的首字母大写

其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能：

function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}

直到有一天看到 CSS 也能做这个功能的时候，我才反应过来明明一句 CSS 就能解决的问题，我却使用了更复杂的方案。

CSS 方案如下：

.capitalizeFirst-css {
text-transform: capitalize;
}

是不是特别简单。

text-transform 简单介绍

这是 CSS2 中的属性，参数有 capitalize | uppercase | lowercase | none

参数介绍：

1. none：默认。定义带有小写字母和大写字母的标准的文本。
2. capitalize：文本中的每个单词以大写字母开头。
3. uppercase：定义仅有大写字母。
4. lowercase：定义无大写字母，仅有小写字母。

从这个属性我们可以知道全部大写（小写）的需求这个属性也能轻易实现。

10. 单选高亮

可能你看到“单选高亮”没反应过来，直接来张图片你就马上清楚了：

这个需求用 CSS 更方便处理。主要代码就是一段 CSS 代码：

// 省略部分代码，详细代码看仓库
.input:checked + .colors {
border-color: #e63838;
color: #e63838;
}

<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>

看效果：

两个选择器的区别

~选择器：查找某个元素后面的所有兄弟元素

+选择器：查找某个元素后面紧邻的兄弟元素

11. 多列等高问题

有三种 CSS 的处理方案：

1. 每列设置一个很大的 padding，再设置一个很大的负的 margin
2. 使用 display:table;
3. 使用 flex

第一种有明显的缺陷：

1. border-bottom 看不到了
2. 设置的下方的两个圆角也不见了

所以可以使用 display:table; 或者 flex布局 的方式来实现等高。

建议不要一味的抵触 table，有的场景还是可以使用的。

11 个有趣实用的 JS 特性

在日常开发中总是和各种 API 打交道，我们名为前端工程师实为 API 调用工程师。这里分享 11 个实用又有趣的 JS 特性，使用得当可以提高你应用的友好性。

1. 监听屏幕旋转变化接口: orientationchange

定义：

这个 API 可以将你手机是否横屏的情况暴露给需要知道的人知道。

使用：

screenOrientation: function(){
let self = this;
let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
self.angle = orientation.angle;
});
},

orientation.angle 值屏幕方向0竖屏90向左横屏-90/270向右横屏180倒屏

通过这个 API 我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。

如果只是样式的改变也可以通过媒体查询来监听：

/* 竖屏 */
@media screen and (orientation: portrait) {
// some css code
}
/* 横屏 */
@media screen and (orientation: landscape) {
// some css code
}

2. 电池状态：navigator.getBattery()

定义：

这个 API 可以将你手机电池状态的情况暴露给需要知道的人知道。

这个 api 返回的是一个 promise 对象，会给出一个 BatteryManager 对象，对象中包含了以下信息：

使用：

getBatteryInfo: function(){
let self = this;
if(navigator.getBattery){
navigator.getBattery().then(function(battery) {
// 判断是否在充电
self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
// 电池充电状态改变事件
battery.addEventListener('chargingchange', function(){
self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
});
});
}else{
self.batteryInfo = '不支持电池状态接口';
}
},

3. 让你的手机震动: window.navigator.vibrate(200)

定义：

这个 API 可以让你的手机按你的想法震动。

使用：
震动效果会在很多游戏使用。比如欢乐斗地主中，地主打完王炸后手机都会有震动的效果，以此来表达地主嘚瑟的心情也很是合理。

示例代码如下：

vibrateFun: function(){
let self = this;
if( navigator.vibrate ){
navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
}else{
self.vibrateInfo = "您的设备不支持震动";
}
<!--
// 清除震动
navigator.vibrate(0);
// 持续震动
setInterval(function() {
navigator.vibrate(200);
}, 500);
-->
},

4. 当前语言：navigator.language

定义：

这个 API 可以告诉你当前应该使用什么语言。

如果你需要和我一样做多语言适配，这个 API 或许可以给你提供一个不错的思路。

使用：

不同浏览器返回的值稍微有点差异。你可以通过以下封装好的方法来消除这种差异：

function getThisLang(){
const langList = ['cn','hk','tw','en','fr'];
const langListLen = langList.length;
const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
for( let i = 0; i < langListLen; i++ ){
let lang = langList[i];
if(thisLang.includes(lang)){
return lang
}else {
return 'en'
}
}
}

不同的语言就对应不同的语言文案就好。

5. 联网状态：navigator.onLine

定义：

这个 API 可以告诉让你知道你的设备的网络状态是否连接着。

使用：

比如我上午登陆了掘金在看一篇文章，可是没看完就到了吃饭的点，这么热爱学习的我肯定是选择吃完午饭回来继续看。

30 分钟过后……

吃晚饭回到公司，打开电脑继续把那篇文章看完，看完了打算点了赞，发现给了这个提示：

这个提示让我有点懵（就是没网络了）。

这个时候我们就可以使用这个 API，这样就可以准确的告诉用户“您的网络无法连接，请检查”。这样用户是不是可以有更好的体验呢？

代码如下：

mounted(){
let self = this;
window.addEventListener('online',  self.updateOnlineStatus, true);
window.addEventListener('offline', self.updateOnlineStatus, true);
},
methods: {
updateOnlineStatus: function(){
var self = this;
self.onLineInfo = navigator.onLine ? "online" : "offline";
},
}

注意：navigator.onLine 只会在机器未连接到局域网或路由器时返回 false，其他情况下均返回 true。也就是说，机器连接上路由器后，即使这个路由器没联通网络， navigator.onLine 仍然返回 true。

6. 页面可编辑：contentEditable

定义：

这个 API 可以使页面所有元素成为可编辑状态，使浏览器变成你的编辑器。

使用：

1. 你可以在地址栏输入 data:text/html,<html contenteditable>, 这样浏览器就变成了编辑器。

使用场景：

需求 —— 页面需要一个文本输入框。

1. 该文本输入框默认状态下有默认文本提示信息
2. 文本框输入状态下其高度会随文本内容自动撑开

像这样的需求我们就可以使用 <divcontentEditable='true'></div> 代替 <textarea> 标签。

不过 contentEditable='true' 是不会有 placeholder 的，那 placeholder 怎么办呢？

我一般会使用如下方案，输入内容后改变 class：

<div class='haveInput' contentEditable='true' placeholder='请输入'></div>
// css 样式
.haveInput:before {
content: attr(placeholder);
display: block;
color: #333;
}

好玩的事儿

你可以在浏览器的 consloe 控制台输入 document.body.contentEditable=true，你会发现整个页面都是可编辑的。

可以编辑页面内容，去逗一逗你的朋友，也是一个挺好玩的事儿。（下图我就修改了一些数据）

7. 浏览器活跃窗口监听: window.onblur & window.onfocus

定义：

这两个 api 分别表示窗口失去焦点和窗口处于活跃状态。

浏览其他窗口、浏览器最小化、点击其他程序等， window.onblur 事件就会触发;
回到该窗口，window.onfocus 事件就会触发。

使用：

上面的截图是微信网页版的消息提示。

代码很简单：

mounted(){
let self = this;
window.addEventListener('blur',  self.doFlashTitle, true);
window.addEventListener('focus', function () {
clearInterval(self.timer);
document.title = '微信网页版';
}, true);
},
methods: {
doFlashTitle: function(){
var self = this;
self.timer = setInterval( () => {
if (!self.flashFlag) {
document.title = "微信网页版";
} else {
document.title = `微信（${self.infoNum}）`;
}
self.flashFlag = ! self.flashFlag
}, 500)
},
}

8. 全屏 API（Fullscreen API）

定义：

这个 API 可以使你所打开的页面全屏展示，没有其他页面外的内容展示在屏幕上。

使用：

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，document 对象会收到一个 fullscreenchange 事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个 fullscreenerror 事件。

当进入/退出全屏模式时,会触发 fullscreenchange 事件。你可以在监听这个事件，做你想做的事。

fullScreenFun: function(){
let self = this;
var fullscreenEnabled = document.fullscreenEnabled       ||
document.mozFullScreenEnabled    ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;

if (fullscreenEnabled) {
let de = document.documentElement;
if(self.fullScreenInfo === '打开全屏'){
if( de.requestFullscreen ){
de.requestFullscreen();
}else if( de.mozRequestFullScreen ){
de.mozRequestFullScreen();
}else if( de.webkitRequestFullScreen ){
de.webkitRequestFullScreen();
}
self.fullScreenInfo = '退出全屏'
} else {
if( document.exitFullscreen ){
document.exitFullscreen();
}else if( document.mozCancelFullScreen ){
document.mozCancelFullScreen();
}else if( document.webkitCancelFullScreen ){
document.webkitCancelFullScreen();
}
self.fullScreenInfo = '打开全屏'
}
} else {
self.fullScreenInfo = '浏览器当前不能全屏';
}
}

相关：

1. document.fullscreenElement: 当前处于全屏状态的元素 element
2. document.fullscreenEnabled: 标记 fullscreen 当前是否可用
3. document.exitFullscreen(): 退出全屏

9. 利用 a 标签解析 URL

有的时候我们需要从一个 URL 中提取域名，查询关键字，变量参数值等，一般我们会自己去解析 URL 来获取这些内容。可是你或许不知道还有更简单的方法。

即创建一个 a 标签将需要解析的 URL 赋值给 a 的 href 属性，然后我们就能很方便的拿到这些内容。代码如下：

function parseURL(url) {
var a =  document.createElement('a');
a.href = url;
return {
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
hash: a.hash.replace('#','')
};
}

10. getBoundingClientRect() 知多少

这个 API 可以告诉你页面中某个元素相对浏览器视窗上下左右的距离。

使用：
tab 吸顶可以使用 obj.getBoundingClientRect().top 代替 scrollTop-offsetTop，代码如下：

// html
<div class="pride_tab_fixed" ref="pride_tab_fixed">
<div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''">
// some code
</div>
</div>

// vue
export default {
data(){
return{
titleFixed: false
}
},
activated(){
this.titleFixed = false;
window.addEventListener('scroll', this.handleScroll);
},
methods: {
//滚动监听，头部固定
handleScroll: function () {
let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
this.titleFixed = offsetTop < 0;
// some code
}
}
}

offsetTop 和 getBoundingClientRect() 区别

1. getBoundingClientRect():

用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。不包含文档卷起来的部分。

该函数返回一个 object 对象，有8个属性：top,right,buttom,left,width,height,x,y

2. offsetTop:

用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。

定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。

offsetTop 和 offsetParent 方法相结合可以获得该元素到 body 上边距的距离。代码如下：

getOffset: function(obj,direction){
let offsetL = 0;
let offsetT = 0;
while( obj!== window.document.body && obj !== null ){
offsetL += obj.offsetLeft;
offsetT += obj.offsetTop;
obj = obj.offsetParent;
}
if(direction === 'left'){
return offsetL;
}else {
return offsetT;
}
}

11. IntersectionObserver 是什么？

IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。

所以我们可以用这个特性来处理曝光埋点，而不是用 getBoundingClientRect().top 这种更加损耗性能的方式来处理。

当然你也可以用这个 API 来优化滚动吸顶,代码如下：

IntersectionObserverFun: function() {
let self = this;
let ele = self.$refs.pride_tab_fixed;
if( !!IntersectionObserver ){
let observer = new IntersectionObserver(function(){
let offsetTop = ele.getBoundingClientRect().top;
self.titleFixed = offsetTop < 0;
}, {
threshold: [1]
});
observer.observe(document.getElementsByClassName('title_box')[0]);
} else {
window.addEventListener('scroll', _.throttle(function(){
let offsetTop = ele.getBoundingClientRect().top;
self.titleFixed = offsetTop < 0;
}, 50));
}
},