webapp最佳实践

//author defconzhou
//history 2015-05-16

//web开发最佳实践

//内存管理，主动释放掉不需要的对象

//及时释放元素不再需要的的监听器 listener

//递归引用定时器，过多监听器引起的内存泄露 ref http://252190908.iteye.com/blog/1969500

//使用chrome调试来查找系统的瓶颈

//尽量使用原生js来操作dom树

//更新dom树在某些情况，可以使用document fragments来修改

//css中2D动画改为3D，强制开启GPU加速

//将js代码独立出来

//前端尽量避免DOM过多插入

//使用本地缓存 localstorage sqlite ajax缓存

//限定模块的高度，避免页面出现太大的波动

//先界面，后数据

//避免click触发，使用touch

//使用本地滚动条 -webkit-overflow-scrolling: touch;

//选择合适的图片尺寸，尽量能做到针对不同的屏幕大小，返回不同的图片尺寸

//Best Pratice ref http://www.w3.org/2010/09/MWABP/

//Protecting Your Web App ref https://developer.amazon.com/public/solutions/platforms/webapps/docs/b...
//Plan for Changes in Device Orientation https://developer.amazon.com/public/solutions/platforms/webapps/faq#We... App Development
//Use Responsive Design Techniques https://developer.amazon.com/public/solutions/platforms/webapps/docs/w...
//Lock Orientation in Portrait or Landscape Mode
//Instruct Customers to Rotate the Device
//Turn Off Touch Feedback
// body {
// -webkit-tap-highlight-color: rbga(255, 255, 255, 0);
// -webkit-user-select: none;
// }
//Make Sure Your Web App Fills the Screen
//Best Practices for Game Apps
//Best Practices for Using Element
//Best Practices to Optimize Compositing Layers for Web Apps
//Best Practices for JavaScript

//Use web storage in place of cookies ref http://www.html5rocks.com/en/tutorials/speed/quick/
//Use CSS Transitions instead of JavaScript animation
//Use client-side databases instead of server roundtrips
//JavaScript improvements lend considerable performance advantages
//Use cache manifest for live sites, not just offline apps
//Enable hardware acceleration to enhance visual experience
//For CPU-heavy operations, Web Workers deliver
// HTML5 Form attributes and input types
//Use CSS3 effects instead of requesting heavy image sprites
//WebSockets for faster delivery with less bandwidth than XHR

//Minimize HTTP Requests ref https://developer.yahoo.com/performance/rules.html
//Use a Content Delivery Network
//Add an Expires or a Cache-Control Header
//Gzip Components
//Put Stylesheets at the Top
//Put Scripts at the Bottom
//Avoid CSS Expressions
//Make JavaScript and CSS External
//Reduce DNS Lookups
//Minify JavaScript and CSS
//Avoid Redirects
//Remove Duplicate Scripts
//Configure ETags
//Make Ajax Cacheable
//Flush the Buffer Early
//Use GET for AJAX Requests
//Post-load Components
//Preload Components
//Reduce the Number of DOM Elements
//Split Components Across Domains
//Minimize the Number of iframes
//Reduce Cookie Size
//Use Cookie-free Domains for Components
//Minimize DOM Access
//Develop Smart Event Handlers
//Choose <link> over @import
//Avoid Filters
//Optimize Images
//Optimize CSS Sprites
//Don't Scale Images in HTML
//Make favicon.ico Small and Cacheable
//Keep Components under 25K
//Pack Components into a Multipart Document
//Avoid Empty Image src

//cache ref https://developers.google.com/web/fundamentals/performance/optimizing-...
//ETag If-None-Match

// performance ref http://www.html5rocks.com/en/features/performance https://developers.google.com/speed/pagespeed/insights/?url=m.yuyin.tv...
http://developer.android.com/guide/webapps/best-practices.html
https://www.owasp.org/index.php/Category:OWASP_Best_Practices:_Use_of_...
http://www.toptal.com/android/developing-mobile-web-apps-when-why-and-...
https://developers.google.com/apps-script/guides/html/best-practices

http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/
http://www.html5rocks.com/en/tutorials/webdatabase/todo/
https://html.spec.whatwg.org/multipage/browsers.html#manifests
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/