H5?????????????????
?????yanghj ???????[ 2016/11/8 11:21:43 ] ??????????????? WEB???? H5
???????H5???????????WEB?????????????????????????????H5??????????????????????????????????????????????????????????????????H5???????????????????????????????????H5????????????????η??????????????????????
???????????????????
???????????Html??????????????????????????H5????????????????????????????????ο??????????????????
??????????????????
????????????????????????????web??????????????????????????????????????????????????????У?????????????HTML???????PDF??image?????????????????????????У???????????????????????????????????????????????????????????HTML?????????????
??????????湤????
????dom??????????html??????????????????????????dom???е????????????dom?????е???????????????
?????????????????CSS??style????е???????????????????????????Щ????????????С????????????????????????????????????????????
??????????????????????????????dom?????????е????λ?????????????е???????????????????
???????????????????????????????????????????飬??????潫???????????????????????????????????е?html?????????????????????????????????????????????????????????????????????????????????????????????
?????????????????
????Http????
????1??Http???????
?????????????????????????????????80%?????????js??CSS??????mp3??flash???????http??????????棬http????????????????????????????????????????????????????????????????汾?????????????????????????????????6????
?????????????????http???????????????http????????????????????????????????????????????顣
?????????????
????????????CSS Sprite?????CSS???飬?????CSS????????????÷??????С?????????????????????????????CSS???????λ????????????????????
?????????16??icon?????????????????http??????????CSS??????16???????????????background-image??backgorund-position??λ???????е?С??????????????http????????????????
????????????????С????????????????????????????????????????в?????????????CSS????????????????????????????????html????????????????????
????js CSS ??????????С??js??CSS???????????js??CSS?????????????http?????????
????2???????????
???????????????http???????????????????????????Server???Response????????????????????????????GZIP????content-Encoding??Ρ? ?????????http??????????е?html??js??CSS??xml???????????????????????????????????????????????????????????Щ???????????????????????????沢?????????????CPU??????Js??CSS??????????????????????????????GZIP????????????????Ч????
???????????????????????????CPU????????????????????紫??????????????????????????cpu???????????????????????????????????????????檔
????3??????????С??????
??????????????Ч????????????У???webp??jpg??png24/32????????????????????????webp????С??????iOS????android4.0???μ????п?????м?????????????????
????????磺??????????????????????????????????統(tǒng)?????豸?г??????????480×800??600×1024??720×1280??800×1280??????????????????????????????????????????????С??
???????????????jpg??png???????????????????????????????????????????????????????????????????????????????е????????????TinyPNG?? Smush.it??????????????????????????
????4??CSS???????
?????????????????????????dom??????????CSS????html?????????head???????????????????????????????head?????????????????????????????????????????head?е?????????????CSS??????????CSS??????????????????????????????“????”????????顣
????5??JS??????
????JS???????????????????????????????????????????????????????“????http????”?????У?????????????????????????е???????????????????????????????????????????????js???????????????Ч????????js?п??????document.write??????沼??????????????????????js???????????????????????????????????????????????????
????6??JS &CSS???
????????????????????????????jquery?????????????jquery-1.4.2.js?? jquery-1.4.2.min.js???????min.js??js???????????????????????????£?
???????????“????”?????js????е????????з???????????????js?????y???????????塣?磺
???????????”????”????????????????????????????????????????????????????????磺
?????????js&CSS??????????????????С??http????????????С??
??????????????????????????js&CSS???????????????????????????????????????????????????????????????????
???????????????????????????????????GZIP???????????????????????????????????
????7???????????
???????????http???????????????????????????棬????????????????????????????????棺
????Cache-Control
????“no-cache”???????????????????棨HTTP/1.0??Pragma??no-cache?滻??
????“no-store”????????????????????????????????????з???????????????????????????檔??????泬?
????Expires ?????????????????????????????????饗???????????max-age??Ч????????????????????Cache-Control??max-age?????
???????÷???????HTTP??META????expires??cache-control
????8???????200?????
????????http???????????????????????????????????????????磺
????1xx?????????????Щ??????????????????
????2xx????????????????????????????????????????????????
????3xx???????????????????????????????????????
????4xx????????????????????????????????
????5xx???????????????????????????????????????????
??????????????http?????????200??????????????????????????????????????????????????????????200?????????
????9?????CDN
????CDN?????????磨Content Delivery Network???????????????????????“???”???????????????????????????????????????????????????????????????????????????????????????????м???????????????????H5?????????????????龡????????????CDN?????????CDN??
???????????
????????????????ο????????????????????????????????????
???????????????????????????????????????????С?????????????????????????
?????????????????????????????????????????????????????????????
????????????????????????????????????????????????????????????
???????????????????濪???????????????????????
?????????????????????????H5???????????????????????
????WebView????
??????android??IOS?????H5??????????????ù???????H5???????app???????????
??????棺?????????????仯????????H5????????????С????dom??????????С??
????CPU??????????????????????????Ч??????????????CPU??????????H5?????????????CPU?????????????????????????????????Ч??????Ρ?
????FPS?????????????????????Ч????H5?У?????????????????????????????????
???????????ù???
?????????????£?????????????????H5????????????????????????????????????????°???????????????????????
???????????????????Fiddler??Charles???????????????????????????????????????????????????web???е????????????H5???????????????????????????????????H5???????????????????????????????????????С?á?
??????????????????????????Page Speed??PCAP Web Performance Analyzer??WebPagetest??????????????????????????H5??????????????????????????????????????顣
??????
???·???
??????????????????
2023/3/23 14:23:39???д?ò??????????
2023/3/22 16:17:39????????????????????Щ??
2022/6/14 16:14:27??????????????????????????
2021/10/18 15:37:44???????????????
2021/9/17 15:19:29???·???????·
2021/9/14 15:42:25?????????????
2021/5/28 17:25:47??????APP??????????
2021/5/8 17:01:11