日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何打造一個(gè)全滿分網(wǎng)站?

作為一個(gè)全棧互聯(lián)網(wǎng)工程師，我們的目標(biāo)決不僅僅滿足于功能的實(shí)現(xiàn)，而且要包括性能、安全、易用性等等各方面的考量。那么是否有一些可以公開(kāi)評(píng)測(cè)的標(biāo)準(zhǔn)，使我們能夠準(zhǔn)確地知道目前我們網(wǎng)站的質(zhì)量水平在全行業(yè)中處于什么樣的水平呢?隨著技術(shù)水平的不斷進(jìn)步，網(wǎng)站評(píng)測(cè)方面的各種工具也在不斷演進(jìn)。

工具

工欲善其事，必先利其器。

想要知道自己網(wǎng)站的質(zhì)量水平，憑想像和猜測(cè)是不行的，必須要有可以客觀衡量的工具。

YSlow

最早做這方面嘗試的是2012年誕生于Yahoo的YSlow，但是現(xiàn)在已經(jīng)逐漸淡出歷史舞臺(tái)。它的名稱實(shí)際上是英文Why Slow(為什么這么慢?)的縮寫(xiě)，從它的名字你應(yīng)該能知道它是幫助站長(zhǎng)解決網(wǎng)頁(yè)加載速度的工具。YSlow是一款瀏覽器插件，可以支持包括Chrome, Firefox, Safari等等主流瀏覽器。在瀏覽器上安裝相應(yīng)插件后，就可以對(duì)任意網(wǎng)站進(jìn)行評(píng)測(cè)，最后給出一個(gè)總體評(píng)分。評(píng)測(cè)內(nèi)容包括網(wǎng)頁(yè)是否包含了過(guò)多的HTTP請(qǐng)求，JS和CSS是否經(jīng)過(guò)壓縮，是否采用CDN等等，主要是提供給站長(zhǎng)一個(gè)優(yōu)化的方向和參考建議。

PageSpeed

在YSlow之后，Google推出了自己的網(wǎng)頁(yè)優(yōu)化建議工具PageSpeed Insights，這是一個(gè)網(wǎng)頁(yè)工具，你不需要像YSlow一樣下載插件和安裝，你只需要打開(kāi)它的網(wǎng)頁(yè)，輸入任何你想測(cè)評(píng)的網(wǎng)址，就可以得到優(yōu)化建議了。

GTmetrix

我最常使用的工具不是以上兩款，而是一個(gè)名叫GTmetrix的網(wǎng)站，這個(gè)網(wǎng)站結(jié)合了以上兩個(gè)工具，給出了更加完整的建議。

Lighthouse

更強(qiáng)大而嚴(yán)格的工具還是Google推出的Lighthouse。這也是一款瀏覽器插件，不過(guò)目前只能用于Google自家的Chrome瀏覽器。它從4個(gè)方面對(duì)任何網(wǎng)站進(jìn)行評(píng)測(cè)，包括性能、易用性、最佳實(shí)踐。我們下面將重點(diǎn)介紹如何能在這4個(gè)方面都完全滿足Google的要求。

優(yōu)化

GTMetrix

優(yōu)化的第一步，我們還是先從GTMetrix開(kāi)始。一般網(wǎng)站常見(jiàn)的問(wèn)題和建議如下：

CDN

通常情況下，你需要為你的網(wǎng)站開(kāi)通CDN服務(wù)，以確保在地理位置上離用戶最近的服務(wù)器可以優(yōu)先為用戶提供服務(wù)。提供CDN服務(wù)的廠商很多，而且價(jià)格并不昂貴，很多云服務(wù)商比如阿里云、百度云都有提供這方面的服務(wù)。

Enable gzip compression

這一項(xiàng)主要是檢查你的nginx服務(wù)器是否設(shè)置了gzip壓縮傳輸?shù)姆绞?。打開(kāi)你的Chrome開(kāi)發(fā)者工具，檢查Network標(biāo)簽里每一個(gè)請(qǐng)求的Response header，看一下是否有content-encoding: gzip，如果沒(méi)有，說(shuō)明你的網(wǎng)站沒(méi)有設(shè)置gzip傳輸。

解決方案：參照我的這篇文章《我的nginx鍋爐片》設(shè)置。

Add Expires headers

這一項(xiàng)也是很多網(wǎng)站缺失的配置，由于沒(méi)有給jpg圖片以及css和js設(shè)置合適的過(guò)期時(shí)間，導(dǎo)致每次訪問(wèn)網(wǎng)站都需要重新從網(wǎng)站讀取內(nèi)容，這是很多網(wǎng)站訪問(wèn)速度慢的原因。設(shè)置方式：同樣，參照上一節(jié)所提到的文章。

解決方案：參照我的這篇文章《我的nginx鍋爐片》設(shè)置。

圖片大小

很多情況下，或者是出于無(wú)知，或者是出于偷懶，工程師們傾向于把一張大圖用css方式縮小，例如這樣：width: 100px; height: 50px;。導(dǎo)致的結(jié)果是這張圖片在網(wǎng)頁(yè)上看起來(lái)似乎圖片縮小了，但實(shí)際上文件尺寸并沒(méi)有變小。這也是很多網(wǎng)站變慢的主因。

解決方法：參照我的這篇文章《用imgproxy自動(dòng)縮放圖片》設(shè)置。

雪碧圖

如果你的頁(yè)面中有很多小圖標(biāo)的時(shí)候，最糟糕的作法莫過(guò)于把它們?nèi)壳谐尚∷榈膉pg或者png，這樣會(huì)使你的頁(yè)面在加載時(shí)向服務(wù)器端發(fā)送很多次http請(qǐng)求，而每一次請(qǐng)求都有獨(dú)立的建立連接、傳輸數(shù)據(jù)、斷開(kāi)連接的過(guò)程，非常浪費(fèi)資源。

解決方案：如果可能的話，把這些圖標(biāo)做成獨(dú)立的圖標(biāo)字體文件。如果不行，則把它們壓縮成雪碧圖。

壓縮js和css

通常情況下，你剛剛寫(xiě)完的js是下圖中左邊這種樣子的，而通常大公司網(wǎng)站的代碼是圖中右邊這樣的。

左邊的代碼人類閱讀沒(méi)有什么問(wèn)題，但是你不應(yīng)該把它們就這樣在網(wǎng)絡(luò)中傳輸。第一，浪費(fèi)流量;第二，你能讀得懂，你的友商也能讀得懂，不利于安全。

解決方案：你應(yīng)該把你的js/css/html進(jìn)行丑化(uglify)和壓縮(minify)。

終極大法

以上所有這些修改建議聽(tīng)上去都不錯(cuò)，但是我要一個(gè)一個(gè)做下來(lái)太繁瑣怎么辦?也許你應(yīng)該考慮用一個(gè)現(xiàn)代的框架幫你自動(dòng)完成這些事情，比如Angular/React/Vue，或者你自己使用Grunt/Gulp/Webpack完成所有這些事情。你知道這就是為什么前端工程師要學(xué)習(xí)框架的原因了吧?因?yàn)槲业牟┛途W(wǎng)站是全用Jekyll直接建在Github Pages上的，使用了CloudFlare做CDN，而它們已經(jīng)自動(dòng)幫我完成了所有這些煩瑣的事情，所以起點(diǎn)比較高，很輕松就能在GTMetrix上得到99分的高分。

Lighthouse

在完成了GTMetrix的要求，能夠獲得99分以上的高分之后，我們還想要達(dá)到更高的標(biāo)準(zhǔn)，挑戰(zhàn)Google的Lighthouse滿分!

Lighthouse從以下4個(gè)方面對(duì)網(wǎng)頁(yè)做出評(píng)價(jià)，我們逐個(gè)來(lái)談。

漸進(jìn)式Web應(yīng)用(Progressive Web Apps)

頭一項(xiàng)標(biāo)準(zhǔn)『漸進(jìn)式Web應(yīng)用』，這個(gè)標(biāo)準(zhǔn)是Google自家發(fā)明的。其目的是為了讓網(wǎng)站能在網(wǎng)絡(luò)不暢通的情況下也能顯示基本內(nèi)容，或者上一次緩存的內(nèi)容，而不是給出一個(gè)難看的『網(wǎng)絡(luò)不通』的提示，并且能夠讓用戶像安裝普通應(yīng)用一樣直接把網(wǎng)頁(yè)安裝在手機(jī)上。PWA的終極理想是可以用網(wǎng)頁(yè)應(yīng)用來(lái)取代應(yīng)用，所以目前并不被Apple支持。Google官網(wǎng)給出了關(guān)于如何實(shí)現(xiàn)PWA的詳細(xì)指南，按照指南學(xué)習(xí)一步一步就可以構(gòu)建出你的第一個(gè)PWA網(wǎng)頁(yè)。建設(shè)完成后可以用Lighthouse來(lái)測(cè)試一下你的網(wǎng)頁(yè)到底有多符合PWA標(biāo)準(zhǔn)。

漸進(jìn)式Web應(yīng)用標(biāo)準(zhǔn)共有11項(xiàng)。

下面重點(diǎn)介紹一下為了使一個(gè)網(wǎng)頁(yè)能滿足基本的PWA要求所必須要完成的工作：

manifest.json

首先，你的網(wǎng)站必須要有一個(gè)manifest.json文件，這個(gè)文件里描述了最基本的一些信息。比如我的網(wǎng)站的manifest.json文件是這樣的：

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   "name": "日新亭", 
    3. 
  
  
  
  
  3.   "short_name": "日新亭", 
    4. 
  
  
  
  
  4.   "description": "茍日新，日日新，又日新", 
    5. 
  
  
  
  
  5.   "start_url": "/index.html", 
    6. 
  
  
  
  
  6.   "orientation": "any", 
    7. 
  
  
  
  
  7.   "icons": [{ 
    8. 
  
  
  
  
  8.     "src": "/assets/img/icons/android-chrome-512x512.png", 
    9. 
  
  
  
  
  9.     "sizes": "512x512", 
    10. 
  
  
  
  
  10.     "type": "image/png" 
    11. 
  
  
  
  
  11.   }, { 
    12. 
  
  
  
  
  12.     "src": "/assets/img/icons/android-chrome-192x192.png", 
    13. 
  
  
  
  
  13.     "sizes": "192x192", 
    14. 
  
  
  
  
  14.     "type": "image/png" 
    15. 
  
  
  
  
  15.   }], 
    16. 
  
  
  
  
  16.   "theme_color": "#000000", 
    17. 
  
  
  
  
  17.   "background_color": "#000000", 
    18. 
  
  
  
  
  18.   "display": "standalone" 
    19. 
  
  
  
  
  19. }  
    20.

關(guān)于favicon圖片尺寸的選擇

由于各種設(shè)備各種操作系統(tǒng)各種瀏覽器的差異，連一個(gè)最簡(jiǎn)單的favicon圖片的選擇都成了難題，每家廠商有描述各不相同，即使同一家廠商，也在各個(gè)不同的版本有不同的要求，比如Google Chrome在37版本以前要求196x196，37版本以后又要求192x192，而Apple官網(wǎng)又要求你提供至少4種尺寸：180x180, 167x167, 152x152, 120x120，Google TV要求96x96, 任務(wù)欄要求32x32，普通瀏覽器要求16x16，還不包括Windows桌面各種大中小型圖標(biāo)的要求。面對(duì)如此紛繁復(fù)雜的要求，到底應(yīng)該怎么辦呢?一種方法是找個(gè)工具網(wǎng)站幫你解決這個(gè)難題，我推薦的網(wǎng)站是這里，因?yàn)樽髡邔?duì)各種設(shè)備的favicon做過(guò)專門(mén)的研究;另一種做法是為簡(jiǎn)單起見(jiàn)，按我的模板來(lái)，只需要做6種圖標(biāo)就可覆蓋大部分設(shè)備，Apple只需要一種180x180，因?yàn)樾≡O(shè)備會(huì)自動(dòng)縮小，另外2種512x512和192x192是為Google準(zhǔn)備的，還有3種適應(yīng)普通瀏覽器。

制作好圖標(biāo)文件之后，在你的html頭部指定manifest.json文件的路徑，指定頁(yè)面的theme-color主題色，并且注意設(shè)定的主題顏色必須和頁(yè)面中的顏色相一致，然后指定圖標(biāo)：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.     
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.     
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.     
    12. 
  
  
  
  
  12.     
    13. 
  
  
  
  
  13.     
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.     
    16. 
  
  
  
  
  16.      
    17.

serviceworker.js

在你的主頁(yè)面當(dāng)中增加以下代碼用來(lái)判斷瀏覽器是否支持ServiceWorker，如果支持的話，加載ServiceWorker文件：

 
 
 
 
    
  
  
  
  
  1. if ('serviceWorker' in navigator) { 
    2. 
  
  
  
  
  2.    navigator.serviceWorker.register('/service-worker.js'); 
    3. 
  
  
  
  
  3.  };  
    4.

然后在根目錄下增加一個(gè)serviceworker.js的文件：

 
 
 
 
    
  
  
  
  
  1. var cacheName = 'fengerzh'; 
    2. 
  
  
  
  
  2. var filesToCache = [ 
    3. 
  
  
  
  
  3.   '/', 
    4. 
  
  
  
  
  4.   '/index.html', 
    5. 
  
  
  
  
  5.   '/assets/js/main.js', 
    6. 
  
  
  
  
  6.   '/assets/css/main.css', 
    7. 
  
  
  
  
  7.   '/assets/img/placeholder.png', 
    8. 
  
  
  
  
  8.   '/assets/img/icons/preloader.svg', 
    9. 
  
  
  
  
  9.   '/assets/img/icons/read.svg', 
    10. 
  
  
  
  
  10. ]; 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. self.addEventListener('install', function(e) { 
    13. 
  
  
  
  
  13.   e.waitUntil( 
    14. 
  
  
  
  
  14.     caches.open(cacheName).then(function(cache) { 
    15. 
  
  
  
  
  15.       return cache.addAll(filesToCache); 
    16. 
  
  
  
  
  16.     }) 
    17. 
  
  
  
  
  17.   ); 
    18. 
  
  
  
  
  18. }); 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. self.addEventListener('activate', function(e) { 
    21. 
  
  
  
  
  21.   e.waitUntil( 
    22. 
  
  
  
  
  22.     caches.keys().then(function(keyList) { 
    23. 
  
  
  
  
  23.       return Promise.all(keyList.map(function(key) { 
    24. 
  
  
  
  
  24.         if (key !== cacheName) { 
    25. 
  
  
  
  
  25.           return caches.delete(key); 
    26. 
  
  
  
  
  26.         } 
    27. 
  
  
  
  
  27.       })); 
    28. 
  
  
  
  
  28.     }) 
    29. 
  
  
  
  
  29.   ); 
    30. 
  
  
  
  
  30.   return self.clients.claim(); 
    31. 
  
  
  
  
  31. }); 
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33. self.addEventListener('fetch', function(e) { 
    34. 
  
  
  
  
  34.   e.respondWith( 
    35. 
  
  
  
  
  35.     caches.match(e.request).then(function(response) { 
    36. 
  
  
  
  
  36.       return response || fetch(e.request); 
    37. 
  
  
  
  
  37.     }) 
    38. 
  
  
  
  
  38.   ); 
    39. 
  
  
  
  
  39. });  
    40.

把指定的文件保存在緩存中，這樣下次如果網(wǎng)絡(luò)不通的話，瀏覽器會(huì)從緩存中取文件，而不會(huì)出現(xiàn)網(wǎng)絡(luò)不通的畫(huà)面。建好了ServiceWorker文件的頁(yè)面，會(huì)在Chrome工具欄里看到這樣的效果：

同時(shí)，完成了PWA效果的網(wǎng)站，可以讓用戶在手機(jī)中直接安裝，比如：

然后，就會(huì)在用戶的主屏幕上生成一個(gè)帶有你設(shè)定的圖標(biāo)的應(yīng)用： 

點(diǎn)擊圖標(biāo)打開(kāi)應(yīng)用，會(huì)來(lái)到一個(gè)沒(méi)有任何URL地址欄和工具欄的頁(yè)面，使用戶完全感覺(jué)不到是在瀏覽網(wǎng)頁(yè)：

 

性能(Performance)

Lighthouse對(duì)性能的要求基本和GTMetrix差不多，如果你能在GTMetrix獲得高分的話，通過(guò)Lighthouse的這一項(xiàng)測(cè)試應(yīng)該不難。唯一多要求的一項(xiàng)是所有圖片都要求是webp格式，但是Safari瀏覽器目前并不支持這種格式，所以如果你把網(wǎng)站上的所有jpg文件改成webp文件的話會(huì)導(dǎo)致你的網(wǎng)站里的圖片在iPhone上不能顯示。(我目前的網(wǎng)站全面采用了webp格式，不過(guò)會(huì)在不久的將來(lái)全面切換回jpg，主要原因是iPhone目前還不兼容。)

性能標(biāo)準(zhǔn)共有10項(xiàng)。

可用性(Accessibility)

可用性標(biāo)準(zhǔn)主要是指在制作網(wǎng)頁(yè)時(shí)必須考慮殘疾人的需求。

可用性標(biāo)準(zhǔn)共有8項(xiàng)。

Elements Use Attributes Correctly

這一項(xiàng)標(biāo)準(zhǔn)的要求之一是：所有圖片必須有alt屬性，這樣如果圖片不能顯示時(shí)，也能出現(xiàn)合適的文字。當(dāng)然還有很多其它要求，你可以根據(jù)Lighthouse給出的建議逐項(xiàng)調(diào)整。

Elements Describe Contents Well

這一項(xiàng)標(biāo)準(zhǔn)的要求之一是：所有input輸入框必須有l(wèi)abel或者aria-label。如下面這樣：

 
 
 
 
    
  
  
  
  
  1.  
    2.

Color Contrast Is Satisfactory

這一項(xiàng)標(biāo)準(zhǔn)的要求是所有字體的前景色和背景色的對(duì)比度需要足夠強(qiáng)，以便于視力不好的人士能夠分辨頁(yè)面上的字跡。如果你不知道某兩種顏色的對(duì)比度是否足夠，可以用這個(gè)網(wǎng)頁(yè)檢測(cè)，綠色的Pass表示合格。

有時(shí)候這一標(biāo)準(zhǔn)會(huì)有誤判，為了能讓它通過(guò)，你可能需要設(shè)置額外的background-color屬性，例如(stylus)：

 
 
 
 
    
  
  
  
  
  1. p 
    2. 
  
  
  
  
  2.             margin 0 0 rem(30px) 
    3. 
  
  
  
  
  3.             background-color #141414 
    4. 
  
  
  
  
  4.             color darken(lightGray, 20%) 
    5. 
  
  
  
  
  5.             font-size rem(17px) 
    6. 
  
  
  
  
  6.             line-height rem(26px)  
    7.

最佳實(shí)踐(Best Practice)

最佳實(shí)踐標(biāo)準(zhǔn)是指一個(gè)理想網(wǎng)站所應(yīng)該達(dá)到的最高標(biāo)準(zhǔn)。包括：避免使用Application Cache，避免使用WebSQL，使用Http 2.0，使用https，避免使用document.write，避免使用console.log等等。這些標(biāo)準(zhǔn)看上去很瑣碎，但是每一項(xiàng)標(biāo)準(zhǔn)的提出都有其合理性，應(yīng)當(dāng)竭盡全力遵守。

最佳實(shí)踐標(biāo)準(zhǔn)共有15項(xiàng)。

使用http 2.0

關(guān)于如何開(kāi)通http 2.0，可以參考我之前寫(xiě)過(guò)的一篇文章《免費(fèi)給你的網(wǎng)站加上藍(lán)色小閃電》。

成果

如果你完成了以上的所有優(yōu)化步驟，相信你的網(wǎng)站應(yīng)該可以得到一個(gè)比較高的評(píng)分了?，F(xiàn)在我們隨便找個(gè)網(wǎng)站評(píng)測(cè)一下看看吧，別人家的網(wǎng)站效果大抵都是這樣的：

而我們的網(wǎng)站，經(jīng)過(guò)調(diào)校之后的效果是這樣的：

是不是很有成就感呢?

以上所有代碼，供大家學(xué)習(xí)參考，不吝嗇的請(qǐng)大家給個(gè)星星吧! 


網(wǎng)頁(yè)名稱：如何打造一個(gè)全滿分網(wǎng)站?
網(wǎng)頁(yè)路徑：http://www.5511xx.com/article/cogoppi.html