當前位置:首頁 » 網頁前端 » 前端工作指標
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端工作指標

發布時間: 2023-08-06 09:54:06

A. 前端、光纖傳輸系統和電纜分配系統各分擔多少指標

前端、光纖傳輸系統和電纜分配系統各分擔多少指標?
一個採用光纖傳輸的大型有線電視網總含有前端、光纖干線和同軸電纜分配網三大部分,這三部分共同承擔載噪比、復合三次差拍比和復合二次差拍比三大技術指標。根據器件性能和所能達到的指標實踐,前端、光纖干線、電纜分配網分別承擔載噪比的32.7%、39.8%、27.5%,分別承擔復合三次差拍比的0%、29.3%、57.3%,分別承擔復合二次差拍比的0%、46.4%、53.6%。

B. 計算機主要技術指標

(1)字長:指計算機運算機中寄存器的位數。字長越長,表示數的范圍越大,即有效數字的位數越多,計算精度越高。

(2)運算速度:表示電子計算機運算快慢程度的指標,用每秒鍾所能執行的指令條數表示,單位為「次/秒」。

(3)存貯容量:指存貯器所能寄存的數字或指令的數量,即存貯器能夠存貯二進制信息的能力。

(4)存取周期:指存貯器進行一次完整的存取操作所需要的時間,存取周期在很大程度上決定著計算機的計算速度,它越短越好。


(2)前端工作指標擴展閱讀

計算機主要技術指標性能評價技術研究使性能成為數量化的、能進行度量和評比的客觀指標,以及從系統本身或從系統模型獲取有關性能信息的方法。前者即測量技術,後者包括模擬技術和分析技術。

性能評價通常是與成本分析綜合進行的,藉以獲得各種系統性能和性能價格比的定量值,從而指導新型計算機系統的設計和改進,以及指導計算機應用系統的設計和改進,包括選擇計算機類型、型號和確定系統配置等。

C. 以下哪些是常見的web前端性能關注點

前端性能關注的重點主要有以下幾點

1. 載入時間指標,主要包括三個時間斷

a. Time to First Impression

表示從用戶在瀏覽器鍵入url按下回車鍵一刻開始到頁面開始有反應(用戶可以在頁面中看見一點點內容)為止。經常能感覺到的一個信號就是網頁開始顯示title。

b.Time to onLoad Event

表示從頁面開始顯示內容,到瀏覽器開始觸發OnLoad函數這一時間段。只有當初始的文本和所引用的對象載入完成,瀏覽器才開始觸發OnLoad函數

c.Time to Fully Loaded

表示從上一時間段末到整個網頁完全載入完成(所有OnLoad函數以及相關的動態資源載入

完成)。在網頁中含有timeout或定時刷新之類處理時較為難判斷結束點。

2. 資源情況指標

網頁由初始的html文本中嵌入圖片以及通過XHR或者修改dom樹動態載入的內容組成,css負責樣式,js負責行為。所以當網頁資源過多為了下載資源客戶端和伺服器的網路來回就更多。下面是資源方面相關的指標。

a. Total Number of Requests

包括html網頁請求,css、js資源下載及其它網路請求。優化的目標之一是要盡量減少請求數。

b. Total Number of HTTP 300s/400s/500s

表示返回狀態為3009重定向)、400(客戶端錯誤)、500(伺服器端錯誤)的http請求。盡量避免這些請求以提高頁面load的時間。造成這些狀態的原因經常是伺服器的實施、配置和部署問題。

c. Total Size of Web Site

構成網頁元素總的大小。圖片或者js庫的增加都會對下載時間造成重要的影響。

d. Total Size of Images/CSS/JS

image、css、js在網頁元素大小中佔主要比例。

e. Total Number of XHR(XMLHttpRequest) Requests

通過js非同步從伺服器端獲得數據的請求數。一些js框架提供了跟伺服器端的更新機器就是XHR請求。通過配置可以減少XHR請求的數目

3. 網路連接指標

瀏覽器底層的網路連接對資源的下載速度有很大影響。資源的下載過程分為很多階段。下面介紹這些階段以及瀏覽器、網路、請求如何影響這些階段的時間

a. DNS Time

dns 查詢的時間。網頁請求會產生一次尋找該網頁資源所在主機的dns查詢。在同個域名進行網頁切換不會造成新的dns查詢。

b. Connect Time

指瀏覽器和伺服器之間建立tcp/ip連接的時間對於ssl連接包括握手的時間。網路連接過慢、使用ssl、使用短連接而非常連接都是造成connect time較多的原因。

c. Server Time

指收到請求後伺服器邏輯處理的時間

d. Transfer Time

這一指標與瀏覽器和伺服器之間的連接速度相一致通過減小傳輸內容或使用cdn來降Transfer Time。

e. Wait Time

等待時間和同一個域中服務資源的數量直接相關。每個域的瀏覽器的物理網路的限制,導致資源等待可用的連接。減少資源的數量(或將資源散布在不同的域)能將這一時間降低。平均等待時間的大小更能反映等待時間是否需要注意。

f. Number of Domains / Single Resource Domains

部署網站資源的域主機數量是很重要的,因為它影響的DNS連接和等待時間。專門用戶資源下載的域是必要的他將直接減少等待時間。應避免單一的資源域否則你將為dns查詢以及資源下載付出昂貴的代價。

D. 前端開發 「性能」有多重要

關於頁面相應時間,有一條著名的「2-5-8原則」。當用戶訪問一個頁面:

在2秒內得到響應時,會感覺系統響應很快;
在2-5秒之間得到響應時,會感覺系統的響應速度還可以;
在5-8秒以內得到響應時,會感覺系統的響應速度很慢,但可以接受;
而超過8秒後仍然無法得到響應時,用戶會感覺系統糟透了,進而選擇離開這個站點,或者發起第二次請求。

對於一個網站如果希望抓住用戶,網站的速度以及穩定性是非常重要的。

從各式各樣的前端監控平台中,你都可以獲得頁面很多的性能指標。本文將介紹幾個幾個比較關鍵的指標,並給出相應的優化思路。

開始渲染時間

該時間點表示瀏覽器開始繪制頁面,在此之前頁面都是白屏,所以也稱為白屏時間。

該時間點可用公式Time To Start Render = TTFB(Time To First Byte) + TTDD(Time To Document Download) + TTHE(Time To Head End)表示。其中TTFB表示瀏覽器發起請求到伺服器返回第一個位元組的時間,TTDD表示從伺服器載入HTML文檔的時間,TTHE表示文檔頭部解析完成所需要的時間。在高級瀏覽器中有對應的屬性可以獲取該時間點。Chrome可通過chrome.loadTimes().firstPaintTime獲取,IE9+可以通過performance.timing.msFirstPaint獲取,在不支持的瀏覽器中可以根據上面公式通過獲取頭部資源載入完的時刻模擬獲取近似值。開始渲染時間越快,用戶就能更快的看見頁面。

對於該時間點的優化有:

1)優化伺服器響應時間,伺服器端盡早輸出
2)減少html文件大小
3)減少頭部資源,腳本盡量放在body中

DOM Ready

該時間點表示dom解析已經完成,資源還沒有載入完成, 這個時候用戶與頁面的交互已經可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)可以表示。TTSR上面已經介紹過了,TTDC表示DOM樹創建所耗時間。TTST表示BODY中所有靜態腳本載入和執行的時間。在高級瀏覽器中有DOMContentLoaded事件對應。

詳細規范可以查看W3C的HTML5規范。從MDN文檔上可以看出該事件主要是指dom文檔載入解析完成,看上去很簡單,但是DOMContentLoaded事件的觸發與css,js息息相關,現在有專門的名詞Critical Rendering Path(關鍵呈現路徑)來描述。

在不支持DOMContentLoaded事件的瀏覽器中可以通過模擬獲取近似值,主要的模擬方法有:

1)低版本webkit內核瀏覽器可以通過輪詢document.readyState來實現
2)ie中可通過setTimeout不斷調用documentElement的doScroll方法,直到其可用來實現

具體實現方法可以參考主流框架(jquery等)的實現。 DOM Ready時間點意味著用戶與頁面可以進行交互了,因此越早越好,對於該時間點的優化有:

1)減少dom結構的復雜度,節點盡可能少,嵌套不要太深
2)優化關鍵呈現路徑

首屏時間

該時間點表示用戶看到第一屏頁面的時間,這個時間點很重要但是很難獲取,一般都只能通過模擬獲取一個近似時間。一般模擬方法有:

1)不斷獲取屏幕截圖,當截圖不再變化時,可以視為首屏時間。可參考webPagetest的Speed Index演算法;
2)一般影響首屏的主要因素是圖片的載入,通過頁面載入完後判斷圖片是否在首屏內,找出載入最慢的一張即可視為首屏時間。當然還需考慮其他細節,具體可參考【7天打造前端性能監控系統】

針對該時間點的優化有:

1)頁面首屏的顯示盡量不要依賴於js代碼,js盡量放到domReady後執行或載入
2)首屏外的圖片延遲載入
3)首屏結構盡量簡單,首屏外的css可延遲載入

onload

該時間點是window.onload事件觸發的時間,表示原始文檔和所有引用的內容已經載入完成,用戶最明顯的感覺就是瀏覽器tab上loading狀態結束。

該時間點的優化方式有:

1)減少資源的請求數和文件大小
2)將非初始化腳本放到onLoad之後執行
3)無需同步的腳本非同步載入

為了優化整站性能,頁面onload的時候可以考慮做一些預載入,把其它頁面需要用到的資源預先載入進來。