android html 布局设计,《HTML5 界面设计与开发》 读书笔记

移动设备概述

目前所有的移动设备在绘图上，都是用所谓的“共享内存”。与桌面电脑的显卡不同，移动设备上的图形硬件没有专用的内存，只是共享系统内存。这意味着，随着越来越多的东西被添加到图形存储器，系统可用的内存就会越来越少。在我们随后讨论图形加速时，牢记这一点很重要。

用户界面只需让人感觉快，而无需真的块。只需及时响应——立即响应用户，让他知道有反应了。

手势不能等到完成时才反馈。为了让界面感觉反应迅速，还必须是连续的反馈，当用户的手指移动时候，界面也应该移动。

创建一个简单的内容型网站

在许多情况下，我们完全可以利用CSS3的新特性——媒体查询来避免分支。

由于网站要能在最慢的免费的Android手机上运行，当涉及CSS选择器的性能时，我们要非常挑剔，也就是说要避免使用后代选择器。

提高第一次加载的速度

对于较大的文件，比如比较大的图像，说法有所改变。因为下载站到了请求时间的绝大部分，所以并行下载更好。出于这个原因(以及一些其他的原因)，在网站上将图像与其他资源置于不同的域下市合理的。

不过由于每个域都需要进行DNS查找，添加太多的域反而会更慢。使用至少两个，至多不超过五个域名是YSlow的经验法则。

内容分发网络(CDN)是一种服务，让你能够从“周边的服务器”上获取某些(通常是静态的)内容：服务器分布在很多地方，最好的情况是可以就近地服务最终用户。这种服务通常用于图像、JavaScript和CSS文件，因为他们不太可能动态变化。

请求数太多时，内联样式不会改善多少状况。由于在文档中，图像标签没有位于脚本标签之前，所以浏览器在jQuery完全加载完毕之前无法开始获取图像。

Fickr上，用户上传大尺寸的图像后，其他尺寸的图像会自动创建。

避免图像太大的诀窍是：确保大的图像没有被移动端下载，只有该设备对应的图像才应该下载。通过媒体查询来区分不同的图像。

加快下一次访问的速度

大多数浏览器都有一个最大缓存大小。当缓存达到这个大小时，就会从缓存中删除最近最少使用的项目。

使用PJAX提升触摸体验

使用PJAX来代替加载页面，即将pushState和AJAX结合起来使用：AJAX负责更新内容，pushState负责更新URL。

大多数用户都知道URL是什么，知道他事项互联网上一个特定的“东西”。当他们在Twitter上单击一个链接的时候，他们希望看到的内容和他们的朋友看到的内容完全一样。破换链接是一个极大的错误。

轻触VS单击：基本的事件处理

之所以有点慢，是因为每一次单击都延迟300毫秒。为了获得触摸界面的最佳性能，你需要用触摸时间，而不是单击事件。

CSS过渡、动画和变换

尽量避免使用setTimeout动画。对于大多数人物，CSS过渡(transition)可以达到你想要的效果，而且体验更好。

当你优化了所有的动画之后，可能会发现它们仍然不够快。现在是时候拿出这把大枪了：CSS变换。

GPU是专为动画和合成二设计的。在有GPU的设备上，浏览器毁在可能的情况下尝试使用GPU加速。(2D)变换不一定在GPU上渲染，但3D变换总是在GPU上渲染。

3D变换导致了文字的模糊。由于2D变换不需要渲染图像，浏览器能够以较大的尺寸重新渲染文本。GPU只有图像可供操作，所以它只能按比例放大图像，从而得到一个模糊的版本。要解决这个限制，一旦动画完成，我们就可以“净化”变换的元素。可以在动画将完成时，通过在出发transitionend或animationend事件时改变样式，将3D变换转换回2D变换。

净化变换还有一个好处：释放GPU占用的内存。

JavaScript性能最优化

提升感知上的性能的真正秘籍是及时反馈用户。

可以在一旦图像完成加载时使用淡入(fade in)效果出现。这实际上会稍微慢一些，但体验上感觉更快。

手势的基本内容

触摸界面的某些管理需要遵循。一些交互需要滑动。最常用的是在一个传送带或幻灯片中，必须支持左右滑动来使得触摸环境合理。

滚动与滑动

不到万不得已，不要试图重新实现原生滚动，完美复制原生滚动是不可能的。

方向改变时，最简单的办法就是使用媒体查询去适应不同方向的布局。

双指缩放和其他复杂的手势

无