发表于 | 分类于 | 阅读次数

前言

在现代浏览器中，渲染页面所要负责的线程主要有两个：主线程和排版线程。

主线程

  • 运行 JS
  • 计算 HTML 元素的 CSS 样式
  • 布局页面
  • 把页面元素绘制成一个或多个位图
  • 把这些位图移交给排版线程

在浏览器开始渲染页面，或者长时间执行某个 JS 时，主线程会一直在忙碌状态，此时对于用户的任何输入或是操作都不会有所响应。

排版线程

  • 通过 GPU 渲染位图，并显示在屏幕上
  • 向主线程请求更新位图的可见部分或即将可见的部分
  • 判断出当前页面处于可见的部分
  • 判断出即将通过页面滚动而可见的部分
  • 随着用户滚动页面来移动这些部分

排版线程对于用户的操作保持快速的响应，普遍的效率时每秒 60 帧的速度去刷新显示。

Transtion

下面我们在网页中实现一个元素的高度变化的动画，鼠标悬浮在元素上动画启动，直至完成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
#foo {
  height: 100px;
  width: 100px;
  background: red;
  transition: height 1s linear;
}
#foo:hover {
  height: 200px;
}
</style>
<body>
  <div id="foo"></div>
</body>
阅读全文 »

发表于 | 分类于 | 阅读次数

闭包 是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。“闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域）。

作用域

闭包的一个重点在于作用域，在 JavaScript 中变量的作用域分两种：全局变量与局部变量，首先让我们来了解一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
var _global = 1;  // 全局变量
function print() {
  var _internal = 2;  // 局部变量
  console.log(_global); // 1
  console.log(_internal); // 2
  return _internal;
}
print();
console.log(_global); // 1
console.log(_internal); // ReferenceError: _internal is not defined

此时我们可以看到，在函数内部是可以直接读取全局变量的。但当我们在外部想访问内部变量时，就会报错，因为在函数体外部时无法访问函数内部的变量的。

需要注意的是，当在函数内部定义变量时没用使用 var 等声明变量，那么它实际上会成为一个全局变量：

1
2
3
4
5
function print() {
  _internal = 2;
}
console.log(_internal); // 2

从内存中解释，变量的声明都存在栈中，而在 JavaScript 中存在垃圾回收机制（garbage collection），当一个函数执行完返回之后，它的内存会被自动回收，此时函数内部的变量都会被销毁。

那么我们有什么方法可以保存这一内存，并且在外部访问函数内部的变量呢 —— 闭包。

阅读全文 »

发表于 | 分类于 | 阅读次数

前言

在了解 cubic-bezier 之前，你需要对 CSS3 中的动画效果有所认识，它是 animation-timing-function 和 transition-timing-function 中一个重要的内容。

本体

简介

cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。

我们可以从下图中简要理解一下 cubic-bezier：
cubic-bezier
cubic-bezier

从上图我们需要知道的是 cubic-bezier 的取值范围:

  • P0：默认值 (0, 0)
  • P1：动态取值 (x1, y1)
  • P2：动态取值 (x2, y2)
  • P3：默认值 (1, 1)
阅读全文 »

发表于 | 分类于 | 阅读次数

利用 Github 所提供的 Github Page 去构建静态的网站已经变得越来越流行，如果还不了解怎么入门，可以阅读我之前的一篇文章「使用Hexo + Next搭建静态博客」。当然构建博客的方法不是只有一种，你也可以尝试其他方法，而本文主要是针对 Hexo 去叙述的。

可能看过「使用 Hexo + Next 搭建静态博客」这篇文章的同学都已经构建好了属于自己的博客了，那么接下来要说的就是关于 NexT 主题中遇到的一些问题和提示。

关于 RSS

很多同学在看到别人的博客时，都会发现有订阅的功能（即 RSS），但无奈官方介绍比较少，所以无从下手。

那么下面将教大家如何去做：

  1. 准备
    你需要安装一个 Hexo 插件：

    1
    $ npm install --save hexo-generator-feed

  2. 配置
    接下来需要在 _config.yml 中配置一下，在 root 目录下的 _config.yml 中添加：

    1
    2
    3
    4
    # Extensions
    ## Plugins: http://hexo.io/plugins/
    plugins:
      hexo-generate-feed

然后在主题文件夹的 _config.yml 中配置：

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

阅读全文 »

发表于 | 分类于 | 阅读次数

在写这篇文章之前，我已经接触 React 有大半年了。在初步学习 React 之后就正式应用到项目中，当时就想把自己的一些想法写出来分享一下，无奈不太会写文章，再则时间不是很充裕，所以也就搁下了。
本篇文章比较基础，没有深入的分析，大神们轻看。废话就不多说了，那么让我们来进入正题。

简介

首先想要介绍的是 React，看到这篇文章的朋友想必都有一些关于 React 的了解了，但对于刚接触的新人而言，在这就要简要地介绍一下了。然后就是关于使用 React 构建一个简单单页应用（下文用 SPA 代替，Single Page Application）的一些介绍和讲解。

关于 React

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。（更多相关介绍请看这）

特点：

  • 仅仅只是 UI
  • 虚拟 DOM：最大限度减少与 DOM 的交互（类似于使用 jQuery 操作 DOM）
  • 单向数据流：很大程度减少了重复代码的使用

组件化：

  • 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件
  • 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景
  • 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护
阅读全文 »