后使用快捷导航没有帐号？
查看: 1418|回复: 8
开源典藏：WEB极好的开发资源
在这里保存了我对Web开发的资源和前端用户界面(UI)的整合。% k&&k- ?/ g: z& L( v( s
　　HTML5和所有相关的开放标准的发展迅速，但现在最重要的是在HTML5上建立整个Website/WebApp很不一致，尤其是在不同的浏览器中体验。所以，我们该如何采用新的网络技术？现在，随着Web开发人员和设计师，我们必须建立在更加稳定的框架上。在这里JavaScript jQuery，就像走进浏览器的实现的接口，我们可以期待更好的稳定性和一致性。单靠JS是不够的，现在建立一个最新进的网站就像一部大片，和很多专门的任务和工作岗位是一样的。尽管我们不是一个专家，但是也可以试试。+ ~; k/ r' d. k( H3 x
　　学习HTML 5编程和设计
: t3 P* P; ?( @
：Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 )。 很不错的 – Mozilla，效果很炫。，一个清楚的 HTML5 技术规格说明书。：大名鼎鼎的技术问答式论坛。，jQuery 和 JavaScript 文章教程。，jQuery 和 JavaScript 文章和教程。是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 HTML， CSS，Javascript，CMS’s，PHP 和 Ruby on Rails。，教程和 web 资源。，最好的开源资源。– PHP MySQL jQuery CSS 教程, 资源和赠品。。，作者自己收集的一些代码片段。　　端的软件
' g5 C0 ~&&_/ w" t2 S6 d& r# O
★ 是端的JavaScript 环境，其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 和。也是一个服务器端的JavaScript API的WebKit。其支持各种Web标准： DOM 处理, CSS 选择器，JSON，Canvas，和 SVG 。一个轻量级的开源Web服务器。新闻，文档，benchmarks，bugs，和download. Lighttpd 支撑了几个非常著名的 Web 2.0 网站，如：YouTube, wikipedia 和meebo。，性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间，终于走到了1.0版。是一个很流行的并支持多个流行的的Web服务器。★可能是最流行的服务器端的Web脚本动态处理语言。当然，还有 ，，，，，，，，，，，等。
　　PHP 框架和工具1 u1 a( q+ @6 X
: G3 H& t* M: ^& j, k
★是一个基于博客系统的开源软件。参看《》。是一个内容管理系统 (CMS)。是一个新出现的开源 CMS，一个灵然的 PHP5 Content Management Framework. 使用 Zend Framework，其组件坚持通用，简单，清楚和可重用的设计原则。一个开源的论坛（国内的Discuz！更多。★ ：超快的，易用的，RSS 和Atom feed PHP解析。★ ，PHP 图片处理库。★强大的全功能的PHP邮件库。协议，一个简单，开放， server-to-server 的 pubsub (publish/subscribe) 协议——Atom and RSS的扩展。更多的请参看 –
和 。　　数据库
% d7 e3 F; o8 M3 ?
★是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST 接口来对其进行操作，并可以通过视图来操纵文档的组织和呈现。是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序，支持大部分常用的功能包括：表格设计，数据浏览/编辑，数据导入/导出和高级查询等。是的一个分支，由MySQL 创始人Monty Widenius 所开发。GPL，用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来，整个社区对于MySQL前途的担忧就没有停止过。★不像常见的客户端/结构范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库（定义、表、索引和数据本身）都在宿主主机上存储在一个单一的文件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准，包括事务，就是代表原子性、一致性、隔离性和持久性的（ACID），触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新，特别是与无类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。，这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。
　　API 和在线数据
% S. v1 }: B- H. _) O&&Q% _
, 最流行的Web Services 和 API 目录大全。一组Google服务的数据服务API。– APIs 和 Tools可视化在线编程工具，它是一个用于过滤、转换和聚合网页内容的服务。★ The 一个很像 SQL的网页查询工具。　　在线代码和媒体编辑器& ?, ^% a6 x7 N9 ?8 D
6 ^" R/ G- _# I% H' Z: n6 c" x
★ ，一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。（参看《》）。– 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。★
– Javascript的在线运行展示框架，这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，其简单而强大 (JavaScript，MooTools，jQuery，Prototype，YUI，Glow and Dojo，HTML，CSS)。，一种云服务，它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。 它还提供云托管，所以部署是即时的。，一个好用的JSON 编辑器。★ ，一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。是一个桌面应用工具，帮助你快速开发基于ExtJS 的用户界面。★ ，一款基于最新的html5技术的在线图表绘制软件，功能强大，速度快捷，运行此软件需要支持html5的浏览器。，产品设计师绘制线框图或产品原型界面的利器。3，一个免费的线上调色工具。★ ，是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近。Photoshop，还是多语言版本，支持简体中文。，是一个基于HTML5 的在线图片处理工具，可以很容易的对图片进行后期处理。 ，线上favicon(16×16)制作工具。
　　代码资源和版本控制
/ S, Y, Y1 Z0 S% Y% I! ~&&Q
★ 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。其巨快无比，高效，采用了分布式版本库的方式，不必端软件支持，使源代码的发布和交流极其方便。谷歌公司官方的开发者网站，包含各种开发技术的API、开发工具、以及开发技术参考资料。Google 将优秀的 JavaScript 框架部署在其 CDN 上，在我们的网站上使用 Google Libraries API 可以加速 JavaScript 框架的加载速度。一个开放的源代码技巧分享社区，号称Code 2.0。和一般的源码分享网站不同，它针对的并不是大型网站源码，而是一些编程的代码技巧。　　JavaScript 桌面应用框架
; e6 w9 I( {1 v, Y9 v' d&&k
★ 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了的快速发展。 ，，，。★ 官方的(演示和文档)。，，。，Yahoo! User Interface Library。，一个超级轻量级的 web2.0 JavaScript framework。提供面向对象的Javascript和AJAX。The Dojo Toolkit，一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。★ ，业内最强大的 JavaScript framework。，一个开源的JavaScript 库，它尝试在JavaScript 中实现PHP 函数。在你的项目中导入PHP.JS 库，可以在静态页面使用你喜欢的PHP 函数。
　　JavaScript 移动和触摸框架% x" r/ h( R. w. w. i
: y: ^# z) I&&f+ l&&W/ h, ~- v& i
★ ，是 jQuery 在上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。 。，Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 。，Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。★ ，是一款开源的应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 。★ ，Sencha Touch 是一个支持多种智能手机平台（iPhone, Android, 和BlackBerry）的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。，是一个jQuery 的插件，主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 。，针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。　　jQuery 插件
，是一个jQuery 用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。，插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。，一个简单和强大的 tweening / animation 的Javascript库。，类Css3的jQuery 动画插件。，这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。，jQuery 文件上传插件4.4.1。插件。。– 全屏式的背景/幻灯片插件。i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css。。jQuery 简单 演示，管理各种边栏式，可改变大小式的布局。– jQuery 数据表插件。绝对是一个令人难以置信的jQuery插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。jQuery 插件可以实现手势的功能。是由Brandon Aaron开发的jQuery插件，用于添加跨浏览器的滚轮支持。jQuery 插件可以让你添加一些自动完成的功能。一个漂亮的jQuery 的工具提示插件，这个插件功能相当强大。jQuery 用来制作图表。jQuery Tools– The 。
　其他jQuery插件
　　HTML5 视频播放器
★ ，是一个HTML5 Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)。，HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)。，为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏览限制。　　JavaScript 音频处理与可视化效果
( v6 d& ?$ {9 Z/ q6 o( o
★ 使用HTML5 和 Flash，只用单一API的提供了可靠，简单和强大的跨平台的音频处理。，JavaScript的声音Digital Signal Processing。The Radiolab v1，带给你 WNYC Radiolab，SoundCloud和Mozilla Drumbeat， 一个 jQuery HTML5 音频/ 视频库，功能齐全的API。
　　JavaScript 图形 和 3D
★ 是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。★ Javascript 3D 引擎，由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用&canvas&, &svg& 和 WebGL。，一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等。，Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如。，你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。，由Khronos Group 收集的一个WebGL框架列表。，一个使用html5的canvas的 JavaScript 库。。，免费的JS游戏框架列表。另，可参看 。，是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看。，插件让你可以了 SVG canvas 进行交互。– 参看本站的。，是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。　　JavaScript 浏览器接口 (HTML5)8 g& w- W4 ?! m& N
7 n# f7 G3 ?/ L3 l4 U2 w3 T&&a
★ – 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.. 一个有用的列表 。，该项目的目的是为了让IE 能识别HTML5 的元素。，这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。，一个异步的条件式的加载器。。jQuery ，是否厌倦了为每一个浏览器的CSS3属性加前缀？★，一套用于web应用数据管理和应用程序通讯的 jQuery 组件库。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request增加了一些额外的特性。 .，优美地支持了HTML5 History/State APIs。，Web的socket编程。
　　JavaScript 工具
★，小型的JavaScript 模板引擎。，CSS式的JSON选择器。，异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。，一个试验性的项目，用来处理式的图片。是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。，交互式的 DOM 脚本和DHTML 的开源演示。是一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models，collections，views和events，controller 。　　客户端和模拟器
&&W0 Y$ p/ o9 [- j
，检查浏览器的兼容性，跨浏览器平器的测试。，输入一个你想要测试的URL……。模拟器。模拟器。模拟器。★ 与 集成，可以查看和调试你的Web页面。
　　CSS3 和字库&&e# @: n&&t' I&&[2 s$ ^
★ CCS3的生成器。容易地创建 。Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。– CSS 文本扭曲生成器。，一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla。★ 通过Google Web Fonts API 可以浏览所有的字体。，为Web转换字体，比较字体。一组responsive web 设计。，UI组件。　　Website (FULL) 模板
3 O3 a&&e% j* l+ ~( e
★ 是一个HTML5 / CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 。是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。★ 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。（）。如果通过 jQuery 和 CSS 制作一个应用的网站。如果通过 jQuery Mobile 创建一个RSS Reader 。★ 使用jQuery的朋友们 (Backbone，Underscore， …)创建单一页面。, 传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。是一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能透过W-iFi控制Google TV的方法。Optimized Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过上的方向键、Backspace或Enter等键完成，方便今后的网站开发人员借镜。HTML5 版的模板使用了，jQuery 和 Closure 。评论-3181&
trackbacks-0
单页or多页
本文仅代表个人观点，不足请见谅，欢迎赐教。
小钗从事单页相关的开发一年有余，期间无比的推崇webapp的网站模式，也整理了很多移动开发的知识点，但是现在回过头来看，webapp究竟是好还是不好真是一言难尽哟！
webapp使用JavaScript修改页面；紧接着再从服务器传递更多数据然后再修改页面，如此循环。
从性能的角度看，在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美，而且几乎所有的操作系统都支持现代的浏览器。
所以，很多人认为webapp是HTML5流行过程中最大的赢家，那么他有哪些特定呢？
SPA（single page application），即单页webapp，它具有以下优点：
用户体验，对于内容的改动不需要加载整个页面。这样不会出现白页情况，页面与页面无缝切换，甚至带有一定动画效果。
请求量少，请求内容无需服务器解析，对服务器压力较小，消耗更少的带宽，比如每次不需要接收完整的html结构，而只需要json数据。
当然，单页应用也不是完美无瑕的，他也具有以下问题：
由于历史原因，单页应用对SEO支持不是太好，需要对SEO做特殊处理。
首次加载量过大，首屏加载慢，所以首屏需要做特殊处理。
本身入门门槛就高，加之view编码需要释放资源，以免heap值过高，对编码人员的要求较高。
传说中的webapp足以媲美native app，事实上这个足以还有很大的距离，小钗预计这个&足以&需要用2-3年时间填平，所以事实是什么呢？
事实上移动端的webapp模式的网站很少很少，一淘半年前还是，这两天一看又变回来了，小钗虽然对webapp抱有信心，但是信心从何而来呢？
携程webapp独树一帜，去哪儿ipad介入webapp，但是国内主流网站依旧是传统网站，主要原因不过有二：
② 不想吃螃蟹
所以，携程的webapp在国内，何其可贵，说到这里，我都要哭出来了......
孰优孰劣非是小钗可以论断，求稳，webapp不比传统网站；求SEO，webapp需要其它解决方案；说垃圾收集，webapp需要自己释放资源。
说体验，webapp需要考虑首屏加载；说动画，webapp要考虑低端手机，所以webapp还有很长一段路需要走！
小钗相信，现在的webapp效果不可媲美native app，总有一天，当webapp不再制约于网络、设备，那么webapp的春天不会远。
虽说如此，现阶段webapp也会有许多优化心得、奇技淫巧可以拿出来说说的，这里小钗做一次分享，希望可以对webapp的同学有所帮助。&
网络传输优化
前端优化分为两个切入点：网络传输与DOM操作，而网络传输是制约一个网站速度的主要因素。
网络传输的优化要点是，零请求，无流量，其意是最大程度的减少请求数，降低请求量。
对webapp模式的应用来说，首屏加载慢是一个不可避免的问题，所以提升webapp首屏加载速度是提升整体网站速度的关键。
fake页-首屏加速
以上是一个网站首页的加载时间，我们分别取其150kb与30kb网速的加载速度，可以看出会慢！若他是webapp，我们可以做一些优化
我们应该避免页面长时间白页，这个时候便提出了fake页的概念。页面渲染只需要完整的HTML以及CSS，这个便是第一个优化点。
从数据请求数以及请求量来说，webapp首页的响应应该比较慢，若是任由js加载完成再渲染页面，用户很有可能失去耐心。
但是从DOMContentLoaded来看，首页事实上页面响应比较迅速，所以这个加载结束后页面第一屏便渲染结束，然后再异步加载js，当js改变后再动态改变dom结构中的一些关键点
这个时候一个静态HTML页面，装载首屏的基本内容，让首页快速显示
然后js加载结束后会马上重新渲染整个页面，这个样子，用户就可以很快的看到页面响应，给用户一个快的错觉，给人感觉快得多。
降低请求数
由webapp首页来说，不可避免的使用的js文件较多，这些文件分为两类：
① 框架js-css
② 各个业务团队js-css
所以可以限定每个业务团队只会加载这四个文件，以最小降低请求数，这里又涉及到并行加载，数量与容量有一个临界值，如何取这个临界值需要各位自己去实验&
降低请求量
虽说图片压缩是不必说的事情，但是总会有些时候你会发现一些网站的图片尺寸很大，这个需要处理，而且必须处理。
以框架库为例，除了核心包以外，不需要的UI或者功能库可以剔除，用到了再动态加载，减少首次加载量，这个一开始就得做好，做不好后期就不好改
以业务团队为例，首次加载的js与html模板会将常用的几个页面压缩合并，其它页面访问时再请求，若是想提升首屏加载便可以只下载需要的页面文件。
另外，以下两点尤其需要注意：
① 若是你们是要的还是jQuery库的话，可以考虑换成zepto了
② 勿胡乱引用第三方库，若是要引用一定是读懂源码的情况下重写使用之，这样的好处是，吃得透，万一有问题，能改，而不是没办法又换库
缓存Ajax/localstorage
该方案的原理与前面类似，我们发送Ajax请求时候，应该缓存一些非实时数据，比如城市信息和常用联系人，但是我们只能缓存非敏感信息，
产品搜索页至列表页的请求数据会缓存30s-60s，若是过期时间内用户回到列表页的话不会重新请求数据
这对服务器压力，页面响应皆是有利的，这个在30s内事实上意义不大，可以减少一次请求。
另外，对于get和post的效率，曾经有人做过一次测试：
get100次平均耗时323ms；post100次平均耗时589ms，所以post方式是比get慢的，但post请求的优点是安全，并且参数没有长度限制。
是选择post还是选择get，皆需要处理，避免截断url，或者处处post。-
只显示首屏页面，其它内容需要时再加载，比如列表页、图片lazyload，皆需要做
DOM操作优化
DOM操作主要分为页面渲染与资源清理（heap控制），两者之间又相辅相成，若是DOM操作一块处理不好，其产生的感觉就不再是慢，而是卡
所以DOM操作优化的主要目的就是消灭页面卡的问题，这个在移动端尤为重要。
关于页面渲染
浏览器会解析三个东西：HTML、Javascript、CSS
浏览器首先会根据HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，javascript可以通过DOM API与CSS API操作DOM Tree与CSS Rule Tree，从而引起页面变化。
浏览器解析结束会通过DOM Tree与CSS Rule Tree形成render tree，只有display不为none的元素才会形成render Tree，render Tree形成后浏览器会调用GUI绘制页面，在此之前做的一件事情便是layout或者说reflow。上面的描述简单而言可以分为以下流程：
l& 生成DOM树
l& 计算CSS样式
l& 构建render tree
l& reflow，定位元素位置大小
l& 绘制页面
在这个过程中，若是javascript动态改变DOM Tree便会引起reflow
页面中的元素改变，只要不影响尺寸，比如只是颜色改变只会引起repaint不会引起回流
否则，reflow不可避免，这个时候便需要重新计算形成render Tree
reflow分为局部回流与全局回流，会影响下面的，不会影响上面的元素
reflow耗用的系统资源较大，DOM Tree中受到影响的节点皆会reflow，然后影响其子节点最坏的情况是所有节点reflow，该问题引发的现象便是低性能的电脑风扇不停的转，手机变得很热，并且非常耗电，以下操作可能引起reflow
l& 操作dom结构
l& DOM样式修改
l& 获取元素尺寸的API
减少使用定位属性（fixed/absolute）
static元素处于文档流中，其渲染速度是最快的，我们做过一个测试：
100个absolute元素与100个static元素渲染时差在0.01-0.007ms
100000个元素渲染差距便增至30ms左右，这个微小的时差在移动端变得尤为明显，比如：
小米/三星手机（1000左右），便存在明显的渲染问题，具体表现为：
l& 定位元素在手机上不能显示。
l& 定位元素动画效果失效。
以上问题便是UI渲染失效多导致，最好的解决方案是减少使用定位元素，否则只能引起强烈reflow才能解决。
另外，产品经常会有fixed的相关需求，比如支付按钮一直出现在低端，这个需求会造成两个问题：
l& fixed元素遭遇文本框时失效，可能会飘到页面中间阻挡输入
l& 影响效率
问题一原因与移动端的实现有关，暂时没有完美的解决方案，问题二便与渲染直接关联
滚屏时，页面上所有的像素会跟着滚动，显卡对全屏幕上下移动的处理很快，但是若是出现一个fixed元素或者有元素不跟着一起滚动，那么滚动对手机浏览器来说就是一个负担，这种滚动的性能甚至体现在了iphone 4s，因为滚动可能会造成reflow，这个现象体现在：
使用absolute配合javascript模拟fixed效果时，会有断片的效果，该问题在iphone5s便不会出现这个问题。
当然，我们不能忽略产品的需求，fixed类需求应该在技术上得到解决，还用户一个良好的体验。
虚拟键盘导致fixed元素错位
fixed元素一定会伴随虚拟键盘的出现，但是虚拟键盘只是&贴&在了viewport上，表面上不会对dom产生&任何&影响，但是这个时候fixed元素表现却变得怪异起来，会错位。
应用层面解决问题方案是，虚拟键盘弹出时将fixed元素设置为static，虚拟键盘消失时候设置回来。
由于虚拟键盘出现并未抛出事件，而检测scroll或者resize事件，皆会有一定延迟，会出现闪烁现象，所以现有最好的方案是setinterval定时器监控当前获取焦点元素是否为文本元素，若是是的话便需要处理，如此便可解决fixed元素错误问题。
fixed元素滑动惯性平滑度
我们常常遇到这种产品需求，tab标签栏开始固定，当滚动向下超过该标签栏后便会变成fixed元素，一直出现在头部，这样的需求在电脑上没有问题，但是在iPhone5s以下的手机常常会出现小范围错位或者快速移动大范围错位的问题。
这个时候我们可以引起reflow迫使浏览器重绘以解决这个问题，这里推荐一个奇怪的hack写法：同时设置三个image元素的src属性，便可以全范围解决该难题，& 该方案被团队证实并得到应用。
//三图片src，引发reflow，处理fixed方案惯性问题
var el = this.els.ctlc.find('img');
$(el[0]).attr("src", 'http://res./html5/Content/images/144.png');
$(el[1]).attr("src", 'http://res./html5/Content/images/144.png');
$(el[2]).attr("src", 'http://res./html5/Content/images/144.png');
另外，上图中的tab标签下面的蓝线具有动画，但是在小米或者三星手机上可能不会移动，这个时候也可以动态引起reflow解决这个BUG。
l& CSS选择器尽量使用id与class，避免过度层叠
l& 避免使用数值，比如：border: none不会引起渲染，而boder: 0会
l& 动画时候让元素脱离文档流，以免导致大量reflow
l& 避免逐条修改DOM样式，改以className实现同样功能
l& 操作DOM时将display设置为none，因为这种元素不会影响渲染，或者操作fragment对象取代操作显示在页面上的DOM
l& 避免将获取DOM样式属性的操作写在循环中，可能引起重复reflow
内存资源优化
移动端的javascript
首先，移动端的性能与PC端的性能完全不在一个数量级上，比如，我哥做过一个测试，使用innerHTML绘制大段，之后想获取HTML的ID节点，事实上是获取不到的，这种问题在单页模拟多页，动态创建DOM会经常发生
var element&& = $('&div id = "test"&...大量结构...&/div&');
$(root).html(element)
$('#test)& //为空
这类问题匪夷所思，因为页面UI渲染与DOM操作是互斥的，但是就算出现了这个问题，一个解决方案是使用settimeout，更好的方案是使用DOMNodeRemoved事件监控页面DOM改变，将我们的DOM操作回调放入以确保渲染结束。
以上问题只是为了说明移动端的性能问题，这类性能问题会导致很多莫名其妙的问题，而且很多与渲染有关。但是这也从侧面说明了移动端资源的紧缺，若是heap值过大，会导致操作出现卡的现象，更有甚者，会引起页面假死直接退出。
webapp的模式，完全依赖于浏览器的垃圾回收，基本就是作死，因为传统页面一旦刷新页面整个资源完全释放，而webapp没有刷新这类操作，只有一个状态到两一个状态，不相关的内存会保留，资源必须手动释放，或者说，框架必须提供垃圾释放的机制。
这个由图表heap值变化可以清晰看出。
而view切换过程中，不用的资源若是不手动设置为null会导致变量得不到回收便脱离框架控制而失控了。所以我们在webapp的过程中需要注意：
l& 释放没有使用的闭包
l& 观察者需要得到清理
l& 释放定时器
l& view切换过程中，在destroy中释放view相关资源
&&感谢艾伦友情支援
在我们工作过程中，滥用局部变量极有可能引起闭包陷阱，这个问题不止是性能问题，在逻辑上会引起错误，而且不易发现，比如，在AMD闭包中使用一个局部变量
var _attributes = {};
callback ($.extend(_attributes, opts));
如此操作，会改变_ attributes对象，若是一个实例还无问题，但是两个实例的话便会发生变量污染。
这只是一个例子，但是在代码中滥用局部变量可能会引起不必要的隐忧，戒之慎之。
webapp资源释放
根据前面的描述，我们可以得出一个结论：
无论是view还是UI组件我们得提供统一的destroy接口，以便让用户继承释放资源。
若是view的资源得不到释放导致heap值过高，webapp模式的网站其价值大减。这里有几点可以考虑：
l &webapp中view实例保存不超过5个，多了便释放dom结构以及内存引用（临界值自己判断最优）
l& view隐藏时释放内部资源，解除DOM事件句柄
l& UI组件与view相同，需要统一释放机制
但是单页应用由于页面不会刷新，总有一些资源得不到释放，此问题任重道远，平时编写过程可以做以下优化：
l& 使用函数替换逻辑
让我们的函数产生一个返回值替换函数中的大段逻辑，这样的第一个好处便是逻辑清晰，第二个好处是这些函数在不同的函数中，这个函数被使用后便会自动得到释放。
l& 清理闭包引用
当一个闭包函数或者什么使用结束后，若不会再使用，便需要手动清理该变量，以便解除闭包之间的引用关系，从而释放资源。
l& 使用对象属性或者方法
一个对象可以引用其他对象的属性或者方法，比如obj.foo = thatO这种情况下，我们可以随时删除对象解除引用关系，然后便可以清理资源。
动画与假死
动画而言建议采用CSS3实现动画，CSS3中又推荐采用最新的接口，比如使用transform取代top/lelf操作，这样操作效率搞得多。
若是采用动画可以将对应元素设置为absolute以减少回流，另外最关键一点还是
避免移动DOM树过多的节点，这个时候需要驳回产品无理需求，比如：
产品要求日期滚屏组件，显示半年的数据，这半年的数据便是180个DOM树
这个级别的DOM一旦移动整个手机会直接卡死，甚至构建DOM树，渲染页面也会出现假死现象，该问题需要规避。
Application Cache
Application Cache是HTML5为webapp离线使用而增加的API，与localstorage、cookie等不同，Application Cache存储的是一系列请求资源允许浏览器在请求资源时不必通过网络，设计得当的话可以实现离线应用。
使用Application Cache主要是在网络性能上提升，有效降低了网络延迟，提升请求加速
但是也会有一些问题，比如新版本缓存不立刻生效；manifest中的请求路径相对于manifest文件，而非加载页面；更新/回滚等问题，所以使用与否还得论证。
移动端经常需要实现区域滚动的需求，成熟的也有IScroll解决方案，但是方案却不理想。
就官方的例子便会出现以下问题：
l& 头部消失
l& 偶尔不能显示文本框焦点，或者焦点错位
若是以上问题可忽略，但是文本框不见了这种事情，我是不会接受的
导致的原因与组织浏览器默认事件有关，所以，我这里不太推荐各位大范围的使用区域滚动，而改在区域使用，
就去哪儿的ipad版本在一个具有文本框的地方使用了IScroll，其提高的用户体验与导致的问题一样引人入胜。
事实上，小钗及其推崇IScroll库，虽说他有这样那样问题，但是，IScroll是最有可能带来移动端革命的库，因为他可以：
① 解决webapp区域滚动
② 变相解决fixed问题
③ 解决动画过程带来的长短页问题
总而言之，IScroll方案的提出，是让webapp媲美native app靠近了一大步，真正的平起平坐还需要浏览器的支援
click本身在移动端响应是没有问题的，但是我们点击下来300ms 的延迟却是事实，这种事实造成的原因就是
手机需要知道你是不是想双击放大网页内容
所以click点击响应慢，而touch却不会有这样的限制，于是移动端的touch相当受欢迎，至于鼠标慢，他究竟有多慢，我会告诉你每次会慢300ms
所以该问题需要处理，具体见：/yexiaochai/p/3462657.html#_h2_7
webapp不是一天两天的事情，总有一天，webapp会绽放其应有的风采！
阅读(...) 评论()