html5网页设计教程读书笔记,《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)效果出现。这实际上会稍微慢一些,但体验上感觉更快。
手势的基本内容
触摸界面的某些管理需要遵循。一些交互需要滑动。最常用的是在一个传送带或幻灯片中,必须支持左右滑动来使得触摸环境合理。
滚动与滑动
不到万不得已,不要试图重新实现原生滚动,完美复制原生滚动是不可能的。
方向改变时,最简单的办法就是使用媒体查询去适应不同方向的布局。
双指缩放和其他复杂的手势
无
html5网页设计教程读书笔记,《HTML5 界面设计与开发》 读书笔记相关推荐
- UI设计使用模板素材|登录界面设计
登陆注册界面在咱们APP UI设计过程当中最有可能是最先接触到的东西,因为现在对于绝大部分的APP来说都有,形式也都差不多,估计大家认为设计出来的东西也都差不多,或者没有花精力去设计. 怎样让登录界面 ...
- 计算机设计大赛国奖作品_4. 界面设计
计算机设计大赛国奖作品_4. 界面设计 计算机设计大赛国奖作品_1. 项目概要 计算机设计大赛国奖作品_2. 报名材料 计算机设计大赛国奖作品_3. 需求分析 计算机设计大赛国奖作品_4. 界面设计 ...
- php 个人中心常见界面,UI设计灵感:个人中心界面设计(User Profile)
UI设计灵感:个人中心界面设计(User Profile) 9月 21, 2016 评论 Sponsor 只要有会员功能的网站或移动 APP,都应该有个人中心界面(User Profile),该界面就 ...
- Android学习之登陆界面设计(二)基本界面设计
Android学习之登陆界面设计(二)基本界面设计 前提 绘图样式 - drawable bg_login_btn_submit.xml bg_login_panel_slide.xml bg_log ...
- html5网页怎么弄才高级,Html5高级
什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准.HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处 ...
- html5网页小游戏 拖拽,HTML5拖拽功能实现的拼图游戏
本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 具体代码如下所示: drag拖拽 .box{ f ...
- ArcGIS二次开发基础教程(00):基础界面设计
ArcGIS二次开发基础教程(00) : 基础界面设计 (开发环境:VS2010+ArcEngine10.2+C# :鉴于学习ArcGIS二次开发的同学都有一定的WinForm开发和ArcGIS软件使 ...
- WP7应用开发笔记(3) 界面设计
界面设计 回顾一下按钮清单: 播放控制 播放/暂停 Space 停止 F4 快进 Right 快退 Left 快进X2 Control+Right 快退X2 Control+Lef ...
- UI交互设计教程分享:提高界面交互体验的“葵花宝典”
本次分享的是在界面设计中最长实用也最容易被忽略的十个原则,就是尼尔森十大可用性设计原则,这是十分基础且重要的原则.原则是死的,如何正确的结合到实际运用中才是关键.接下来我会通过对每一个原则的理解和现 ...
- web登录界面设计_出色的Web界面设计的7条规则
web登录界面设计 When you work on a website or on the design of web pages, remember that their success is n ...
最新文章
- 微软技术能力测试工具V0.1试用
- 华为设备不会配置静态路由怎么办?
- supervisor python_使用supervisor运行python脚本
- Ubuntu20.04 安装VMware Tools
- 文末送书丨深度迁移学习方法的基本思路
- SQL中CONVERT转化函数的用法[个人推荐]
- 2018.7.3 JS实现增删改查没有连接数据库
- python数据结构与算法13_python3数据结构与算法
- 大厨揭示Google成功秘诀:免费啤酒和寿司
- Spring配置文件总结
- excel怎么设置自动计算_最新个税计算Excel模版,含专项扣除 (自动生成),人手一份...
- 【火车头采集教程】轻而易举学会火车头采集(附带采集案例)
- 《DSP using MATLAB》Problem 7.36
- android 交互什么意思,知乎安卓客户端交互设计分析
- parellels desktop启动虚拟机报“操作失败”
- 【将图片格式转换为调色盘模式——语义分割】
- 使用Graham扫描法获取一个平面点集的凸包
- 一张图分出你是用左脑还是右脑 z
- Oracle 批量插入数据-插入民族数据
- 渗压计工作原理及基准值确定方法
热门文章
- 微信支付开通H5支付
- java mysql executequery_java - 无法使用executeQuery()发出数据操作语句
- 【超级表格创业谱】苏元:创业是一场豪赌,赌注是整个青春。
- 酒店计算机系统配置有,宾馆的电脑是怎样设置有自动还原的功能的?
- python语音控制智能家电_基于树莓派的智能家居语音控制系统
- python虽然火为什么工作少_我的心酸求职之路:如果可以,去学Java、C,不要搞Python...
- 技术成长四个阶段需要的架构知识
- java if 等于男_Java-第三章-使用if选择结构实现,如果年龄够7岁或5岁并且是男,可以搬桌子...
- 2013年第一季度 网游格局
- Android自定义View之(一)View绘制流程详解——向源码要答案