<sup id="0tuif"><div id="0tuif"></div></sup>
<label id="0tuif"><div id="0tuif"><del id="0tuif"></del></div></label>
<label id="0tuif"><div id="0tuif"></div></label>
<delect id="0tuif"></delect>
    <delect id="0tuif"></delect>
            <label id="0tuif"><div id="0tuif"><label id="0tuif"></label></div></label>
              <delect id="0tuif"><div id="0tuif"><label id="0tuif"></label></div></delect>
                <label id="0tuif"><div id="0tuif"><del id="0tuif"></del></div></label>

                用我們專業的角度,講出您的心聲

                新聞動態,洞悉互聯網前沿資訊,探尋網站營銷規律

                常見問題

                當前位置:首頁 > 一諾資訊 > 常見問題 > 一諾建站公司幫你做好移動頁面性能優化

                發布時間:2019-01-03 瀏覽次數:729 文章來源:常見問題

                網絡市場競爭越來越激烈,隨著移動互聯網的發展,我們越發要關注移動頁面的性能優化,今天一諾建站公司跟大家談談這方面的事情。

                移動互聯網,北京網站建設公司,北京網站制作

                首先,為什么要做移動頁面進行優化?

                縱觀目前移動網絡的現狀:

                移動頁面布局越來越復雜,效果越來越炫,直接導致了文件越來越大,下載和運行速度越來越低,而速度低會造成不良影響,據統計;

                1%的用戶期望移動頁面跟PC頁面一樣快,74%的用戶能容忍的響應時間為5秒,所以我們要保證移動端頁面有足夠的速度。

                移動頁面的速度跟三個因素有關,分別是:移動網絡帶寬速度,設備性能(CPU,GPU,瀏覽器),頁面本身。

                目前主流的移動網絡制式為3G;

                今年,我們還看到了4g網絡制式在快速發展,這再一次提升了移動頁面的加載速度;

                而移動設備本身,截止到目前,以iPhon6/三星Note4等設備為首,智能設備已經變得比以往屏幕更大,CPU、GPU、內存更靠譜。

                而與其同時,瀏覽器產商也為提升頁面的速度做出了不可磨滅的努力。

                網絡制式供應商,手機制造商,瀏覽器產商如此給力,我們呢?我們能做什么。

                我們能做得是對移動端頁面本身優化,這也是我們專業價值的體現,所以我們要做移動端頁面性能優化。

                該怎么做移動端頁面優化呢?

                在說這個前,要提一下PC常用的優化手段:

                1.代碼優化(css、html、js優化)

                2.減少HTTP請求(雪碧圖,文件合并…)

                3.減少DOM節點

                4.無阻塞(內聯CSS,JS置后…)

                5.緩存

                6.……

                這些手段大部分適用于移動端,這都是一些耳熟能詳的手段。

                今天要講的主要是一些適用于移動端的優化手段,現在進入正題。

                首先我們得關注一下一個頁面從開始到呈現完畢需要經歷什么階段,主要有四個階段:

                1.加載(發送請求、加載)

                2.腳本執行(腳本事件)

                3.渲染(重新計算樣式(Recalculate Style)計算布局(layout))

                4.繪制/合成(繪制(paint Setup/Paint(sizexsize))合成(Composite Layers))

                每個階段的主要工作如上圖所示,而我們的優化目標是:

                優化目標(加載、腳本執行、渲染、繪制/合成)

                下面我們來針對上面的幾個階段細說一下都有哪些優化手段。

                首先,來看看加載中有哪些優化手段:

                1. 預加載

                預加載方式有兩種:

                A. 顯性加載

                類似這種用戶能明顯感知的,我把它稱為顯性加載,互動頁面都建議加上這種加載方式,它一方面能增加頁面的趣味性,另一方面能讓后續頁面體驗更流暢。

                B. 隱性加載

                這種在加載NO.1張圖片的時候已經預先加載了NO.2張圖片,從而使得頁面體驗更流暢的方式,我把它稱為隱性加載,這種方式的好處是節省流量之余又能使得體驗增強。

                2. 按需加載

                按需加載是不可或缺的優化手段,主要有以下兩種方式:

                1.首屏加載的時候把首屏的內容加載盡量,而位于首屏之外的元素都只在出現在首屏時才加載,很大程度地節省了流量,提升了加載時間。

                2.響應式加載方式,意思是利用JS 或者CSS判斷分辨率,從而選擇不同尺寸的圖片進行引入,這種的好處顯而易見,同樣可以加快加載速度和節省流量。

                3. 壓縮圖片

                對于壓縮圖片,首先要提的是jpg文件:

                對于移動端的JPG 文件,有這樣的結論:

                1.使用大尺寸大有損壓縮比的jpg

                2.使用jpegtran進行無損壓縮

                而對于png有以下結論:

                1.多彩圖片使用png24

                2.低彩圖片使用png8

                3.推薦使用pngquant

                4.盡量避免重定向

                為什么要盡量避免重定向呢?

                這是一個同一網速下的測試結果,重定向之所以會比較慢,是因為它重復了域名查找,tcp鏈接,發送請求。

                5. 使用其他方式代替圖片

                有兩種方式,NO.1種是:依靠CSS 3繪制圖片:

                NO.2種:使用iconfont代替圖片

                優點;加載性能好、支持CSS樣式、兼容性好、矢量

                缺點;只支持單色圖標、存在生產的字庫文件比生成的雪碧圖文件大的情況

                但iconfont不一定比圖片好,這里做了個實驗:

                對于大圖片,iconfont并不比雪碧圖好,建議單側小尺寸圖標才使用iconfont.

                然后,針對腳本執行中有哪些優化手段,這里只提兩點:

                1. 盡量避免DataURI

                DataUri在移動端并不如它在pc端吃香,因為:

                經測試,DataURI要比簡單的外鏈資源慢6倍,生成的代碼文件相對圖片文件體積沒有減少反而增大,而且瀏覽器在對這種base64解碼過程中需要消耗內存和cpu,這個在移動端壞處特別明顯。

                2. 點擊事件優化

                在移動端請適當使用touchstart,touchend,touch等事件代替延遲比較大的Click 事件。Click之所以慢是因為mousedown導致的:

                然后,針對渲染階段中有哪些優化手段,這里也只提兩點:

                1. 動畫優化

                a)盡量使用css3動畫

                優點:

                1.不占用js主線程

                2.可利用硬件加速

                3.瀏覽器可對動畫做優化

                缺點:

                不支持中間狀態監聽

                b)適當使用canvas動畫

                優點:

                可規避渲染樹的計算渲染更快

                缺點:

                開發成本高,維護較麻煩。

                c)合理使用RAF(requestAnimationFrame)

                優點:

                1.能解決腳本問題引起的丟幀,卡頓問題

                2.支持中間狀態監聽

                缺點:

                兼容問題

                通過RAF動畫與settimeout動畫對比:

                1.STO動畫(FPS:54)

                2.raf動畫(FPS:60)

                獲得結論:不需要兼容android 4.3瀏覽器的情況下,請使用RAF制作腳本動畫

                2. 高頻事件優化

                類似touchmove,scroll這類的事件可導致多次渲染,對于這種事件可以通過以下手段進行優化:

                1.使用requestAnimationFrame監聽幀變化,使得在正確的時間進行渲染

                2.增加響應變化的時間間隔,減少重繪次數。

                再次,針對合成/繪制只提一個優化手段:

                GPU加速

                觸發GPU加速的方式有:

                1.CSS3 transitions

                2.CSS3 3D transforms

                3.WebGL 3D 繪制

                4.Video

                5.……

                使用GPU加速前有對比實驗:

                GPU加速實際上是大幅減少了合成/繪制時間,從而大大地提高了頁面速度,但GPU加速有自己的缺點:

                過多的GPU層會帶來性能開銷,主要原因是使用GPU加速其實是利用了GPU層的緩存,讓渲染資源可以重復使用,所以一旦層多了,緩存增大,就會引起別的性能問題。

                總結

                本文針對頁面呈現的四個階段提出了比較典型的優化手段,再提醒讀者一下:其實優化是雙刃劍。

                按需加載提升速度,但可能導致大量重繪;

                Touch響應快,但很多場景不適合;

                GPU加速 效率高,但內存開銷大等等

                Loading會讓整體體驗流暢,但容易造成用戶流失

                圖片壓縮讓帶寬成本降低,但可能會導致視覺效果變差

                類似這樣的矛盾點還有很多,請結合業務按照實際情況進行優化。

                一諾建站公司是一個專家建設團隊組成,配備了相當成熟的建站人員,同時依托公司自主研發的后臺管理系統的技術優勢,保障網站程序能夠穩定的投入使用。成百上千次得程序測試,升級,使得您的網站有更高的保障!

                北京專業建站的企業選擇,實現你定制開發網站的需求。

                掃二維碼與項目經理溝通

                我們在微信上24小時期待你的聲音
                解答:網站優化,網站建設,seo優化,APP開發,小程序開發

                  一諾建站公司成立于2006年,是一家以提供網站建設、網站優化、APP開發、小程序開發、網絡營銷推廣為主的專業公司。以客戶需求為導向,客戶利益為出發點,結合自身設計及專業建站優勢,為客戶提供從基礎建設到營銷推廣的一整套解決方案,探索并實現客戶商業價值較大化,為所有謀求長遠發展的企業貢獻全部力量。

                網站建設公司,網站制作公司,網站優化
                一諾建站公司是值得信賴的網站建設公司。多年來持續為眾多企業提供網站設計制作,網絡營銷策劃、seo優化外包、營銷型網站建設、手機網站建設、H5響應式網站制作等互聯網業務已經有12年之久,讓企業與用戶快速連接起來。
                青春娱乐分类在线