網站優化篇

網站優化篇

 

最近公司要大力推廣官方網站，但是發現不論是PC網站還是手機網站的打開響應速度都比較卡頓，而每個人都知道官方網站，一般是企業對外用戶打造品牌，進行宣傳的第一道門，如果用戶訪問網站時遇到了卡頓，很多用戶會選擇拒絕入門，這是個大問題，所以就這個問題，我做了相關的調研和實踐，已達到我們這期的要求效果。那麼接下來就介紹下，優化網站的步驟及方法，供有需要的人蔘考。

 

l  前端工作

l  後端工作

 

一、前端工作

首先，需要前端開發工程師優先過濾掉網站首頁中不再使用的js/css文件。原因很明顯，只要多一個js/css文件的加載，都會與服務端進行交互，造成一定的量的資源響應速度影響，所以該部分建議優先在首頁進行（因爲首頁是用戶進入門戶網站的第一站）。

 

其次，壓縮優化網站中的css、js及圖片是必要的。一般情況下，大圖文件可以通過貴司的UI設計師進行裁剪壓縮（一般指體量較大的圖片），而一些相對小的圖片可以實用壓縮工具壓縮。另外，像css及js文件的壓縮是常見的，一般推薦使用一些網站靜態資源優化工具操作，比如：gulp、webpack及類似工具。

 

最後，將樣式css文件的加載放在頁面上面，腳本js文件的加載放在頁面的下面。原因就是頁面的加載一般是從上往下進行加載解析，優先加載css文件，就可以優先顯示頁面渲染；後加載腳本js文件，就是在頁面樣式基本正常時，再解析渲染js文件，一定程度做到不卡頓現象。

 

 

二、後端工作

在這裏，後端所做的處理也十分重要，因爲後端主要從兩方面對前端請求過來的靜態資源進行緩存壓縮，另一方面則是處理如何減少前端與後端的交互次數，大家都知道頻繁的與後端服務器交互，就會開啓過多的IO操作，會給服務器造成壓力，從而引起服務端響應變慢的問題，所以下面分別從這兩方面介紹（Web服務器推薦Nginx）。

 

1、緩存壓縮靜態資源

這裏我以Nginx服務器爲例，來演示如何緩存和壓縮網站請求的靜態資源，具體步驟如下：

 

A、緩存處理

location ~.*\.(png|gif|jpg|jpeg|ico|css|js)$ {

    root /project/www.xxx.com/;

    expires 24h;

}

 

PS：配置文件爲nginx.conf，放在的位置爲server{…}區間。

 

B、壓縮處理

gzip on;

gzip_min_length 1k;

gzip_buffers 4 16k;

gzip_comp_level 2;

gzip_types text/plainapplication/x-javascript text/css application/xml text/javascriptapplication/x-httpd-php image/jpeg image/gif image/png;

gzip_vary off;

gzip_disable "MSIE[1-6]\.";

 

PS：具體Nginx的gzip內容這裏不做介紹，請讀者自行查閱資源，基本上上面配置爲常規配置，配置文件爲nginx.conf，放在的位置爲http{…}區間，server{…}之外。

 

2、減少靜態資源請求

減少前端頁面靜態資源對服務端的請求次數，我這裏選用或推薦的是阿里開源的mod_concat項目，它能夠支持前端頁面將多個js或多個css或兩者的結合放在一個<script />或<link />中，統一一次與服務器交互並渲染它們。那麼，接下來我介紹下如何讓Nginx支持mod_concat項目，並討論下Nginx新舊版本中對mod_concat的特殊處理，具體如下實現：

 

A、mod_concat的下載

$cd  /usr       /local/nginxmodules

$wget  https://github.com/alibaba/nginx-http-concat/archive/master.zip-O nginx-http-concat-master.zip

$unzip  nginx-http-concat-master.zip

 

B、Nginx新舊版本處理

在較新的Nginx版本，如：我使用的nginx-1.8.1，默認支持的協議是application/javascript，而阿里的mod_concat默認支持的是application/x-javascript，所以我們需要修改下mod_concat，保持兩者的協議相同，否則會包400 Bad Request錯誤，如下：

$cd  /usr/local/nginxmodules/nginx-http-concat-master

$vim  ngx_http_concat_module.c

 

C、如何支持mod_concat

這裏要使Nginx支持mod_concat，那麼就需要爲Nginx添加mod_concat模塊，並需要配置編譯即可，具體如下：

$cd  /opt/nginx-1.8.1

$nginx  -V

如上圖，我已經添加過了，所以配置參數列表中就會支持mod_concat。而正常我們應該將nginx  -V顯示的已有參數配置複製，並在下面中直接粘貼重新編譯（make），如下：

$./configure  --prefix=/usr/local/nginx --with-http_stub_status_module--add-module=/usr/local/nginxmodules/nginx-http-concat-master

$make

 

編譯完成之後，在nginx的根據路徑的objs中會生成新的二進制執行文件nginx，我們需要將其替換掉原來舊的nginx，重新啓動即可，當然，在複製替換前必須將正在運行的nginx先停掉再行復制，如下：

$cd  /opt/nginx-1.8.1/src

$nginx  -s reload

$cp  ./nginx /usr/local/nginx/sbin/

$nginx

 

D、如何配置Nginx

我們以前端的靜態資源（css/js/png…），存放地址爲statics，那麼配置情況如下：

location /statics/ {

           root /project/www.xxx.com/;

           concat on;

           concat_max_files 20;

        }

 

PS：

Concat  on   // 開啓concat服務

Concat_max_files   // 支持前端拼接文件最大個數

 

 

E、如何驗證是否啓用

首先，前端頁面代碼對js和css的拼接形式如下：

JS部分：

<script src="/statics/??jquery-3.1.1/jquery-3.1.1.min.js,vue/vue.js,site/lang-zh.js,site/lang-en.js,js/jquery.cookie.js,swiper/js/swiper.min.js,site/common.js,site/component.js,site/zh-en.js?v=123"></script>

 

CSS部分：

<link href="/statics/??bootstrap/css/bootstrap.min.css,swiper/css/swiper.min.css,css/main.min.css?v=321"rel="stylesheet">

 

正如上面所示，分別將js和css的拼接分開，好處就是更加清晰拼接的結構，並且便於後續的維護操作。當然，也可以將js和css的拼接混合起來，實現形式與單個拼接相同，這裏不再贅述。

另外，細心的讀者會發現上面拼接的最後有?v=123形式的內容，該內容爲避免頁面瀏覽器緩存而加的版本號，一般加與不加沒太大區別，如果是頻繁修改的話，建議加這個版本號區分。

 

其次，讓我們來看看這種拼接是否起作用，我們可以打開瀏覽器控制檯查看，如下：

 

 

如上圖，原多個css/js的請求，現在只需要一次請求即可，這在高併發環境下，可以大大緩解前端多發訪問，給服務器所帶來的壓力問題，所以也是很多大型網站的做法，比如：京東。