《HTML5 界面设计与开发》 读书笔记
为什么80%的码农都做不了架构师?>>>
移动设备概述
目前所有的移动设备在绘图上,都是用所谓的“共享内存”。与桌面电脑的显卡不同,移动设备上的图形硬件没有专用的内存,只是共享系统内存。这意味着,随着越来越多的东西被添加到图形存储器,系统可用的内存就会越来越少。在我们随后讨论图形加速时,牢记这一点很重要。
用户界面只需让人感觉快,而无需真的块。只需及时响应——立即响应用户,让他知道有反应了。
手势不能等到完成时才反馈。为了让界面感觉反应迅速,还必须是连续的反馈,当用户的手指移动时候,界面也应该移动。
创建一个简单的内容型网站
在许多情况下,我们完全可以利用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)效果出现。这实际上会稍微慢一些,但体验上感觉更快。
手势的基本内容
触摸界面的某些管理需要遵循。一些交互需要滑动。最常用的是在一个传送带或幻灯片中,必须支持左右滑动来使得触摸环境合理。
滚动与滑动
不到万不得已,不要试图重新实现原生滚动,完美复制原生滚动是不可能的。
方向改变时,最简单的办法就是使用媒体查询去适应不同方向的布局。
双指缩放和其他复杂的手势
无
转载于:https://my.oschina.net/lifj/blog/348245
《HTML5 界面设计与开发》 读书笔记相关推荐
- 读书笔记 | 墨菲定律
1. 有些事,你现在不做,永远也不会去做. 2. 能轻易实现的梦想都不叫梦想. 3.所有的事都会比你预计的时间长.(做事要有耐心,要经得起前期的枯燥.) 4. 当我们的才华还撑不起梦想时,更要耐下心来 ...
- 读书笔记 | 墨菲定律(一)
1. 有些事,你现在不做,永远也不会去做. 2. 能轻易实现的梦想都不叫梦想. 3.所有的事都会比你预计的时间长.(做事要有耐心,要经得起前期的枯燥.) 4. 当我们的才华还撑不起梦想时,更要耐下心来 ...
- 洛克菲勒的38封信pdf下载_《洛克菲勒写给孩子的38封信》读书笔记
<洛克菲勒写给孩子的38封信>读书笔记 洛克菲勒写给孩子的38封信 第1封信:起点不决定终点 人人生而平等,但这种平等是权利与法律意义上的平等,与经济和文化优势无关 第2封信:运气靠策划 ...
- 股神大家了解多少?深度剖析股神巴菲特
股神巴菲特是金融界里的传奇,大家是否都对股神巴菲特感兴趣呢?大家对股神了解多少?小编最近在QR社区发现了<阿尔法狗与巴菲特>,里面记载了许多股神巴菲特的人生经历,今天小编简单说一说关于股神 ...
- 2014巴菲特股东大会及巴菲特创业分享
沃伦·巴菲特,这位传奇人物.在美国,巴菲特被称为"先知".在中国,他更多的被喻为"股神",巴菲特在11岁时第一次购买股票以来,白手起家缔造了一个千亿规模的 ...
- 《成为沃伦·巴菲特》笔记与感想
本文首发于微信公众帐号: 一界码农(The_hard_the_luckier) 无需授权即可转载: 甚至无需保留以上版权声明-- 沃伦·巴菲特传记的纪录片 http://www.bilibili.co ...
- 读书笔记002:托尼.巴赞之快速阅读
读书笔记002:托尼.巴赞之快速阅读 托尼.巴赞是放射性思维与思维导图的提倡者.读完他的<快速阅读>之后,我们就可以可以快速提高阅读速度,保持并改善理解嗯嗯管理,通过增进了解眼睛和大脑功能 ...
- 读书笔记001:托尼.巴赞之开动大脑
读书笔记001:托尼.巴赞之开动大脑 托尼.巴赞是放射性思维与思维导图的提倡者.读完他的<开动大脑>之后,我们就可以对我们的大脑有更多的了解:大脑可以进行比我们预期多得多的工作:我们可以最 ...
- 读书笔记003:托尼.巴赞之思维导图
读书笔记003:托尼.巴赞之思维导图 托尼.巴赞的<思维导图>一书,详细的介绍了思维发展的新概念--放射性思维:如何利用思维导图实施你的放射性思维,实现你的创造性思维,从而给出一种深刻的智 ...
- 产品读书《滚雪球:巴菲特和他的财富人生》
作者简介 艾丽斯.施罗德,曾经担任世界知名投行摩根士丹利的董事总经理,因为撰写研究报告与巴菲特相识.业务上的往来使得施罗德有更多的机会与巴菲特亲密接触,她不仅是巴菲特别的忘年交,她也是第一个向巴菲特建 ...
最新文章
- Java-Web 基础加强之泛型、注解和Servlet3.0新特性
- django-allauth定制模板(转载)
- 多重背包单调队列优化思路_动态规划入门——多重背包与单调优化
- php优化上百次foreach,php – 优化数千个项目的foreach
- 轻松搞定vmware + win2003Cluste
- Redmi Note 11系列来势汹汹,一“机”打尽更多看不见的旗舰猛料
- Linux定时器函数setitimer
- 停止MySQL正在执行的SQL语句
- Linux acpi off报告ACPI bug处理方法
- linux安装pl脚本,nagios插件脚本check_linux_stats.pl 安装
- IT行业主要职业有什么?
- 十分钟玩转3D绘图:WxGL完全手册(第二版)
- 一、Synchronized详解与锁升级
- 中英文停止词表(stopword)
- Win7问题汇总及解答!
- ML-czy的小组任务4
- C语言 吃鱼还是吃肉
- 机器学习实战——人脸表情识别
- 【MYSQL慢查询】
- 第12周项目4—点、圆的关系
热门文章
- VMware vSphere ESXi 和 vCenter Server 5.1 文档地址
- 【uoj#225】[UR #15]奥林匹克五子棋 构造
- 【二分图】洛谷P1640连续攻击游戏
- H5新特性 input type=date 在手机上默认提示显示无效解决办法
- ng-repeat 设定select 选择项
- 【贪心】【codeforces】651A Joysticks
- 修改AspNetSqlMembershipProvider的密码规则
- Delphi 2007体验!
- 面向对象的基本设计原则【转】
- 雷鸣----总结下男人30岁之前要知道的事