blog
blog copied to clipboard
creeperyang
前端博客，关注基础知识和性能优化。
# 开发基于Node.js的前端工具 知乎上有这样一个问题：[为什么node出现之后，各种前端构建工具和手段才如雨后春笋般层出不穷？](https://www.zhihu.com/question/35427358)，里面的答案挺有意思的。其实自从有了Node.js， Jser们可以脱离浏览器做各种各样有趣的事，在开发中，各种JS库帮助我们改善开发流程，提高开发效率， 比如`webpack/babel`等等。 今天这里我们就主要讲讲怎么基于Node.js来开发（小）工具，提高我们的工作效率，满足各种实际需要。 ## 一. 相关前置知识 ### 1. Environments > The environment is an area that the shell builds every time that it starts a session that...
## 布局和相关问题 > 非特别说明，`react-native`版本是`0.42`。 ### 1. `Android`中`borderRadius`和`border`冲突？ `Android`中当`borderRadius`部分设置非0值（部分为0），`border`将无效。 手机：华为mate8 EMUI：4.1 android：6.0 iOS上正确的样式： 然后发现删除style ```js borderTopLeftRadius: 4, borderBottomLeftRadius: 4, borderTopRightRadius: 0, borderBottomRightRadius: 0 ``` 可正常显示border。 **解决方案** 把`border`放在两个按钮的父容器上。
### 一. JWT（JSON Web Token） > JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. JWT 是一个基于 JSON 的开放标准（RFC 7519），用于创建访问 token。...
> **原文: [Redux 官方文档 EN](http://redux.js.org/) | [Redux 官方文档 CN](http://cn.redux.js.org/)** > *1. 有删减重组，需要细读的请直接浏览官方文档。* > *2. 专注 Redux 核心概念和开发流程，希望可以通过 15-20 分钟的阅读，对 Redux 有比较全面的了解，可以快速上手。* ## Redux 入门介绍 > Redux is a predictable state...
ES6
相比ES3到ES5，ES5到ES6是更重大的升级，既有大量语法糖，如`Arrow Function`、`Template string`等等，更有模块化、`class`、`generator`等等强大的新特性。相信ES6会极大的改变我们编写JS的方式，而且ES6（ES2015）已经在2015年6月17日发布，所以说可以开始学习ES6了。 本文是我学习ES6的笔记，大部分是概念摘要，代码演示等等，以弄清概念为要。 另，学习资料来源（会及时更新）： 1. [es6-in-depth](https://hacks.mozilla.org/category/es6-in-depth/) ## 1. `for of`和迭代器 ES5中，`forEach`可以用来遍历数组元素，但它的缺陷是不能使用`break`语句中断循环，也不能使用`return`语句返回到外层函数。 ### 强大的for-of循环 ``` js for (let value of [1, 2, 3]) { console.log(value); //输出 1 2 3 }...
## 前端模板`mustache.js`源码解析 近些年各种前端模板引擎层出不穷，[`mustache`](http://mustache.github.io/)就是其中比较出名的一种。`mustache`是一种弱逻辑的模板语法，`mustache.js`是它的JS实现。 ### 为什么关注`mustache.js`并去解析源码？ 1. `underscore template`和`Micro-Templating`等等模板是基于原生JS语法，解析基本是运用正则拼接字符串；相比它们，`mustache.js`基于自定义语法，解析更为复杂。解读`mustache.js`可以学习自定义语法的解析（简单的手写解析器）。 2. `mustache.js`本身代码精简（`v2.2.1`只有600+行），结构清晰，易于理解。 3. `mustache.js`的进阶版有`handlebars`等等，可以在`mustache.js`基础上自己定制/增强前端模板。 ### 源码分析 600多行的`mustache.js`大致可以分为以下几部分： ``` bash ├── context.js # Context类 ├── parser.js # 主要是 parseTemplate 函数 ├── scanner.js #...
# 渲染过程 ## 渲染流程 在开发者工具的timeline里，我们可以看到一个典型的渲染过程基本如下： 1. Recalculate Style: 计算（应用到元素上的）样式。 2. Layout： 为（渲染树上）每个元素生成几何形状（大小和位置）。 3. Paint：为每个元素填充像素到layer。 4. Composite Layers : 把所有layer绘制，输出到屏幕。 ## 渲染小结 - 渲染主要三阶段：Layout计算范围，Paint计算展现，Composite合成Bitmap。 - 修改不同CSS属性会触发不同阶段。比如width，height，margin，left/top等等会触发layout;box-shadow，border-radius，background，outline等等触发paint;transform，opacity触发composite layer。 - 触发的阶段越前，渲染的代价越高。 # 硬件加速（GPU加速）...
从功能核心来说，webpack 是JS应用的打包工具（static module bundler）。webpack 会从入口（entry point）开始处理你的应用，构建依赖图，把多个模块（module）合并到一个或多个包（bundle）。 webpack 本身只能处理 JS/JSON 文件，它依赖各种 loader、plugin 来共同完成对复杂应用的支持。 ## （一）核心概念 ### loader vs plugin > Loaders are transformations that are applied to the source code of...
## （一）浏览器关键渲染路径-CRP 关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。 我们这里只尽量精简描述这个渲染过程，更具体的可以去看[MDN-关键渲染路径](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path)。  在浏览器接收html时（浏览器收到数据的第一块时就可以开始解析收到的信息）： 1. 首先解析 HTML 并构建 DOM 树； 1. 遇到非阻塞资源（如图片）会请求这些资源并且继续解析。 2. 遇到阻塞资源如 标签（没有 `async` 或者 `defer` 属性的）会阻塞渲染并停止 HTML 的解析。 3. 需要重点提CSS资源：**CSS不会阻塞 HTML...
> 项目基本配置可参考基于 。 ## （一）从打包产物——html 开始 ```html webpack-demo ``` 从浏览器角度，html 是应用入口和运行起点。可以看到，编译出的JS通过``标签插入了 html。 - 其中 `/js/runtime.dacd45666f2c5eb35b8d.bundle.js` 是 webpack 提供的运行时，是编译出代码能运行的基础； - 而 `/js/main.7086fc1df0c0b6a0d989.bundle.js` 是我们的入口模块（可能因为 `CONCATENATE MODULE` 的优化，除了入口module外有其它module的代码）。 这里需额外注意到： **`defer`** 异步加载，不阻塞 html 下载和解析，且保证这些...