Tagged

web app

A collection of 6 posts

mobile

移动端webapp开发必备知识

转载自:移动终端开发必备知识 请尊重版权,转载请注明来源,多谢~~ 移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案。 基本概念 CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容。 device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式: 1 CSS pixels = (devicePixelRatio)^2 device pixels (^2是平方的意思,至于 devicePixelRatio是什么东西,后面会讲解) 。 PPI/DPI PPI,有时也叫DPI,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。

web app

缓存为王

前面我写了一篇快速web app的关键是使用Ajax、优化Javascript和更好的缓存。 使用Ajax可以减少网络流量到只有少量的JSON请求。 优化Javascript(异步下载脚本、分组DOM修改、对UI进程作出让步等)允许请求可以并行然后快速渲染。 更好的缓存意味着web app的大部分资源是存储在本地,然后并不会再有任何http请求了。 理解每种技术在哪里发挥作用很重要。使用Ajax,例如,不会让页面初始化加载更快(而且常常会不小心让它更慢),但是后面的“页面”(用户操作)会更爽。另一方面,优化Javascript,会让初始页面和后面的页面都更快,更好的缓存则位于中间:第一次访问不快,但后面的访问会更快。同时,即便在用户关掉浏览器之后再一次返回你的网站时初始化页面也会更快——这样性能优势要胜过浏览器会话(sessions)。 这些网站性能优化并不是互斥的——你应该都使用!但我(或者你也)想知道哪一个才有最大的效果呢?所以我进行了一次测试来测量这些不同的因素。我想要看看它们在实际网站中的效果,所以我使用了WebPagetest,这里我可以很方便的在Alexa排名前1000的网站中做一些测试。由于并没有办法让一个网站直接“Ajax化”,所以我决定专注与网络使用的时间。最后,我做了下面4项测试: 基准——用IE9和一个模拟的DSL连接速度(1.5Mbps下载、384Kbps上传,

web app

快速web app之道

我最近提到,一个快速的Web App的关键是Ajax架构、Javascript和缓存。虽然这样说是基于我的经验——我并没有每一项的贡献的实际数据或者量化的可能节省的性能。但请听我细说~~ Ajax架构——Web 1.0的基于用户每次操作来重新加载页面显然不是正确的选择。让用户拉下页面(移动终端拉下页面来刷新的方法)然后重新请求没有任何改变的资源会是一种很2B的用户体验。使用Web 2.0的App来维持稳定的UI就会更优雅,而且Ajax允许我们通过轻量的数据API请求和客户端Javascript来实现内容更新,这会显得平滑而快速。 Javascript——Javascript是网站性能的中流砥柱,但是几年前它更糟糕。还记得吗?过去通常会加载一个脚本,然后阻塞HTML解析和页面中其它资源的下载。脚本一次只下载一个!在2009年,IE8成为第一个支持并行脚本加载的浏览器。Firefox 3.5、Chrome 2、Safari4也很快跟进了,然后最近Opera 12也才跟上队伍。(在我看来对网站性能来说,并行脚本加载是唯一的、最重要的改进)除了加载脚本以外,Javascript引擎自身的速度也有了显著的提高。所以我们比几年前强太多了。但是当我深入研究主流网站的性能的时候发现Javascript依然是导致网站比较慢的最常见的因素,特别是减慢渲染。这主要源于几个原因。比如,Javascript请求已经增加到了约200kb了。浏览器仍然屏蔽Javascript的一些行为,比如,在有些浏览器中一个后面跟有内联脚本的样式会阻塞后面资源的下载。

b2g

Mozilla Boot to Gecko简介和展望

1月7日,Mozilla中国去的工程师在深圳腾讯大厦举办了Firefox新版本体验活动,其中一个话题是关于Mozilla Boot to Gecko项目的,之前我也只是简单的听说,没有深入了解,听了来自台湾的James的分享之后,感觉是,好期待啊! 因为这还是个进行中的项目,实际的资料也不是很多,我这里也只是简单的介绍下,详细的内容等今年Q1或者Q2吧,预计到时候会有实质性的进展。 简介: 设备启动后直接进入浏览器(Firefox的内核Gecko) 完全支持HTML5 基于Android底层,嗯,Linux 内核+驱动层,仅此而已 UI和所有功能都用Gecko实现 也就是说,浏览器可以完全访问和控制设备的硬件! 基于上一点,Mozilla在和W3C device APIs工作组编写一些需要用到的api,比如:电池状态、短信、联系人、电话、媒体捕获(摄像头、话筒等)、网络信息、处理器、各种传感器等。 也就是说,B2G是一个基于浏览器的操作系统,你可以在它上面打电话、发短信、视频聊天、玩各种游戏,

ios5

iPhone 4S 浏览器性能预览

iPhone 4S已经正式发售,虽然在国内还只能是水货,但是显然已经国外的同行已经开始研究它能给我们带来的改变了,而我们关注的,依然是浏览器~~ iPhone 4S硬件主要升级CPU和GPU,而这些给升级也为浏览器性能带来了很大的提升: **Apple****iPad****iPhone 4****iPad 2****iPhone 4S****SoC****A4****A5****处理器**1 GHz ARM Cortex-A8 (单核)800 MHz ARM Cortex-A8 (单核)1 GHz ARM Cortex-A9 (双核)800 MHz ARM Cortex-A9 (双核)**内存**256 MB LP-DDR (单通道)512 MB LP-DDR (单通道)

Apple

iOS 5中safari带来的新特性

随着iPhone4s的发布,iOS5也正是发布了,增加了很多很有用的新特性,不过对于前端开发者来说,最关心的还是浏览器,让我们来看一下苹果为iOS5中的safari新增了哪些新特性吧。 CSS 终于支持position:fixed了; 支持overflow:scroll了,通过-webkit-overflow-scrolling: touch;来实现: selector{ overflow:scroll; -webkit-overflow-scrolling: touch; } CSS3 gradient语法更新,将-webkit-gradient(linear|radial)拆分为,-webkit-linear-gradient和-webkit-radial-gradient。PS,年初发表过一篇关于《webkit对于CSS3渐变样式语法的更新》的文章,看来现在就剩下android的webkit了。 HTML5 新的兼容HTML5的解释器(parser) 表单增强新增时间类型date, datetime, month, time和range支持,好赞: 同时iOS5中safari也增强了number类型的input的验证功能。 支持web workers ,传说iOS3中短暂出现过web workers,不过后来消失了,现在又回来了。。。 增强ECMAScript5,测试结果显示支持情况跟上PC版的Safari 5.1了。