基于Web前端分析過程，大概有十幾個(gè)測(cè)試要點(diǎn)，我們今天主要來講解結(jié)合前五個(gè)要點(diǎn)進(jìn)行詳細(xì)解說。前端測(cè)試點(diǎn)主要針對(duì)前端展開，什么叫前端分析呢？就是我們所有的分析和測(cè)試要點(diǎn)所站的視角都是針對(duì)客戶端或者瀏覽器來對(duì)系統(tǒng)進(jìn)行分析和測(cè)試的，我們不需要考慮服務(wù)器端的架構(gòu)是什么樣的，也不需要考慮從服務(wù)器角度來說要去關(guān)注數(shù)據(jù)庫(kù)、服務(wù)器、系統(tǒng)集成、Web服務(wù)器的配置等，這十幾個(gè)測(cè)試要點(diǎn)可以測(cè)試任何的類型網(wǎng)站的質(zhì)量，我們不需要關(guān)注后臺(tái)的相關(guān)內(nèi)容，例如：我們可以使用些這些測(cè)試要點(diǎn)去測(cè)試任何的網(wǎng)站質(zhì)量怎么樣，我們是從前端的視角來檢驗(yàn)系統(tǒng)的質(zhì)量，除了這些要點(diǎn)之外，所有WEB網(wǎng)站的工作原理都需要理解，因?yàn)樗械膬?nèi)容都是基于網(wǎng)絡(luò)協(xié)議展開的，首先，我們得了解HTTP協(xié)議的工作原理過程，才能夠?qū)@些測(cè)試要點(diǎn)進(jìn)行全面的分析和理解，才能夠真正的結(jié)合實(shí)踐應(yīng)用。其次，要對(duì)瀏覽器工作原理進(jìn)行深入了解，我們一定要對(duì)瀏覽器和服務(wù)器是如何工作的原理有一個(gè)深入的了解，前面我們也通過網(wǎng)絡(luò)架構(gòu)原理課程了解了相關(guān)的過程，包括軟件兼容性內(nèi)容中與大家詳細(xì)講解了瀏覽器的工作原理及頁(yè)面的渲染引擎做了很詳細(xì)的講解，讓大家全面的理解基于前端的測(cè)試要點(diǎn)。

盡可能減少HTTP請(qǐng)求的數(shù)量。我們可以通過合并的方式，例如：可以將JS、CSS或者圖片合并到一個(gè)頁(yè)面中，可以采用多個(gè)圖片合并到一個(gè)圖片中，這樣就能達(dá)到減少HTTP請(qǐng)求的數(shù)量，減少HTTP請(qǐng)求的目的是為了減少HTTP釋放鏈接的資源，提升系統(tǒng)訪問速度，從而提升性能。

前端瀏覽器緩存應(yīng)用

大家都知道瀏覽器都會(huì)把我們?cè)L問過網(wǎng)站的這些靜態(tài)資源保存在硬盤的目錄中，下次去訪問同樣的資源，服務(wù)器會(huì)檢測(cè)硬盤中是否存在緩存記錄，如果已經(jīng)保存了資源就直接讀取，達(dá)到減少請(qǐng)求數(shù)據(jù)的目的，可以提升系統(tǒng)的性能，所以請(qǐng)大家好好利用瀏覽器的緩存機(jī)制，當(dāng)然緩存機(jī)制也存在它的一些弊端，如果瀏覽器緩存設(shè)置時(shí)間過長(zhǎng)，如果我們更新了內(nèi)容之后，瀏覽器客戶端也不知道，因?yàn)闉g覽還是會(huì)使用之前緩存起來的內(nèi)容，例如：大家平時(shí)在工作中經(jīng)常遇到這種問題，就是系統(tǒng)重新部署發(fā)布之后，我們?cè)俅卧L問系統(tǒng)為什么發(fā)現(xiàn)功能并沒有更新，這其實(shí)就是利用了瀏覽器的緩存機(jī)制，再把緩存清空重新刷新一下就能看到最近修改的相關(guān)功能。

利用Gzip壓縮機(jī)制：只針對(duì)文本類資源有效。

什么是文本類資源？

例如：基于前端頁(yè)面的一些JS腳本、CSS、HTML這些都屬于文本內(nèi)容。文本類資源壓縮比例可以達(dá)到70%以上，基本上100K的資源可以被壓縮成20K，這是一個(gè)非常高的壓縮比例。

為什么只針對(duì)文本類資源壓縮有效？因?yàn)橄裎覀冊(cè)诰W(wǎng)站上看到的圖片都是已經(jīng)被壓縮過了，例如:PNG、GIF、JPEG他們都是已經(jīng)被壓縮過了，即使再有Gzip壓縮也沒有任何作用，大家可以拿一張PNG的圖片，然后使用winrar軟件對(duì)這張圖片進(jìn)行壓縮，你會(huì)看到壓縮圖片的大小不會(huì)有變化，因?yàn)橐呀?jīng)進(jìn)行了壓縮不能再壓縮了，壓縮前和壓縮后的圖片大小基本是一致的。因?yàn)閴嚎s資料后，在網(wǎng)絡(luò)傳輸?shù)臅r(shí)候過程可以節(jié)省很多的帶寬資源，而我們的網(wǎng)站除了圖片以外，文本也占去絕大部分篇幅，從而達(dá)到提升頁(yè)面訪問的速度，提升系統(tǒng)性能。

把CSS文件放在HTML的開頭

我們知道CSS文件主要用來渲染、排版的，我們前面了解了瀏覽器的渲染過程，系統(tǒng)如果發(fā)現(xiàn)網(wǎng)站存在靜態(tài)資源后，然后下載保存到硬盤中，便于我們?cè)L問網(wǎng)站渲染的過程中能夠使用，我們盡可能的將CSS放在最開始的地方，讓瀏覽一開始就能把這個(gè)資源下載完成，這樣后面渲染的過程才會(huì)進(jìn)展得更加順利，不會(huì)因?yàn)橹型境霈F(xiàn)靜態(tài)資源再保存非常浪費(fèi)時(shí)間，請(qǐng)務(wù)必將所以的CSS壓縮到一個(gè)文件中，

將JavaScript文件放在HTML的結(jié)尾.

JS其實(shí)不是用來做渲染的，而是當(dāng)我們的頁(yè)面渲染完成以后，用戶在操作頁(yè)面功能的過程中能夠達(dá)到一種動(dòng)態(tài)的效果，JS既然沒有這種渲染的效果，我們將JS放在最后讓瀏覽器渲染完成頁(yè)面最后等瀏覽器渲染頁(yè)面完成后，用戶才可以調(diào)用到JS來進(jìn)行動(dòng)態(tài)的操作與文件處理，放在最開始的地方瀏覽器會(huì)優(yōu)先下載JS,會(huì)延遲下載圖片等文本相關(guān)內(nèi)容，會(huì)影響頁(yè)面的性能，頁(yè)面渲染顯示的內(nèi)容更緩慢。

總結(jié)：以上五點(diǎn)前端分析測(cè)試要求都是基于前端原理過程梳理出來的核心內(nèi)容，很多同學(xué)在企業(yè)中做測(cè)試一般都是基于UI界面的功能測(cè)試，很少?gòu)脑砩先ド钊肜斫庀到y(tǒng)，于是會(huì)感覺基于前端頁(yè)面的測(cè)試很簡(jiǎn)單，但是要想達(dá)到高級(jí)測(cè)試工程師的要求，必須要學(xué)會(huì)從原理的內(nèi)部過程中來理解事物，從事物的起源中理解內(nèi)容，才會(huì)讓我們的知識(shí)面更具內(nèi)涵，膚淺的內(nèi)容沒有競(jìng)爭(zhēng)力，希望大家能夠掌握。

總結(jié)

以上是生活随笔為你收集整理的前端如何实现网络速度测试功能_分析Web前端测试要点，从架构原理上进行分析，希望大家能够掌握...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。