在Cordova系列第四篇《Cordova应用解析》中简单提到过TopCoat。这里对它做一个简单的了解。
TopCoat是一个构建快速、高性能UI的CSS框架,是一个Adobe开源项目,目标是在速度和反应上使web应用更像Native应用。
TopCoat获得性能提升的方法之一是通过使用基准指标测试浏览器在渲染TopCoat组件时的表现。通过测量加载时间和每秒帧数(fps)找到表现低下的CSS属性。
安装
下面以使用TopCoat构建一个简单的用户界面为例。通过链接(https://github.com/topcoat/topcoat)下载TopCoat源码。下载解压后,进入demo文件夹打开index.html,可以看到TopCoat组件的使用示例说明。
TopCoat样式表
进入css文件夹,看到8个css文件:
- topcoat-desktop-dark.css
- topcoat-desktop-dark.min.css
- topcoat-desktop-light.css
- topcoat-desktop-light.min.css
- topcoat-mobile-dark.css
- topcoat-mobile-dark.min.css
- topcoat-mobile-light.css
- topcoat-mobile-light.min.css
可以看到分成了桌面和移动两个版本,并且各有dark和light两种主题。
画UI设计图
画UI设计图有助于帮助勾勒出需要哪些TopCoat组件。
可以看出需要三种TopCoat组件:导航条、列表和按钮。
创建html
引用topcoat-mobile-light.css,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Online Banking Interface</title>
<link rel="stylesheet" href="css/topcoat-mobile-light.css">
</head>
<body>
</body>
</html>
添加TopCoat组件:
在<body
>标签中添加导航条、列表和按钮组件,打开浏览器浏览器测试一下:
<div class="topcoat-navigator-bar">
<div class="topcoat-navigator-bar__item center full">
<h1 class="topcoat-navigator-bar__title">Accounts</h1>
</div>
</div>
<div class="topcoat-list">
<h3 class="topcoat-list__header">Deposits</h3>
<ul class="topcoat-list__container">
<li class="topcoat-list__item">Personal Checking - $12,322.10</li>
<li class="topcoat-list__item">Personal Savings - $25,322.10</li>
</ul>
</div>
<div class="topcoat-list">
<h3 class="topcoat-list__header">Loans</h3>
<ul class="topcoat-list__container">
<li class="topcoat-list__item">Mortgage - $662,322</li>
</ul>
</div>
<div class="topcoat-list">
<h3 class="topcoat-list__header">Investments</h3>
<ul class="topcoat-list__container">
<li class="topcoat-list__item">401k Account - $232,322.10</li>
</ul>
</div>
<p><button class="topcoat-button--cta">Sign Out</button></p>
截图如下:
使用自定义构建方式改进性能
可以通过构建自定义的样式表提高web性能,让它只包括会用到的Topcoat组件。
要使用定制的Topcoat构建方式,需要:
- Node
- npm
- Grunt CLI
- Grnnt
打开topcoat目录下的package.json,在dependencies中去掉不想用的依赖。这个例子中只需要以下依赖:
"dependencies": {
"topcoat-button-base": "0.6.1",
"topcoat-navigation-bar-base": "0.5.0",
"topcoat-navigation-bar": "0.5.0",
"topcoat-list-base": "0.4.1",
"topcoat-list": "0.5.0",
"topcoat-button": "0.5.4",
"topcoat-theme": "0.6.4",
"topcoat-utils": "0.2.0"
}
打开命令行工具,进入TopCoat目录,如果没有安装Grunt CLI使用如下命令安装:
npm install -g grunt-cli
使用不带参数的install命令安装所有需要的依赖
npm install
构建自定义的样式表用如下命令:
npm grunt
现在进入css文件夹注意到样式表文件变小了,这是因为去掉了一些没用到的样式规则。
关于TopCoat更多的提升Web应用性能的信息请关注GitHub资源库(https://github.com/topcoat/topcoat/wiki/Performance-First)。
作为Cordova系列的补充,对TopCoat的简单介绍就到先这里了。