好久没有更新博客了。
2017年过得真快，转眼已经快触不到2017的尾巴了，如果算农历年的话，留给它的时间也已经不多了。
2017年对于我来说发生的最重要的事情就是跳槽了，从 OOCL 离职，到入职 WPS 正好一年了。这一年可以说是我职业发展最为重要的一年，以后应该都会在这个方向前行了。这一年差不多是我从门外汉逐步入门的过程，虽然之前也有一两年的工作经验，但大多时候是打酱油，在一个大的项目中缝缝补补。而经过 WPS 一年的训练，如今我可以写一些小的项目，也完全看懂了部门的大项目的整个架构。
第二件事就是今年八月份买了人生第一辆小车车-日产骐达。这辆小车车如今已经是我们家中第三重要的成员了，给生活提升了极大的幸福感。尤其是搬家的时候，身心俱疲，但是当进入小车的一瞬间，知道自己无论如何有落脚的地方，就觉得很安心。
more >>最近项目不算忙，抽时间重构了一下项目的打包，先说一下成就。
在我的开发电脑上：
OS: macOS High Sierra
CPU: 2.6 GHz Intel Core i5
内存: 8G 1600 DDR3
硬盘: 1 TB SATA磁盘
代码全量编译时间从 4 分 51 秒优化到 2 分 08 - 20 秒左右。
在项目编译电脑上：
OS: Ubuntu 16.04.3 LTS
CPU: Intel® Core™ i5-7500 CPU @ 3.40GHz
内存: 64G 2133 DDR4
硬盘: 1 TB SSD
代码全量编译时间从 4 分 08 秒优化到 1 分 10 - 20 秒左右。
more >>在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。
如果一个元素内部的子元素全部都是浮动的话，那么这个元素会出现高度塌陷，这个时候就需要清除浮动。高度塌陷的负面作用主要有：不能正确显示背景，边框不能撑开，margin 和 padding 不能正确显示。
假设有代码如下：
more >>CSS 中可以利用伪元素给 DOM 元素添加特殊的样式。比如说，我们可以通过 :before 在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
CSS3 规范中要求使用双冒号(::)添加伪元素，用以区分伪元素和伪类，比如 ::before 是伪元素，:hover 是伪类。但是大部分伪元素依然支持单冒号的形式，::before 写成 :before 也可以，为了向后兼容，一般推荐使用单冒号的形式。
支持单双冒号的伪元素有： :before/::before，:after/::after，:first-letter/::first-letter，:first-line/::first-line。
仅支持双冒号的伪元素有： ::selection，::placeholder，::backdrop。
最近做的一个关于电影的网站 IMDB Top250，想对其进行 SEO 优化，用到 meta 信息的时候，很多知识都是 『似乎』、『好像』、『可能』 的感觉，回想自己一直没有系统的学习过 meta 相关的知识，这些东西虽然简单，但是很多时候能发挥出意想不到的效果，尤其对于 SEO 有非常重要的作用。
meta 标签位于文档的头部，可提供有关页面的元信息（meta-information）。 meta 标签本身不包含任何内容，通过其属性定义了与文档相关联的内容。
meta 标签一共有五个属性值： charset、content、http-equiv、name、scheme。 其中 http-equiv 和 name
必须与 content 配合组成键值对使用， charset 为 HTML5 属性， scheme 属性 HTML5 不支持。
与 PC 端共同开发一个页面，页面由 PC 端提供，内部 iframe 则由我们前端提供。开发时候遇到了一个问题，webpack 打包后 css 的 z-index 值与原始值不符，导致 iframe 里面的 toast 被外面 z-index 较小的 dialog 覆盖。更改 toast 的 z-index，发现没起作用，页面上的 z-index 依然是之前的值，而不是 css 中赋予的值。给 z-index 加上 !important 后依然无效，查资料发现是 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 对 z-index 进行了重新计算导致的。
这本来是 webpack 插件的一个善举（让 z-index 数值更加合理），但是具体情况来看，这里显然不需要这个 “善举”。
more >>linux 中用户相对于文件有三种身份：owner、group、others，每种身份各有 read、write、execute 三种权限。
使用 ls -l 命令可以查看与文件权限相关的信息：
1 | ls -l |
其中第一个字符表示文件类型：d 表示文件为一个目录，- 表示文件为普通文件，l 表示链接， b 表示设备文件。
接下来的字符中，以三个为一组，且均为 r(read)、 w(write)、 x(execute) 三个参数的组合，首先三个字符表示文件所有者权限，后面三个字符表示用户组权限，最后三个表示其他人对文件的权限。这三个权限的位置不会改变，如果没有权限，就会出现减号[ - ]。
后面的字段分别代表：硬链接个数，所有者，所在组，文件或者目录大小，最后访问/修改时间，文件或者目录名。
more >>ES6 发布之后，TC-39 小组每年发布一次 ECMAScript 语言新特性，这个 repository tc39/ecma262 中记录着最新版的提议。新版本的 ECMAScript 使用年份来表示版本，所以 ES6 被称为 ES2015， ES7 被称为 ES2016，所以标准起见，以后我们也称之为 ES2016 和 ES2017。
ES2016 只有两个新特性
最近在使用 Element 过程中发现组件通信大量使用 dispatch 和 broadcast 两个方法，之前在 vue2 组件通信 也提到过 vue2 中取消了 $dispatch 和 $broadcast 两个重要的事件，而 Element 重新实现了这两个函数。
代码地址放在 element-ui/lib/mixins/emitter
Lazyload 可以加快网页访问速度，减少请求，实现思路就是判断图片元素是否可见来决定是否加载图片。当图片位于浏览器视口 (viewport) 中时，动态设置 <img> 标签的 src 属性，浏览器会根据 src 属性发送请求加载图片。
首先不设置 src 属性，将图片真正的 url 放在另外一个属性 data-src 中，在图片即将进入浏览器可视区域之前，将 url 取出放到 src 中。
懒加载的关键是如何判断图片处于浏览器可视范围内，通常有三种方法：
more >>