chore(docs): perf document

README.md

@@ -35,7 +35,8 @@ Hippy
 │   ├── hippy-vue                     # Vue binding for Hippy.
 │   ├── hippy-vue-css-loader          # Webpack loader for convert CSS text to JS AST.
 │   ├── hippy-vue-native-components   # Native components extensions for hippy-vue.
-│   └── hippy-vue-router              # Vue router for hippy-vue.
+│   ├── hippy-vue-router              # Vue router for hippy-vue.
+│   └── types                         # Global type definition.
 ├── ios
 │   └── sdk                           # iOS SDK
 ├── android
@@ -44,7 +45,6 @@ Hippy
 ├── core                              # JS modules implemented by C++, binding to JS engine.
 ├── layout                            # Hippy layout engine.
 ├── scripts                           # Project build script.
-└── types                             # Global type definition.
 ```
 
 ## Getting started
@@ -72,31 +72,33 @@ For Windows developers:
 
 For iOS we recommend to use iOS simulator when first try, however, you may change the Xcode configuration to install the app to iPhone if you are an iOS expert.
 
-1. Install the dependencies with `npm install`.
-2. Install dependencies of each npm package with `lerna bootstrap`.
+1. Install the dependencies at root directory with `npm install`.
+2. Install dependencies of each npm package at root directory with `lerna bootstrap`.
+   （Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.）
 3. Build the front-end sdk packages at root directory with `npm run build`.
-4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`.
+4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory.
 5. Start the Xcode and build the iOS app with `open examples/ios-demo/HippyDemo.xcodeproj`.
-6. `cd` to `examples` hippy-react-demo or hippy-vue-demo, run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode
+6. `cd` to `examples` hippy-react-demo or hippy-vue-demo, run `npm install` to install demo js dependencies, then run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode
 
-On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and make it take effect in examples, please call `npm run build` at root directory again.
+On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and want to make it take effect in examples, please call `npm run build` at root directory again.
 
 ### Start the android app with hippy-react or hippy-vue demo
 
 For Android we recommend to use the real cellphone for better experience, because Hippy is using [X5](https://x5.tencent.com/) JS engine which can't support x86 simulator, as well as ARM simulator has a low performance.
 
 Before build the android app, please make sure the SDK and NDK is installed, And *DO NOT* update the build toolchain.
 
-1. Install the dependencies with `npm install`.
-2. Install dependencies of each npm package with `lerna bootstrap`.
+1. Install the dependencies at root directory with `npm install`.
+2. Install dependencies of each npm package at root directory with `lerna bootstrap`.
+   （Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.）
 3. Build the front-end sdk packages at root directory with `npm run build`.
-4. Open a terminal, then build the hippy-react demo with `npm run buildexample -- hippy-react-demo`, or build the hippy-vue demo with `npm run buildexample -- hippy-vue-demo` .
+4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory.
 5. Open the `examples/android-demo` with Android Studio.
-6. Connect android phone with USB cable and make sure USB debugging mode and USB installation are enabled.
+6. Connect Android phone with USB cable and make sure USB debugging mode and USB installation are enabled.
 7. Open the project with Android Studio, run and install the apk.
-8. `cd` to hippy-react-demo or hippy-vue-demo, run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode.
+8. `cd` to `examples` hippy-react-demo or hippy-vue-demo, run `npm install` to install demo js dependencies, then run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode.
 
-On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and make it take effect in examples, please call `npm run build` at root directory again.
+On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and want to make it take effect in examples, please call `npm run build` at root directory again.
 
 > If you encounter the issue of `No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android`, here is the [solution](https://github.com/google/filament/issues/15#issuecomment-415423557).
 

README.zh_CN.md

@@ -6,9 +6,9 @@
 
 ## 介绍
 
-Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）。Hippy 的设计是面向传统 Web 开发者的，特别是之前有过 React Native 和 Vue 的开发者用起来会更为顺手，Hippy 致力于让前端开发跨端 App 更加容易。
+Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）。Hippy 的设计是面向传统 Web 开发者的，特别是之前有过 React Native 和 Weex 开发经验的开发者用起来会更为顺手，Hippy 致力于让前端开发跨端 App 更加容易。
 
-到目前为止，[腾讯](http://www.tencent.com/)内已经有了27款流行 App 在使用 Hippy 框架，包括手机QQ、手机QQ浏览器、腾讯视频App，QQ音乐App等，每日触达数亿用户。
+到目前为止，[腾讯](http://www.tencent.com/)内已经有 27 款主流 App 在使用 Hippy 框架，包括手机QQ、手机QQ浏览器、腾讯视频App，QQ音乐App等，每日触达数亿用户。
 
 ## 特征
 
@@ -19,7 +19,7 @@ Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写
 * 皆可平滑迁移到 Web 浏览器。
 * 完整支持 Flex 的[布局引擎](./layout)。
 
-## Project structure
+## 项目结构
 
 ```text
 Hippy
@@ -35,7 +35,8 @@ Hippy
 │   ├── hippy-vue                     # Hippy 的 Vue 语法绑定。
 │   ├── hippy-vue-css-loader          # 用来将 CSS 文本转换为 JS 语法树以供解析的 Webpack loader。
 │   ├── hippy-vue-native-components   # hippy-vue 中浏览器中所没有的，额外的，终端定制组件。
-│   └── hippy-vue-router              # 在 hippy-vue 中运行的 vue-router。
+│   ├── hippy-vue-router              # 在 hippy-vue 中运行的 vue-router。
+│   └── types                         # 全局 Typescript 类型
 ├── ios
 │   └── sdk                           # iOS SDK。
 ├── android
@@ -44,7 +45,6 @@ Hippy
 ├── core                              # C++ 实现的 JS 模块，通过 Binding 方式运行在 JS 引擎中。
 ├── layout                            # Hippy 布局引擎。
 ├── scripts                           # 项目编译脚本。
-└── types                             # 全局 Typescript 类型定义。
 ```
 
 ## 开始
@@ -72,31 +72,31 @@ Windows 用户需要以下软件:
 
 我们推荐 iOS 开发者使用模拟器来进行开发和调试工作，当然如果你是一个 iOS 开发高手，也可以通过修改配置将 Hippy app 安装到手机上。
 
-1. 安装前端依赖，根目录运行命令：`npm install`。
-2. 通过 lerna 安装前端每一个package依赖: `lerna bootstrap`。
-3. 编译前端 SDK 包，根目录运行命令： `npm run build`。
-4. 选择一个前端范例项目来进行编译：`npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
+1. 项目根目录运行命令 `npm install` 安装前端依赖。
+2. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`）
+3. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。
+4. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
 5. 启动 Xcode 并且开始编译终端 App：`open examples/ios-demo/HippyDemo.xcodeproj`。
-6. cd 到 hippy-react-demo 或者 hippy-vue-demo 目录，分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。
+6. `cd` 到 `examples` hippy-react-demo 或者 hippy-vue-demo 目录，先执行 `npm install` 安装 demo 的依赖包，再分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。
 
-在 example 调试模式下，@hippy/react、@hippy/vue等的npm模块会直接链接到 `packages` > `[different package]` >`dist` 下面，所以如果你修改了package下的源代码并且想让其在example中生效，请重新在根目录执行 `npm run build`。
+在 example 调试模式下，@hippy/react、@hippy/vue 等 npm 模块会直接链接到 `packages` > `[different package]` > `dist` 目录下面的js文件，所以如果你修改了 packages 下的源代码并且想让其在 example 中生效，请重新在根目录执行 `npm run build`。
 
 ### 启动 Android App 来测试 hippy-react 或者 hippy-vue 范例
 
 我们推荐 Android 开发者使用真机，因为 Hippy 使用的 [X5](https://x5.tencent.com/) JS 引擎没有提供 x86 的库以至于无法支持 x86 模拟器，但是使用 ARM 模拟器又很慢。
 
 在开始前请确认好 SDK 和 NDK 都安装了范例的指定版本，并且**请勿**更新编译工具链。
 
-1. 安装前端依赖，运行命令：`npm install`。
-2. 通过 lerna 安装前端每一个 package 依赖: `lerna bootstrap`。
-3. 编译前端 SDK 包，根目录运行命令： `npm run build`。
-4. 打开一个命令行程序，并选择 hippy-react 范例项目进行编译：`npm run buildexample hippy-react-demo`，或者编译 hippy-vue 范例项目 `npm run buildexample hippy-vue-demo`。
+1. 项目根目录运行命令 `npm install` 安装前端依赖。
+2. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`）
+3. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。
+4. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
 5. 用 Android Studio 来打开终端范例工程 `examples/android-demo`。
 6. 用 USB 数据线插上你的 Android 手机，需要确认手机打开 USB 调试模式和 USB 安装。
-7. 运行工程，并安装 apk。
-8. cd 到 hippy-react-demo 或者 hippy-vue-demo 目录，分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。
+7. 运行工程，并安装 APK。
+8. `cd` 到 `examples` hippy-react-demo 或者 hippy-vue-demo 目录，先执行 `npm install` 安装 demo 的依赖包，再分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。
 
-在 example 调试模式下，@hippy/react、@hippy/vue等的npm模块会直接链接到 `packages` > `[different package]` >`dist` 下面，所以如果你修改了package下的源代码并且想让其在example中生效，请重新在根目录执行 `npm run build`。
+在 example 调试模式下，@hippy/react、@hippy/vue 等 npm 模块会直接链接到 `packages` > `[different package]` > `dist` 目录下面的js文件，所以如果你修改了 packages 下的源代码并且想让其在 example 中生效，请重新在根目录执行 `npm run build`。
 
 > 如果 Android Studio 报了这个错误 `No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android`，这里有[解决办法](https://github.com/google/filament/issues/15#issuecomment-415423557)。
 

docs/guide/debug.md

@@ -10,10 +10,10 @@ Hippy中运行的JS代码可以来源于本地文件(local file)，或者远程
 
 # 项目初始化
 
-1. 安装前端依赖，根目录运行命令：`npm install`。
-2. 通过 lerna 安装前端每一个package依赖: `lerna bootstrap`。
-3. 编译前端 SDK 包，根目录运行命令： `npm run build`。
-4. 选择一个前端范例项目来进行编译：`npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
+1. 项目根目录运行命令 `npm install` 安装前端依赖。
+2. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`）
+3. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。
+4. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
 
 # 终端环境准备
 
@@ -37,7 +37,7 @@ Hippy中运行的JS代码可以来源于本地文件(local file)，或者远程
 
 1. 点击 [Xcode on Mac AppStore](//apps.apple.com/cn/app/xcode/id497799835?l=en&mt=12) 下载安装 Xcode。
 2. 使用 Xcode 打开[Hippy iOS 范例工程](//github.com/Tencent/Hippy/tree/master/examples/ios-demo) 中的 `HippyDemo.xcodeproj` 工程文件，并点击运行，正常情况下应该可以启动模拟器，并运行之前内置的 Hippy 前端代码。
-3. 打开前端范例工程 [hippy-react-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo) 或者 [hippy-vue-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)，通过 `npm i` 安装完依赖之后，使用 `npm run hippy:dev` 启动编译，并另开一个终端窗口，运行 `npm run hippy:debug` 启动调试服务。
+3. 打开 `examples` 下的前端范例工程 [hippy-react-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo) 或者 [hippy-vue-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)，通过 `npm i` 安装完依赖之后，使用 `npm run hippy:dev` 启动编译，并另开一个终端窗口，运行 `npm run hippy:debug` 启动调试服务。
 4. 回到模拟器，点击前端工程中的调试按钮，即可进入调试状态。hippy-react 有一个单独的页面，hippy-vue 在右上角。以 hippy-react 为例：
 
     ![iOS 模拟器](//puui.qpic.cn/vupload/0/1577796352672_tmjp70r3bma.png/0)

docs/hippy-react/components.md

@@ -407,13 +407,13 @@ import icon from './qb_icon_new.png';
 | opacity       | 配置 `View` 的透明度，同时会影响子节点的透明度。             | `number`                                  | `ALL`    |
 | onLayout      | 当元素挂载或者布局改变的时候调用，参数为： `{ nativeEvent: { layout: { x, y, width, height } } }`。 | `Function`                                | `ALL`    |
 | onClick       | 当文本被点击以后调用此回调函数。  例如， `onClick={() => console.log('onClick') }` | `Function`                                | `ALL`    |
-| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以，在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `ALL`    |
+| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `Android 仅支持 tail 属性，iOS 全支持`    |
 
 * ellipsizeMode 的参数含义：
-  * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；
-  * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”
+  * `clip` - 超过指定行数的文字会被直接截断，不显示“...”；（仅iOS支持）
+  * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；（仅iOS支持）
+  * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”；（仅iOS支持）
   * `tail` - 文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”；
-  * `clip` - 超过指定行数的文字会被直接截断，不显示“...”，
 
 # View
 

docs/hippy-vue/components.md

@@ -296,13 +296,13 @@ ul 的子节点，终端层节点回收和复用的最小颗粒度。
 | numberOfLines | 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。 | `number`                                  | `ALL`    |
 | opacity       | 配置 `View` 的透明度，同时会影响子节点的透明度。             | `number`                                  | `ALL`    |
 | onClick       | 当文本被点击以后调用此回调函数。  例如， `onClick={() => console.log('onClick') }` | `Function`                                | `ALL`    |
-| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以，在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `ALL`    |
+| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `Android 仅支持 tail 属性，iOS 全支持`    |
 
 * ellipsizeMode 的参数含义：
-  * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；
-  * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”
+  * `clip` - 超过指定行数的文字会被直接截断，不显示“...”；（仅iOS支持）
+  * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；（仅iOS支持）
+  * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”；（仅iOS支持）
   * `tail` - 文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”；
-  * `clip` - 超过指定行数的文字会被直接截断，不显示“...”，
 
 # span