<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                看到上面的性能情況,我們最先想到的優化方法就是PC時代[YAHOO 23條web性能優化軍規](https://developer.yahoo.com/performance/rules.html)。 首先看看我們日常業務的請求瀑布圖是怎么樣的,根據這些情況看那些可以用規則去優化。 [![DraggedImage_5e36ed7656a7425d8afabd305bba01dc](https://camo.githubusercontent.com/38b2ce05ded16a21c8c9c7ace26a112abfa7bbe2/687474703a2f2f696d67322e746263646e2e636e2f4c312f3436312f312f303066633730656463306235363565323039643737353163386339386465653762626638313939322e6a706567)](https://camo.githubusercontent.com/38b2ce05ded16a21c8c9c7ace26a112abfa7bbe2/687474703a2f2f696d67322e746263646e2e636e2f4c312f3436312f312f303066633730656463306235363565323039643737353163386339386465653762626638313939322e6a706567) ## 請求數優化 * 在請求數控制方面,將js,css各用combo的方式合并成單個資源。 * 頁面圖片等等,只加載首屏資源,提升首屏展示速度。 * 使用CSS ,SVG,ICONFONT 替換UI圖片 ###合理使用IconFont iconfont對于前端來說有很多優點:自由變化大小 矢量不失真、自由修改顏色、可以添加一些視覺效果如 陰影、旋轉、透明度、兼容IE6。 #### 使用現狀 目前大家都基本上從平臺上生成,生成后的文件如下: ~~~ @font-face { font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } ~~~ 這樣直接引用在項目中,真實在手機上的網絡請求如下(在桌面版Chrome瀏覽器網絡中無法看到這些請求): [![DraggedImage_4cf266d1fccb4833928f5f6d263c7f86](https://camo.githubusercontent.com/5269554dc9272a9429d8d52f9a01eeffd25f21c2/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f336466313261383037316231653165613239643265383335366366373265313731633163313662342e6a706567)](https://camo.githubusercontent.com/5269554dc9272a9429d8d52f9a01eeffd25f21c2/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f336466313261383037316231653165613239643265383335366366373265313731633163313662342e6a706567) 這樣造成了極大的網絡帶寬的消耗,這些icon資源往往在界面渲染中占據重要位置。 目前我們移動端只加載ttf一個字體文件,對于較小的文件也可以考慮base64在css文件中。 ## 首屏多個動態接口合并請求 日常的業務中,一個頁面往往拆分出多個異步數據接口(后端開發說:解耦),甚至首屏也需要3-5個接口(如動態banner區塊,推薦內容,商品列表等),有些還有嵌套關系。 但是這些對頁面性能造成不小的影響。 [![DraggedImage_70cd539eaa23481cb41eac9efd680c9a](https://camo.githubusercontent.com/9658d6a7095d8590b769d710af9321156320ba36/687474703a2f2f696d67332e746263646e2e636e2f4c312f3436312f312f633462643964613037303337306535386164623266333761613239333033613733383732613833642e706e67)](https://camo.githubusercontent.com/9658d6a7095d8590b769d710af9321156320ba36/687474703a2f2f696d67332e746263646e2e636e2f4c312f3436312f312f633462643964613037303337306535386164623266333761613239333033613733383732613833642e706e67) 手淘中某個接口在各網絡下的請求性能,2G,3G下平均的消耗時間在2-6s完成下載。其中幾個請求性能稍差點對整個頁面影響也深遠。 [![_15_11_17_12_04_02dfa888dec3495891b9e5c6fc4eaac5](https://camo.githubusercontent.com/a1ed19b207ea7d88ba52397739efb502d9339cc9/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f356265613036613730373662646165316664623438613837613361636338363264313436613430632e6a706567)](https://camo.githubusercontent.com/a1ed19b207ea7d88ba52397739efb502d9339cc9/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f356265613036613730373662646165316664623438613837613361636338363264313436613430632e6a706567) ## 禁止重定向 在我們CaseByCase的分析中發現,頁面&靜態資源的重定向會造成巨大的性能損耗。 特別使用前端JS腳本來實現頁面跳轉的。 [![_3_f60e75b7fefc46ed8d9123fdfa94c2a4](https://camo.githubusercontent.com/0b8120c90258a3ab297965deb461b0f77c746a9c/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f613761353564393863343834646230313064336536323363353061373465643131393164656230312e6a706567)](https://camo.githubusercontent.com/0b8120c90258a3ab297965deb461b0f77c746a9c/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f613761353564393863343834646230313064336536323363353061373465643131393164656230312e6a706567) ## 圖片優化 手淘的特點就是圖片多,圖片的性能好壞可不僅僅影響用戶體驗哦,還直接影響著交易,`錢 錢 錢…` 我們在圖片方面做了大量的優化。 ### 使用WebP格式。 手淘2年前已經開始使用WebP格式了(主要native使用),1年前H5全面使用,其中iOS 的webview中由手淘以插件的方式支持。我們以手淘線上真實案例來看使用webp格式的前后效果。 案例為:線上的一個活動頁面,打開一看其中的banner 就320多KB,整個頁面加載457KB,如果就單單banner圖片換成webp格式,整個頁面的大小就只有181KB。 `使用WebP前` [![DraggedImage_c2d16e1273bf429aac2118123c477d02](https://camo.githubusercontent.com/940927fbd9840fd7ec86f8b8440da64e4d4820cd/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f393035396161616533313263336335346336323666666632653164333632636338656238306566622e6a706567)](https://camo.githubusercontent.com/940927fbd9840fd7ec86f8b8440da64e4d4820cd/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f393035396161616533313263336335346336323666666632653164333632636338656238306566622e6a706567) `使用WebP后` [![DraggedImage_914eb83c506e4e25bed4bcacbe1c546c](https://camo.githubusercontent.com/46d88778219c58653e6c4fddc0d224145c0dfa97/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f646336346430396137643339353631383434376562313630623539316262356238623432306239342e6a706567)](https://camo.githubusercontent.com/46d88778219c58653e6c4fddc0d224145c0dfa97/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f646336346430396137643339353631383434376562313630623539316262356238623432306239342e6a706567) `Banner部分對比` [![DraggedImage_e2a8298a99a44233ab64738a69541eba](https://camo.githubusercontent.com/49a4087b18d988b12ebf49f9ead763b63273388f/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f336436663834313432346539336237653662333665323162363936366433363936386163393931362e6a706567)](https://camo.githubusercontent.com/49a4087b18d988b12ebf49f9ead763b63273388f/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f336436663834313432346539336237653662333665323162363936366433363936386163393931362e6a706567) 這種業務類型的案例,我們改進一下就可以為用戶,為公司`省70%`的流量費用。 ### 商品圖片優化 商品圖片在手淘的各個產品中都是必不可少的,為了適應不同業務需求的需要,我們在CDN服務上生成各個尺寸和質量的圖片(近100個規格)。 * q值:根據手淘網絡情況,加載不同質量的商品圖片(q30,q50,q75,q90) * 銳化:根據需要調整圖片銳化值 * DPI:根據設備DPI取適當尺寸商品圖片 * 合理的使用CDN圖片尺寸可以帶來下載圖片的性能提升,還可以減少不必要的內存消耗。 我們日常中會用到的尺寸,每浪費10像素的寬高都可以造成很大的內存資源浪費。 計算方式如下: [![DraggedImage_37ea251e09c44f1dbe24f3b689068cb8](https://camo.githubusercontent.com/3037213feb6cc823633e92e32d10230bb8fd7b7d/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f303130623765383534333062613130633264386538363836633562653330626338633664653861612e706e67)](https://camo.githubusercontent.com/3037213feb6cc823633e92e32d10230bb8fd7b7d/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f303130623765383534333062613130633264386538363836633562653330626338633664653861612e706e67) ###圖片DPI 優化 根據設備DPI值和圖片質量Q值做優化,達到最優視覺體驗和加載性能(DPI高,寬高增加后可適當降低質量)。 [![DraggedImage_6b19fe95e2294949bc5c9c2a85cdd12a](https://camo.githubusercontent.com/f11fc6c3407c23180c099064584c5e3e6abfb2f5/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f636162633238373035323461323138383536383331336236393866386336333538396466363866652e6a706567)](https://camo.githubusercontent.com/f11fc6c3407c23180c099064584c5e3e6abfb2f5/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f636162633238373035323461323138383536383331336236393866386336333538396466363866652e6a706567) ### Sprite圖片 Sprite圖片(又稱:雪碧圖)被運用在眾多使用了很多小圖標的網站上。相對于把每張小圖標以單個文件的形式引用到頁面上,Sprite圖片會只要請求一張圖片就夠了,減少了請求數提升了加載性能,還有就是方便圖標管理。但在移動互聯網時代在使用Sprite圖片需要合理利用,不然反對性能造成影響。 #### 解碼內存消耗 Decoded in memory的計算公式: w x h x 4(寬 x 高 x 每個像素4個字節) 如果設備DPI大于1,還需要 X DPI系數。如Retina設備X 4,RetinaHD設備X 9. [![DraggedImage_d15b37a3f44a453188bbcedcdd9d9f0b](https://camo.githubusercontent.com/f159e698f35c4260a63c8fc46c9418528849fb24/687474703a2f2f696d67322e746263646e2e636e2f4c312f3436312f312f383034303933653563636561333633356464373265313934393433633837623630373734333764322e706e67)](https://camo.githubusercontent.com/f159e698f35c4260a63c8fc46c9418528849fb24/687474703a2f2f696d67322e746263646e2e636e2f4c312f3436312f312f383034303933653563636561333633356464373265313934393433633837623630373734333764322e706e67) #### 禁止生成大圖且利用率少 由于圖片在瀏覽器中的解碼方式,合理的生成緊湊的Sprite圖片,即可以帶來更少的請求數,又高性能低消耗。 [![DraggedImage_2fd69d286e5f4ef18caaa3bc908604f1](https://camo.githubusercontent.com/67f7b7429a4ef4244d072f0a9ab0f0f28ed0a1d2/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f626532646133616539633161396436626264323734373065366233303238663634386561333436382e706e67)](https://camo.githubusercontent.com/67f7b7429a4ef4244d072f0a9ab0f0f28ed0a1d2/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f626532646133616539633161396436626264323734373065366233303238663634386561333436382e706e67) #### 建議合并成如下: [![DraggedImage_dc8095e9f7514aa8a92252c0445b5434](https://camo.githubusercontent.com/a7c5f8477662d4a48d39c6b5627873a2618165d9/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f636565653536393234393934373563316139326433333639323336383761663961663066383133342e6a706567)](https://camo.githubusercontent.com/a7c5f8477662d4a48d39c6b5627873a2618165d9/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f636565653536393234393934373563316139326433333639323336383761663961663066383133342e6a706567) #### 不建議合并成如下: [![DraggedImage_1a20c971cf054438bd64dd0043896383](https://camo.githubusercontent.com/b09c8bf51c17d4a7a28758e06da4f3638e608d03/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f343036363831316166323439376632623264313333353635623065646331336232353731356633352e6a706567)](https://camo.githubusercontent.com/b09c8bf51c17d4a7a28758e06da4f3638e608d03/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f343036363831316166323439376632623264313333353635623065646331336232353731356633352e6a706567)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看