前端 學習心得 移動端效能提高1

2022-08-30 08:21:08 字數 1027 閱讀 7938

到了大年初四基本上該拜的年都拜完了,今天天氣格外好,陽光明媚,有時候覺得光是簡單的曬曬太陽就是幸福,很希望能多多靜下心來仔細去思考,然後再去學習。好了不廢話了,今天想分享一下自己再前端移動端部分積攢摸索的知識。

首先向大家介紹一本書《html5觸控介面設計與開發》,這本書並不厚,但講的東西都是乾貨,十分受用,我今要分享的也是來自於此書中。

相比於pc端的web應用,移動端對效能的要求更甚,因為畢竟小小的手機運算能力還是比不上pc的,這裡我就先從效能方面更大家說說。

先看看瀏覽器如何載入介面的:

1 解析網域名稱

使用者輸入的網域名稱經過dns伺服器解析後變為ip,然後通過ip訪問應用,為了減少dns伺服器上的負載,dns的查詢機制會被瀏覽器,裝置及裝置和伺服器之間的路由器和**伺服器快取。

2 發起請求

瀏覽器拿到ip後向ip位址的主機發起tcp連線,然後傳送請求,請求中包含**,瀏覽器資訊,瀏覽器能接受的資料型別(編碼和語言),以及相關cookie包括域和路徑的cookie

4渲染介面

最後瀏覽器會盡快渲染頁面。如果頁面中包含了css或指令碼檔案,瀏覽器會等到這些檔案載入和解析完再渲染。

由此可以總結出頁面載入緩慢的幾個原因:

http連線總數。

總位元組數。

等待時的渲染阻塞。

延遲。快取能力差。

早些的時候我分享了一篇前端工具,chrome瀏覽器,可以通過使用chrome的時間線外掛程式檢視響應的時間。方法是審查元素->network.

然後我們可以針對這些原因一一解決,

http請求數太多我們可以合併那些資源檔案,比如css,js,以及image,這些合併的工作可以使用grunt,考拉等來完成。

總位元組數,同理我們壓縮相關的資源檔案即可。

等待時的渲染阻塞,就是說必須等待js完成後才能渲染介面,那麼我們就把js的依賴放到頁尾,當然這並不是絕對的,因為有的時候必須把相關js放到前面。

網路延遲,這個解決的辦法就是提高自己伺服器的效能,比如增大頻寬,使用內容分發網路cdn等。

快取能力差,針對快取問題我會再明天單獨跟大家分享一下。

oracle學習心得 1

oracle 使用心得 剛開始使用oracle,把今天的學習心得小結一下。oracle 預裝之後會有一些預設的帳戶供使用,具有管理員許可權的可用 system manager 接下來熟悉了一下oracle基本命令 1 建表 舉例 sql create table mytable name chara...

jQuery學習心得(1)

經常見到jquery中的這種寫法 function jquery 許多前端工程師都只是照貓畫虎的這樣,卻不清楚為什麼這樣寫。其實這個寫法是函式定義立即呼叫的寫法之一。在js中,function在定義的時候就可以通過在後面加乙個小括號的形式立即進行呼叫。例如 function function fun...

ThinkPHP學習心得(1

1.模組下面用空方法 empty 處理非法的action請求 2.控制器action資料夾中的 action 控制器對應tpl下的 視 件夾,action 中的 yyy 方法對應 資料夾下的 yyy.html 檔案 3.學習了模板中標籤 5.空模組處理控制器 emptyaction.class.ph...