您現在的位置是:電腦技術吧?>? 編程技術 ??>??性能集成與性能開發,整車性能開發??>??正文詳情

性能集成與性能開發,整車性能開發

羊舌芷荷2019-11-05 13:51:12 人圍觀
簡介html5就業前景以下文章由一位名叫張利明的it技術人員撰寫,并發表在infoq的網站上。這一次,他在全文中從九個不同的方面分析了HTML5的性能,從性能的角度來看,HTML5首html5游戲開發前

以下這篇文章是由一位名為張黎明的IT技術人員所寫,其發表于InfoQ的網頁上。

這次他在全文里面從9個不同的方面分析HTML5的性能,還是很值得相應的開發人員閱讀的。

  從性能角度來說,HTML5首先是縮減了HTML文檔,使這件事情變得更簡單。

第一,從用戶可讀性上說,原先一大堆東西,像初學者第一次看到這些東 西是看不懂的,而HTML5的聲明方式對用戶來說顯然更友好一些。

第二,文檔編碼的聲明,用HTML5方式的話,就很簡單。

很多人問HTML5是什么?我們說可以先用HTML5的方式就是把DOCTYPE先改了,因為目 前很多頁面都還是用傳統的方式。

HTML5的方式,本身是兼容IE瀏覽器的,從IE6到IE10都可以,包括高級瀏覽器都支持。

所以說擁抱HTML5最簡 單的方式就是把DOCTYPE給改了。

  1.更簡潔的標簽  接下來可能并不是一件很常見的事情,但是卻是我比較推崇的,使用更簡潔的標簽方式。

HTML5從這個名字大家可以聽出,它是從HTML4繼承過來 的。

HTML4里面有嚴格模式跟過渡模式,HTML5是支持這種過渡模式的,就是你可以不把一些標簽閉合。

但是,我并不推薦所有的標簽,比方說BODY標 簽的不閉合,這種我們不推薦。

但是像P標簽最常用的,還有列表標簽LI。

為什么這樣說?首先從視覺的角度來說,這樣的方式更簡潔一點。

然后關鍵的是在文檔 傳輸過程中,內容會更少。

  HTML5標簽屬性的聲明支持三種方式:單括號、雙括號和不加括號。

為了減少文檔大小,我是選擇不加雙引號的方式或單引號的方式。

但是要注意,假設 是類屬性的聲明,因屬性可能包括多個類,多個類的時候則必須用括號括起來。

在這方面,給大家看一下谷歌的一個實踐。

谷歌自己有一個頁面完全實踐了上面的東 西,文檔的大小減少了20%,使HTML文檔的傳輸減少了20%。

如果把整個都實踐起來,可以達到5 %之間的減少。

這是第一步,縮減HTML文檔 的大小。

  2.圖片優化  接下來是關于圖片的優化,圖片永遠是又愛又恨的元素。

因為當圖片多的時候,會嚴重拖垮整個頁面的加載速度。

關于圖片的優化方式,高性能網站書中已有很多介紹,總結起來主要有三點:使用精靈圖、優化圖片的大小,使用DATA URI,具體這里就不細說了。

  圖片優化的另一個思路是:no-image。

拋棄圖片,擁抱CSS3。

原先需要設置一張圓角效果的圖片,現在使用CSS3中的 border-radius;原先需要設置陰影效果的圖片,現在使用CSS3中的box-shadow;原先需要設置漸變的背景圖片,現在使用CSS3中 的gradient。

  3.預取  接下來講Prefetching,預取,是優化的另一個思路。

我們現在優化的思路無非就是少。

很多都是從少的角度,比方說前面把文檔大小減少,把圖 片的大小減少。

很多張的圖片變成一張精靈圖,都是為了把發送請求的數量減少。

預取的話,是另一種思路,提早加載好資源,用戶去點的時候,實際上已經加載 好,那肯定是更快了。

  預取,一共有兩部分:一部分是資源的預取,還有一部分是DNS的預解析。

  資源預加載有幾個點需要注意:  預加載只是在瀏覽器空閑的時候才會去拉,但不保證一定會去拉,這是很重要的一點。

因為本身瀏覽器有一個全局的監聽器,這是內部的一個接口,當瀏覽氣空閑的時候,它會去執行瀏覽器空閑的時候應該做事情,但是這個空閑的回調不一定被觸發,所以說并不保證一定會執行預加載。

  Chrome不支持HTTPS資源的預加載,像Alipay是HTTPS的頁面,Chrome不會去預拉取。

  一個預拉取的頁面雖存在后不可見,實際上它是在正常解析。

假如說我預拉取登陸頁面,登陸頁面有很多資源,比方說有圖片,有CSS文件,JS文件。

它 是從上往下正常的會被解析,解析的過程中,這個頁面沒有顯現,但是它實際上是存在的。

在HTML5里面,可通過 document.visibilityState得到當前頁面狀態,通常頁面有兩種狀態,可見與不可見,但是現在有一個新的狀態,叫做預渲染的狀態。

可 以直接通過document.visibilityState 是否等于 prerender 來判斷頁面是否在預渲染狀態。

  4.DNS解析  接下來是關于DNS的解析。

有時候我們登入頁面,對用戶可能點的地方相對而言是比較難探測到,當然有時候我們會做一些埋點來探知用戶下一步行為大部 分是往里走。

但有些情況下,我們不知道用戶下一步具體會走到哪一個頁面的時候,但是我們知道他要走到哪一個域。

這個時候,我就可以預解析DNS。

因為實際 上,整個頁面的請求過程中間有一個很長的DNS的解析過程,如果說這個我們提前做了,就可以更進一步讓用戶看到這一頁面。

  以下是Q 壁紙的案例。

Q 壁紙是Q 某一個系統系統,首先Q 整個的架構是基于WEB 客戶端。

我們現在看到的就是一個WEB的頁面,雖然它外面是一個客戶端的殼,但是它的心是WEB的。

整個過程在我們第一次在完成的時候,因為圖片比較多, 所有的靜態資源是分配到十幾個靜態服務器上。

也就是說,如果我要去拉的時候,我就要解析10個DNS,這個時間是相當耗時的,最慢的時候可能會延遲幾秒 鐘,這是我們肉眼能感覺到的。

如果進行DNS預解析,因為本身資源我不知道具體是哪一個,所有圖片都是隨機的,所以我們只能說在DNS預解析上下功夫,來 提升它的速度。

這樣的話,從原來可能需要2秒鐘,我就變成1秒鐘。

  接下來講Q 中的應用。

我們會像QQ里面一樣,QQ里面跟Q 都有很多文字鏈,就是窗口的左下角有一個文字APP信息的推送。

這邊是通過WEB時時 去拉取后端,后端拉取過來然后在前臺顯示。

但是在某一個時期,其實所有的APP它一共推送的運營信息是固定的。

如果說按某個具體APP去分析每個文字鏈對 應數組的話,這個時候是非常大數據。

因為這里一個就大概有達到三四百個字節,從優化的角度說,我們把這些每次拉區過來的存在本地。

再存上本地的 localStorage,我們是同一域,所有的APP之間的信息都是可以相互訪問的。

然后就是把所有拉過的ID,就不會再重新拉一遍。

  在這里也有一個需要注意的點,localStorage目前很多廠商的實現是同步的。

如果你大量地調用localStorage這個接口,實際上他 會阻塞你的渲染進程。

這個時候,當用戶往下拖動頁面的時候,然后你這個時候又正好在做存儲數據,這個數據又比較大,這個時候用戶就會感覺你這個頁面非常 卡。

之前他們都有討論這個問題,本身這個接口的設計IE是設計成異步的,他們設計是成同步。

這個會導致在調這個借口的時候,假設你程序比較多,因為有一個 序列化的過程,序列到磁盤。

這樣的話,整個過程就會顯得比較慢。

再加上本身localStorage可以做不同的窗口之間共享這個數據,它會在這個數據上 加鎖。

如果大量地數據在調用這個本地接口,它就會顯得比較卡。

所以目前沒有什么特別好的解決方案,但是這是需要記住的。

即使說目前最大的五點多兆,如果你 用了五點多兆,會讓用戶很悲催。

因為你如果一去調用這個借口,用戶在拖用鼠標,就覺得非常卡。

  5.離線存儲  接下來講離線存儲在性能方面給用戶帶來的好處。

首先是進離線存儲的定義文件,在Q 中所有的系統模塊,都是有定義離線支持。

就是說所有的應用,如果 網斷了,還是可以用。

在文檔中加入MANIFEST的文件,MANIFEST是一個定義文件,聲明當前頁面哪些是需要存儲在本地的?哪些是不需要存儲的? 哪些如果說請求失敗,應該用哪些新的圖片或者什么來代替?這樣分三塊:  第一,CACHE,哪些需要存儲到本地。

  第二,NETWORK,是不會存儲在本地的,它每次都回去請求一遍但是這里需要指出的是,本地存儲跟瀏覽器存儲實際上是兩回事情,他們存的是兩塊不 同的地方。

即使NETWORK這邊需要告訴APP說,我需要每次都拉一次,因為像Chrome,他這個存儲緩存是非常可惡的,比較難清除的,必須通過手動 去清除,才能完全生效。

所以說你即使設置了不要讓它存儲在本地,但是瀏覽器可能本身把它存儲起來了,因為他存的是兩塊不同地方。

  第三,FALLBACK。

如果說一個圖片假如說請求失敗,它是404。

那要用什么圖片代替?我覺得這個比較好玩。

  MAEIFEST怎么設置? MANIFEST這里需要注意的是三點:  MANIFEST同源限制;  MIME類型必須為text/cache-manifest,這是標準的,如果是其他格式,都不會生效;  CHROME,如果要看這個東西有沒有生效,可能通過CHROME這個偽協議的方式在瀏覽器輸入,chrome://appcache-internals。

  關于如何去更新應用的緩存。

為什么要離線存儲?離線存儲在本地,當瀏覽器知道你有離線存儲你,它會首先去離線存儲的目錄下,去找這個資源是否已經被 Cache。

當它已被Cache的時候,他就直接從這邊拿到這個資源,不會再去發送一個請求。

因為瀏覽器的請求是這樣的,當有離線存儲的話,就連請求都不 會發,所以說會更快。

如果說有的時候我們需要更新,更新的時候怎么辦?  用戶可以手動去清除瀏覽器的Cache,這個時候自動把本地存儲給清除了。

  修改MANIFEST的任何內容,這是比較推薦的方式,也是我們線上用的方式。

就是說我們可以修改里面的的具體項目,但是這里應該最好是修改注釋, 因為我每次發布的時候,我們自動發布機制,發布的時候在上面注釋修改一下就可以了。

這樣的話,每次發布的內容,都會實時同步到客戶端的本地;  通過程序去執行,程序的就是window.applicationCache.update()。

就是我要去操作離線存儲,其實我有時候叫應用存儲,因為它的語意就是應用存儲。

我們去手動的更新應用存儲。

  6.Web Worker  接下來Web Worker。

Web Worker是一個多線程的JS進程。

應用場景其實我們在線上的話,是沒有的,我就不講了。

但是可以講下具體我看到過的應用場景。

  首先介紹一下WEBWORK是什么東西?它是一個OS級別的線程。

之前我們模仿多線程,實際上都是多開一個窗口。

但是現在的話,瀏覽器本身就提供了,這個會讓操作帶來更多便利,是讓我們整個文檔比較重,并不是很建議的方式。

  然后WebWorker訪問能力是有限的,它并不能訪問到很多全局對象。

比如說documnet對象它是訪問不了的。

WebWorker最適合的場景就是CPU密集型的計算操作。

之前我們做游戲的時候,我們用BOX2D。

應該很多人聽到過,它涉及到大量的計算,就是整個 頁面里面,下面所有的物體要去計算它們的碰撞關系,這個計算量是非常大的。

但是如果放在當前的JS的進程里面去執行,這個計算量一大,一計算,整個頁面就 非常卡。

但是如果用WebWorker去做,它是異步的過程,實時的發送過去,在計算的過程中還能干其他事,這就是多線程。

  7.設備API  講一下設備API。

設備API我覺得最重要在性能方面,也是目前實現最早的API。

一個是CONNECTION,就是網絡帶寬。

這個有什么作用?在 中國這個場景下,必須得記住,很多用戶的網速依舊是很低的。

我們希望讓用戶網速低的時候,能夠自動降級到一個比較低的方案。

如果用現有的技術,我們是做不 到的。

但是使用設備API我們是可以的。

因為我們知道,從設備上可以取到這些信息。

它的寬帶是多少,多少寬帶的時候我們能干的事情。

比方說寬帶好的時候, 我就用高清圖片。

寬帶比較低的時候,就用清晰度比較低的圖片。

  8.電池  下面一個是關于電池的。

我覺得從性能角度來說,主要是電量方面。

假如說用戶電池電量比較低的時候,我覺得是應該盡量少做一些事情。

本身手機現在電池的技術來沒有突破,我覺得讓APP看起來比較高性能,也是一個宣傳亮點。

  9.CANVAS  接下來是CANVAS。

講CANVAS的幾個性能優化點,用了這些東西,性能會有10倍的提升。

  第一,每個CANVAS就是一個畫布,我們要去渲染一個圖形的時候, 我們是可以把它分層的。

就是像PS里面一樣,是一層兩層三層。

很多用戶在做游戲的時候,直接把所有東西仿放到一個層里,一更新所有的東西都要更新。

但如果 你把它分層,你讓背景放在背景層,角色放到角色層。

這樣的話,我要更新角色的時候,只會更新角色,背景層不需要變。

讓CPU干的事情更少了,性能自然而然 就提升了。

  第二,context.drawImage。

不要去縮放圖片,我們一開始就犯了一個錯誤,我們的美工做的圖片始終跟我們不一致,然后我們要去縮放圖 片。

因為本身設備它的圖片大小是這樣的,我們必須按比率縮放圖片。

縮放圖片以后發現在低端設備下,比方說iPad或者iPhone就會非常卡,我們就想為 什么?就進行代碼上的分析,當用這個方法時候,花費的時候特別多。

  第三,requestAnimationFrame。

這是專門為渲染優化的一個方法。

它本身的原理是這樣的,當瀏覽器每過一楨的時候,會觸發這個方 法,當我在觸發的時候,Canvas得到這個瀏覽器已經準備好做下楨的事情。

如果用傳統的方法,是不會去考慮你更多的東西,它只會知道我過了多少時間,我 就要執行。

假如說用戶之前被阻塞了,每10秒鐘執行這一方法,在10秒之內,實際他之前的事情還沒有做完,然后這個事情就會被延后。

它就是為了動畫看上去 更流暢而優化的,因為每一楨的時候,它就告訴你說,你可以做一些事情。

(文:infoq)

版權聲明:本文由 羊舌芷荷 整理編輯。

原標題:性能最強的開發版,性能開發

轉載注明出處:http://www.dn9ww09s.icu/program/11192.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 2013office激活工具,office2016激活工具

    2013office激活工具,office2016激活工具 相關圖片激活office工具現在,小編一說“激活”,估計年輕人馬上就會想到電腦系統激活、微軟辦公激活等,如果你是這么想的,你真的很棒。因為小編今天說的是如何使用office 2013激活工offic...

  • css如何讓div居中,居中css

    css如何讓div居中,居中css 相關圖片html中div怎么居中div中行級元素的中心代碼如下:div class=treetitleimgsrc=images/app.png/span導航菜單/span/div要求:cen怎么讓div居中...

  • 筆記本電腦怎么無線上網,筆記本電腦無線網絡

    筆記本電腦怎么無線上網,筆記本電腦無線網絡 相關圖片筆記本電腦連不了wifi目前筆記本電腦無線上網的方式很多,如使用路由器上網、購買聯通cdma等。所以,今天的編輯將教你如何使用筆記本電腦進行無線上網讓我們仔細看看。現在我們用...

  • 電腦啟動不起來是什么原因,電腦花屏是什么原因

    電腦啟動不起來是什么原因,電腦花屏是什么原因 相關圖片租借電腦不管是手機還是電腦,剛買的時候都跑得很快。過了很長一段時間,它開始卡住,反應很慢。電腦太落后了,原因是什么?是什么導致電腦中毒恐怕很多用戶對此知之甚少。在...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽aside標簽的定義和規范aside用于加載非主體類的內容(DOM接口,可設置屬性)例如,廣告、群組鏈接、側邊欄等。!DOCTYPE htmlhtmlheadm自定標簽...

  • dwg格式文件用什么軟件打開,如何打開dwg格式文件

    dwg格式文件用什么軟件打開,如何打開dwg格式文件 相關圖片微信怎么打開dwg格式文件不僅各行各業的工程師經常接觸CAD圖紙,而且同一部門的工作人員也經常接觸。然而,他們中的許多人并不需要使用CAD生產軟件來工作如何在沒有CAD生產軟件的...

  • html音樂播放器代碼,iframe音樂播放器代碼

    html音樂播放器代碼,iframe音樂播放器代碼 相關圖片音樂網頁html代碼HTML5的作品,經過測試,效果不錯。不幸的是,他們只支持像谷歌和蘋果這樣的webkit核心瀏覽器。當用戶體驗時,請使用谷歌等瀏覽器運行,否則看不到效果。讓我們h...

  • 電腦開機藍屏怎么解決,電腦經常藍屏怎么辦

    電腦開機藍屏怎么解決,電腦經常藍屏怎么辦 相關圖片筆記本電腦藍屏怎么解決伙計們,我得跟你們吐點苦水前段時間,小編制作的電腦似乎在自由自在,試圖給我一個藍屏。每次都讓我花時間去解決它。你和我有同樣的問題嗎如果有,我...

  • 正方體旋轉,正方體旋轉怎么做

    正方體旋轉,正方體旋轉怎么做 相關圖片一個正方體以對角線為軸旋轉渲染:CSS代碼:代碼如下:@keyframes自旋{from{transform:rotatey(0);}到{transform:rotatey(-360DE旋轉正方體怎么折...

  • 蘋果電腦如何切換雙系統,蘋果電腦裝雙系統切換

    蘋果電腦如何切換雙系統,蘋果電腦裝雙系統切換 相關圖片蘋果系統切換到windows系統很多使用Mac和蘋果電腦的朋友都會選擇為自己的電腦安裝雙機系統,因為他們的工作需要不僅僅是使用蘋果的Mac OS系統,所以如何在蘋果雙機系統之間切換,實...

熱評文章

  • 電腦為什么這么慢,電腦又卡又慢

    電腦為什么這么慢,電腦又卡又慢 相關圖片電腦為什么很卡很慢新安裝的系統的計算機運行速度非常快,因為系統剛安裝完,就沒有安裝軟件,只是系統的純版本,這自然很快。當我們的電腦使用了很長一段時間,安裝了很多軟...

  • lrc文件制作,怎么制作lrc文件

    lrc文件制作,怎么制作lrc文件 相關圖片什么是lrc文件在我們的日常生活中,我們經常喜歡聽歌曲當我們坐公共汽車、散步或看書時,我們都聽歌曲。但是今天,小編會教你一個很厲害的技能這就是用酷狗制作lrc文件的方法。...

  • div position,div層疊position

    div position,div層疊position 相關圖片position屬性值有哪些代碼如下:divstyle=position:relative;height:100px;width:100px;border:1px solid reddiv_position...

  • 打開ai文件的軟件,什么是ai文件怎么打開

    打開ai文件的軟件,什么是ai文件怎么打開 相關圖片手機能打開ai文件嗎我們的電腦上會有很多文件,但有些文件不知道是什么。直接打開時不能打開很多人會對后綴為AI的文件感到困惑它們是什么樣的文件?怎么能不打開呢?接下來,我...

  • 精美css3表單,css3表單代碼

    精美css3表單,css3表單代碼 相關圖片css3豐富表格生產步驟:首先,介紹prefixfree.js腳本下面的代碼使用css3的prefixfree.js腳本,它可以消除css3中的前綴-moz、-webkit、-css3制作登錄表單...

  • 電腦主機打不開如何解決,電腦主機怎么打不開

    電腦主機打不開如何解決,電腦主機怎么打不開 相關圖片主機打不開怎么辦主機是計算機的重要組成部分之一可以說,沒有它,計算機就所剩無幾了既然這很重要,如果有問題的話基本上很酷。不幸的是,小編有辦法。然后小編會告訴你怎么...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽寫在頭上,而且只寫一次內容類型為文本接口htmlTitleElement:htmlElement{attribute domstring text;};標題標記自定標簽...

  • word頁眉橫線,word去頁眉橫線

    word頁眉橫線,word去頁眉橫線 相關圖片如何取消頁眉頁腳橫線在編輯單詞頁眉和頁腳時,有時在取消頁眉后,頁眉下會出現一條水平線,或者您希望保留頁眉內容并刪除頁眉中的水平線如果你不喜歡下面的水平線并想刪除它...

  • css3input樣式,input css

    css3input樣式,input css 相關圖片css3submit要實現邊框的單擊顏色漸變效果,它不僅是一個長方體陰影屬性,它就像周圍的均勻燈光,還包含慢光過渡效果在繼續學習之前,您必須具備CSS3的一些基本知識為此,您需要了...

  • win7系統還原,電腦怎么重裝系統

    win7系統還原,電腦怎么重裝系統 相關圖片系統還原計算機的問題超出了腦洞的范圍。我想到計算機問題,它有;我不認為,它有。但盡管如此,我仍然有辦法解決這個問題~ha ha~所以今天我將告訴你如何恢復計算機系統。在開機...

關注微信

变脸官网查询