webapp最佳實踐

時間 2020-01-28

標籤 webapp 最佳實踐欄目無線简体版

原文原文鏈接

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

//web開發最佳實踐css

//內存管理，主動釋放掉不須要的對象html

//及時釋放元素再也不須要的的監聽器 listener前端

//遞歸引用定時器，過多監聽器引發的內存泄露 ref http://252190908.iteye.com/blog/1969500html5

//使用chrome調試來查找系統的瓶頸android

//儘可能使用原生js來操做dom樹web

//更新dom樹在某些狀況，能夠使用document fragments來修改ajax

//css中2D動畫改成3D，強制開啓GPU加速sql

//將js代碼獨立出來chrome

//前端儘可能避免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