Mobile Web 开发实战

Transcript

1. .PCJMF
   8FC
   षؿൌᅞ 流火 Taobao UED http://f2e.im/guokai http://github.com/PaulGuo
2. 开发环境及调试工具 项目构建的过程改进 更灵活的数据统计 Native  H5混合编程 移动端性能及陷阱 OVERVIEW
3. षؿߌ࣢ࠣט൫۽ऎ
4. Chrome  -  模拟开发阶段调试预览 Mobile  Devices  -  真机联调调试 flexCombo  -  CDN本地环境 Apache  -  透明代理、本机DEMO Remote  Debug  -  远程调试 开发环境
5. $ISPNF
6. GMFY$PNCP npm install flex-combo sudo flex-combo -u /apps/et/trip-html5/act -c utf8 $PNCP࠯ඌቋԚԛགྷჷႿuۚྟିຩᅟࡹഡᆷଲv֥ܿᄵ၂෮ิ֞oࡨഒ )551౨౰đ൞၂۱ᄝڛༀ؊ิ܂đކѩ؟۱໓ࡱ౨౰ᄝ၂۱ཙႋᇏ֥࠯ඌb
   ᄝളӁߌ࣢ᇏđ$PNCPۿିႵޓ؟ൌགྷđ২ೂ5FOHJOFb
   ᄝభ؊षؿߌ࣢ᇏđ ႮႿቋᇔഈཌླေࡼሧჷႄೆ֥ս઒ކѩđՖط໭مᄝЧֹ౞ਈषؿט൫đႄఏ षؿט൫҂ьb
   'MFY
   $PNCP൞ᄝषؿߌ࣢ଆ୅ൌགྷਔՎۿି֥ڛༀఖđଢ֥ ൞ٚьభ؊षؿט൫bჿ֩Ⴟ၂۱ᆦӻ$PNCPეمđᆺି٠໙KTDTTࠣ๭ோሧ ჷ֥"QBDIFڛༀఖb
   ౵љႿളӁߌ࣢֥$PNCPb'MFY
   $PNCPህູభ؊षؿ ߌ࣢ਈദյᄯđചఙ҆ٳۚѩؿหྟđՖطิ܂ਔپڶ֥ۿିބ౞ਈุ֥ࠒb
7. GMFY$PNCP
   
   轻ඎ̙ৣໄ ౞඾ᆦӻ؟ᇕো྘DPNCPbॖၛ๙ݖਲࠃ֥ҕඔ஥ᇂđᆦӻ؟ᇕো྘֥ $PNCPეمbೂᆦӻZBIPPڄ֥۬b
8. GMFY$PNCP
   
   00 భ؊षؿݖӱᇏđႵൈсྶႄೆ҆ٳཌഈթᄝ֌Чֹ۽ӱ໭ླܱᇿ֥ሧჷđ ২ೂຩᅟಆᅟٓຶ๤၂൐Ⴈ֥భ؊ॿࡏK2VFSZa,JTTZ֩b
   'MFY
   DPNCPđ მ֞ሱ࠭ીႵ֥ሧჷൈđ߶ᆇᆞ֞ཌഈڛༀఖࠆ౼ଽಸb'MFY
   $PNCP߶׮ ෿ٳ༅౨౰૭ඍ֥໓ࡱਙіbЧֹႵ֥đҐႨЧֹଽಸْ߭đЧֹીႵ֥đ ܒᄯ$PNCP౨౰֞ཌഈڛༀఖࠆ౼ଽಸbቋުࡼЧֹଽಸބཌഈଽಸކѩ ْ߭bᆃဢቓđЌᆣቋᇔഈཌުDPNCP౨౰֥ଽಸඨ྽ބט൫௹ປಆ၂ᇁb
9. GMFY$PNCP
   
   ῅线开䕆 ෮Ⴕ֞ཌഈDPNCP౨౰ݖ֥ଽಸ׻߶ߏթᄝЧֹb༯Ց٠໙ൈᆰࢤՖЧֹࠆ ౼bᆃ۱ݖӱؓభ؊षؿᆀটඪ൞๩ૼ֥bᆺ൞߶ۋतֻ၂ՑؿఏDPNCP౨ ౰഍ત၂ུbᆃဢđభ؊षؿཛଢđᆺླေᄝཛଢࡹӮֻ֥၂Ցđཟ'MFY
   $PNCP౨౰၂Ցሧჷđު࿃ࣼᄜႨ໭ླຩ઎đՖط৖ཌषؿਔb
10. 关于调试
11. Step: 1: Code 2: Preview in Browser 3: Enter URL on mobile Device 4-11: Repeat #3 (for 8 and more Devices) 12: Change Code 13: Preview in Browser 14-21: Refresh 8 Devices 22: Run into debugging need 关于调试  -  WORKFLOW
12. 关于调试  -  开发者工具
13. Console HTML Inspector JavaScript Debug Network Inspector Performance Tips Modify CSS/JavaScript Memory Inspector Database Inspector etc. 关于调试  -  开发者工具  -  PC
14. Console HTML Inspector JavaScript Debug Network Inspector Performance Tips Modify CSS/JavaScript Memory Inspector Database Inspector etc. 关于调试  -  开发者工具  -  Mobile
15. 关于调试  -  A  True  Story
16. 关于调试  -  A  True  Story
18. 关于调试  -  Tools  for  Mobile  Dev/Debug
19. 1. Safari Mobile Debugger 2. Webkit Remote Debugger 3. iWebInspector 4. Opera Dragonfly 5. Chrome for Android Web Inspector 6. Firefox for Android Remote Debugging 7. Socketbug 8. weinre 9. jsconsole.com, jsbin.com 10. Adobe Edge Inspect
20. "QBDIF ProxyRequests On ProxyVia On <Proxy *> Order deny,allow Deny from all Allow from all </Proxy> http:/ /httpd.apache.org/docs/2.2/mod/mod_proxy.html
21. "QBDIF ProxyRequests On ProxyVia On <Proxy *> Order deny,allow Deny from all Allow from all </Proxy> http:/ /httpd.apache.org/docs/2.2/mod/mod_proxy.html
22. .PCJMF
    1SPYZ
23. .PCJMF
    1SPYZ
24. 䔍ࠦॆ៽䕏时䝀调 • Chrome Remote Debugging on Android • iOS Remote Debugging with Safari • jsConsole Online • Webkit Inspector Remote(Weinre)
25. $ISPNF
    3FNPUF
    %FCVHHJOH
    PO
    "OESPJE 1. Install the Android SDK 2. Enable USB debugging on your device 3. Connect your device via USB
26. $ISPNF
    3FNPUF
    %FCVHHJOH
    PO
    "OESPJE + Remote debugging on Device (using GDT) - Requires ADK/ADB, USB Cable (or hack) - Not for Android < 4 ICS, no Android 2/3! - A Lot to Setup/Maintain (for just a fraction) = Limited use for real world needs
27. J04
    3FNPUF
    %FCVHHJOH 1. Enable Web Inspector on your Phone 2. Connect your iPhone or iPad to your Mac 3. In Safari’s Preferences pane under Advanced, check the Show Develop menu in the menu bar checkbox. 4. Select the Develop menu, and your iDevice should be a menu option.
28. J04
    3FNPUF
    %FCVHHJOH + Convenient: Build in - No CSS/DOM Editing - No Breakpoints - JS Logs are truncated = Limited use for real world needs
29. KT$POTPMF jsconsole.com is a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.
30. KT$POTPMF + Remote DOM on Device + Any Browser/OS + Sits online, no local stuff to maintain + Truly remote - Console only - Needs JS inside your code to connect - Still need to go device by device = Powerful partial solution
31. XFJOSF Weinre is a project of the Apache Foundation and stands for Web Inspector Remote and is exactly what it’s name suggests, a tool in the same vein as Firebug or Webinspector but, able to run and debug web pages remotely. So, if you have used tools such as the Firefox Developer Tools or Chrome Dev Tools, using Weinre will be second nature. Weinre Install • Start Server. • Add Bookmarklet. • Increase Auto-Lock Time(iOS Setting) to Prevent Disconnect. npm -g install weinre weinre --boundHost 127.0.0.1 --httpPort 9090 Another Option http://debug.phonegap.com
32. EFCVHQIPOFHBQDPN
33. XFJOSF <script src="http://127.0.0.1:9090/target/target-script-min.js#anonymous"></script>
34. XFJOSF + Remote DOM on Device + iOS, Android & BlackBerry + Node.js port now much less hairy to setup than former Java based one - Needs JS inside your code to connect - Still need to go device by device = Powerful partial solution
35. J8FC*OTQFDUPS
36. J8FC*OTQFDUPS
37. 0QFSB
    %SBHPOGMZ
38. KTCJODPN
39. tools for network debug.
40. 'JEEMFS The free web debugging proxy for any browser, system or platform. • Monitor HTTP/HTTPs traffic from any browser • Inspect and debug traffic from any client • Tamper client requests and server responses • Test the performance of your web sites and apps • Decrypt HTTPS web sessions • Extend Fiddler as much as you want
41. 'JEEMFS
42. 'JEEMFS
43. are u using mac?
44. $IBSMFT Charles is a web proxy (HTTP Proxy / HTTP Monitor) that runs on your own computer. Your web browser (or any other Internet application) is then configured to access the Internet through Charles, and Charles is then able to record and display for you all of the data that is sent and received. $50
45. $IBSMFT • SSL Proxying – view SSL requests and responses in plain text • Bandwidth Throttling to simulate slower Internet connections including latency • AJAX debugging – view XML and JSON requests and responses as a tree or as text • AMF – view the contents of Flash Remoting / Flex Remoting messages as a tree • Repeat requests to test back-end changes • Edit requests to test different inputs • Breakpoints to intercept and edit requests or responses • Validate recorded HTML, CSS and RSS/atom responses using the W3C validator http://www.slideshare.net/keeganstreet/charles-13738910
46. 项目构建的过程改进
47. 项目构建的过程改进 • SSI ⽂文件合并⽣生成最终HTML⽂文件 • 前端资源⽂文件的压缩及合并 • 配置⽂文件版本号的⾃自动更新 • 缓存配置⽂文件的动态⽣生成 • ⾏行业更统⼀一的解决⽅方案 • 前端更容易对其进⾏行维护 • 插件化的模式更容易扩展
48. 项目构建的过程改进 8IBU
    
    8IZ ଢѓğ൞๙ݖZP
    DMBNটࡼ୆ႄਫ਼֞(SVOUđϺᇹ୆۷ඃ ਀֥൐Ⴈ(SVOUb ૫ཟದಕğ૫ཟέ৚༢భ؊۽ӱഽđϺᇹ୆Էࡹѓሙ֥ ,*44:ཛଢࢲܒս઒ބ8JEHFUTս઒b ჻ࣟğյᄯ၂ॻ໭ڵք֥భ؊षؿ࢖൭ࡏ۽ऎđյ௥Ӂ௖ ࡗ֥ս઒܋ཚуৈđಞ୆֥ս઒ԉၮဝܻ೬ฅϮ֥గ༏b Ⴊ൝ğᆜކਔ,JTTZ
    (BMMFSZ
    (FOFSBUPSđ'MFY
    $PNCP ބ၂۱౞྘֥4FSWFSđᆦӻყؿބؿ֥҃ሱ׮߄b https://speakerdeck.com/lijing00333/generator-clam
49. 更灵活的数据统计 • 数据统计需求定制化、个性化 • 期望对数据的分析有更⾼高的⾃自由度 • 更灵活的数据统计便于性能优化 CNZZ / Google / 淘宝⽆无线指数 / ⻩黄⾦金矿⼯工
50. 更灵活的数据统计 ൉હ൞ߛࣁঀ۽Ĥ ߛࣁঀ۽൞၂۱ൌགྷႨ޼ྛູඔऌ֥Ґࠢ
    a
    ٳ༅ၛࠣᅚགྷ֥༢๤b෱֥หׄ൞ᄍྸ൐Ⴈ
    +BWB4DSJQU
    টщཿඔऌٳ༅֥ս઒đՖطಞ Ⴈ޼ྛູඔऌٳ༅֥૊ࡪննࢆ֮ਔb ೂޅ൐ႨĤ ൐Ⴈߛࣁঀ۽đ္նᇁٳູ೘۱҄ᇧğҐࠢa ٳ༅aᅚགྷb
51. Native  H5混合编程 The "native bridge" technique is core to turn HTML 5 web pages into nation iOS / Android applications. As we described in earlier blog posts, the "native bridge" captures events from inside the web page, brings up native UI elements for the user to handle the event, and pass the results back into the page via a JavaScript call from the native app.
52. Native  H5混合编程 • 能够⾃自适应当前⻚页⾯面的⽣生存环境 • 最常⻅见的⼀一些通⽤用UI协议封装 • 设备信息及⺴⽹网络状况 • 针对客户端的部分定制化 • 轻量、低成本、易于扩展
53. 性能优化实践
54. cໞ୤֥ຩ෎ cॖ৸֥ଽթ 性能优化实践  -  Why
55. 性能优化实践  -  网络分布
56. ಆݓᄎႏഅ(ຩ෎ؓб 性能优化实践  -  3G网速
58. https://speakerdeck.com/d2forum/ding-zhi-ban-she-ji-kai-fa-vsxiang-ying-shi-she-ji- kai-fa-zhi-xing-neng-ji-liu-liang
60. Everything You’ve Learned Still Applies. ࿐֥֞ᆩ്҂߶ݖൈ 性能优化实践  -  How
61. cࡨഒ౨౰č$PNCP
    $444QSJUFTĎ c໭ቅೖࡆᄛčၳ҄+4
    $44ࡆᄛĎ c঺ളӈซ 性能优化实践  -  文件加载
62. http://mobitest.akamai.com/m/index.cgi
63. 552.4K!!! 性能优化实践  -  图片优化
64. 性能优化实践  -  Data  URI
65. 1920.6K!!! 性能优化实践  -  Data  URI
66. cࡨഒ๭ཞ)551౨౰ cุࠒᄹնčჿđ([JQުჿĎ c҂ିФߏթ 性能优化实践  -  Data  URI优缺点及最佳实践 ቋࡄൌ࡬ğ ุࠒࢠཬѩ౏ᇗگੱ֥֮๭ோ൐Ⴈ%BUB
    63*ࣉྛщ઒đ бೂཬ*$0/֩b
67. http://tinypng.org/ 性能优化实践  -  图片压缩
68. 210.9K!!! 性能优化实践  -  图片压缩
69. http://tinypng.org/ imageAlpha imageOptim JPEGmini $ npm install -g imageoptim-cli $ imageOptim -j -a -q -d path/to/images 性能优化实践  -  图片压缩工具
70. http://a.tbcdn.cn/mw/base/styles/tms_h5.css 性能优化实践  -  代码瘦身
71. c࿊ᄴఖႪ߄ c҂ေযႨ$44หྟ c1PTJUJPO
    'JYFE c3FUJOB
    4VQQPSU c 性能优化实践  -  CSS优化
72. https://speakerdeck.com/jonrohan/githubs-css-performance https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS 性能优化实践  -  选择器优化
73. • box-­‐shadow/text-­‐shadow • transition/transform • background:    gradient(...) • ... যႨ$44หྟ߶֝ᇁ်૫ᛴಙэતđݏ׮ིݔवؘčбೂඪཬ૜Ď 性能优化实践  -  请勿滥用CSS特性
74. http://bradfrostweb.com/blog/post/mobile-web-problems/#fixed 性能优化实践  -  FIXED
75. c҆ٳ֮ϱЧ༢๤҂ᆦӻ cॖ൪ٓຶ۷ཬ cۚ؇ धؓק໊ J4DSPMMđս઒ਈᄹࡆ 性能优化实践  -  慎用FIXED
76. c࣐ਈႨჰളս઒ c%0.࿊ᄴఖྟିႪ߄ c%0.ࢫׄߏթ cᇿၩଽթ൤٢ c(ຩ෎༯֥ࢆࠩႪ߄ c೿Ⴈग़޼؊ߏթࠣ"11ߏթڿࣉ c൐Ⴈ'BTU$MJDLڿ೿Ⴈ޼ุဒ 性能优化实践  -  JS优化 https://speakerdeck.com/yaypie/when-not-to-use-yui
77. https://speakerdeck.com/lijing00333/css-selector-performance 性能优化实践  -  选择器性能
78. https://speakerdeck.com/lijing00333/css-selector-performance 性能优化实践  -  选择器性能
79. c၂ུӈႨ֥۽ऎোຩᅟሧჷ c7JFX1PSUཌྷܱ֥ᆩ് cׄࠌა$MJDL൙ࡱ c൭ࠏᛍফఖӈႨ൭൝׮ቔࡓ๐ٿል cႅҟֹᆶণ c൐Ⴈห൹৽ࢤ cФׄࠌჭ෍֥ຓܴഡᇂ cቅᆸ࿈ሇ௠ଞൈሱ׮טᆜሳุնཬ c'MFY#PY҃अଆϰ cཨԢUSBOTJUJPO೺௠ cll 移动开发实践  -  陷阱/坑/TIPS https://github.com/jtyjty99999/mobileTech
80. WebApp开发最佳实践 Mobile Web Best Practices 1.0: http://www.w3.org/TR/mobile-bp/ Mobile Web Application Best Practices: http://www.w3.org/TR/mwabp/
81. Thanks! ^_^