整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、gzip壓縮技術(shù)
gzip（GNU-ZIP）是一種壓縮技術(shù)，經(jīng)過gzip壓縮后，頁面大小可以變?yōu)樵瓉淼?0%甚至更少，這樣用戶訪問的時候速度會快得多。gzip網(wǎng)頁壓縮的實(shí)現(xiàn)需要瀏覽器和服務(wù)器的支持。
gzip壓縮的過程：
首先在服務(wù)器端壓縮，然后傳到瀏覽器端后解壓，當(dāng)瀏覽器支持gzip解壓時，會在請求消息頭中包含Accept-Encoding：gzip，這樣Nginx就會向?yàn)g覽器發(fā)送經(jīng)過gzip后的內(nèi)容，同時在響應(yīng)消息頭中加入Content-Encoding：gzip，這是gzip后的內(nèi)容，告知瀏覽器要先解壓才能解析輸出。
2、網(wǎng)頁壓縮傳輸配置
Nginx服務(wù)器為網(wǎng)頁壓縮專門提供了gzip模塊，并且模塊中的相關(guān)指令均可以設(shè)置在http，server，location塊中，實(shí)現(xiàn)服務(wù)器端按照指定的設(shè)置進(jìn)行壓縮，具體指令如下：
gzip：用于開啟或關(guān)閉gzip模塊；
gzip_buffers：設(shè)置系統(tǒng)獲取幾個單位的緩存用于存儲gzip的壓縮結(jié)果數(shù)據(jù)流；
gzip_comp_level：gzip壓縮比，壓縮級別是1~9，1的壓縮級別最低，9的壓縮級別最高，壓縮級別越高壓縮率越大，壓縮時間越長；
gzip_disable：對一些特定的User-Agent不使用壓縮功能；
gzip_min_length：設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從響應(yīng)消息頭的Content-Length中進(jìn)行獲取；
gzip_http_version：識別HTTP協(xié)議版本，其值可以是1.1（默認(rèn)值）或1.0；
gzip_proxied：用戶設(shè)置啟用或禁用從代理服務(wù)器上收到響應(yīng)內(nèi)容的gzip壓縮功能；
gzip_types：匹配MIME類型進(jìn)行壓縮，且無論是否指定，text/html類型總是會被壓縮的；
gzip_vary：用于在響應(yīng)消息頭中添加Vary，Accept-Encoding，使代理服務(wù)器根據(jù)請求頭中的Accept-Encoding識別是否啟用gzip壓縮；
1、修改配置文件
2、訪問測試
Content-Encoding為gzip類型，Content-Type為html，Transfer-Encoding為chunked表示內(nèi)容長度不確定；
除了上述配置外，在實(shí)際開發(fā) 中還可以具體配置壓縮比，緩存大小，對于代理是否采用壓縮等詳細(xì)的設(shè)置：
gzip_buffers 4 16k； //按照原始數(shù)據(jù)大小以16KB為單位的4倍申請內(nèi)存；
gzip_comp_level 4； //壓縮等級；
gzip_disable "MSIE [1-6]."； //IE6時，不進(jìn)行壓縮，防止出現(xiàn)頁面假死現(xiàn)象；
gzip_min_length 5k； //當(dāng)響應(yīng)內(nèi)容大于5kb時進(jìn)行壓縮輸出，且一般建議最小值設(shè)置為1kb，當(dāng)小于1kb時，可能會出現(xiàn)越壓越大的問題；
gzip_http_version 1.0；
gzip_proxied any；
gzip_vary on；
gzip_proxied常用參數(shù)：
any：無條件壓縮所有響應(yīng)數(shù)據(jù)；
off：關(guān)閉反向代理的壓縮；
expired：如果響應(yīng)消息頭包含Expires，啟用壓縮；
no-cache：如果響應(yīng)消息頭包含Cache-Control：no-cache，啟用壓縮；
no-store：如果響應(yīng)消息頭包含Cache-Control：no-store，啟用壓縮；
private：如果響應(yīng)消息頭包含Cache-Control：private，啟用壓縮；
no_last_modified：如果響應(yīng)消息頭中不包含Last-Modified，啟用壓縮；
no_etag：如果響應(yīng)消息頭中不包含ETag，啟用壓縮；
auth：如果響應(yīng)消息頭中包含Authorization頭信息，啟用壓縮；
實(shí)現(xiàn) HTML 壓縮，可以使用 JavaScript 中的正則表達(dá)式來去除 HTML 中的空格和注釋。以下是一個簡單的 HTML 壓縮函數(shù)：
function compressHTML(html) {
// 去除注釋
html = html.replace(/<!--[\s\S]*?-->/g, "");
// 去除多余空白
html = html.replace(/\s+/g, " ");
// 去除標(biāo)簽之間空格
html = html.replace(/>\s+</g, "><");
return html.trim();
}該函數(shù)首先使用正則表達(dá)式去除 HTML 中的注釋。然后，它使用另一個正則表達(dá)式去除 HTML 中的多余空格。最后，它使用另一個正則表達(dá)式去除標(biāo)簽之間的空格。
為了測試該函數(shù)，您可以創(chuàng)建一個 HTML 文件，并在其中添加一些冗余的空格和注釋。例如：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- This is a comment -->
<h1> Welcome to my website! </h1>
<p> This is some text. </p>
</body>
</html>然后，您可以在Node.JS中使用以下代碼將 HTML 文件加載為字符串并壓縮它：
// 加載 HTML 文件
const fs = require("fs");
const html = fs.readFileSync("index.html", "utf8");
// 壓縮 HTML
const compressedHtml = compressHTML(html);
console.log(compressedHtml);輸出是一個壓縮后的 HTML 字符串，其中不包含注釋或冗余空格。
或者直接在IE中測試，代碼如下：
function compressHTML(html) {
// 去除注釋
html = html.replace(/<!--[\s\S]*?-->/g, "");
// 去除多余空白
html = html.replace(/\s+/g, " ");
// 去除標(biāo)簽之間空格
html = html.replace(/>\s+</g, "><");
return html.trim();
}
var html =`
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- This is a comment -->
<h1> Welcome to my website! </h1>
<p> This is some text. </p>
</body>
</html>
`;
console.log(compressHTML(html));運(yùn)行效果：
TML+JQUERY超大視頻上傳解決方案
最近項(xiàng)目有個需求，需要在網(wǎng)頁前端實(shí)現(xiàn)大文件，文件夾的上傳和下載，需要支持?jǐn)帱c(diǎn)續(xù)傳，MD5校驗(yàn)，文件秒傳，加密傳輸(國密SM4)，加密存儲，壓縮傳輸(zip,gzip)功能，前端框架使用VUE，后端用的是JAVA SpringBoot
?
這個是央企項(xiàng)目，因?yàn)閲倚畔踩囊蛩兀姓?xiàng)目都必須支持信創(chuàng)國產(chǎn)化環(huán)境：國產(chǎn)操作系統(tǒng)，國產(chǎn)數(shù)據(jù)庫，國產(chǎn)瀏覽器，客戶那邊有些系統(tǒng)用的是Windows7 + IE8，也要求兼容。
?
網(wǎng)上搜了很多文章，基本上的方案都是vue+html5，或百度webuploader，我們之前也是采用的這個方案，穩(wěn)定性比較差，傳上去的文件數(shù)據(jù)容易出錯，然后斷點(diǎn)續(xù)傳功能不夠完善，用戶傳大文件的時候?yàn)g覽器響應(yīng)卡頓容易崩潰，用戶傳文件的時候不能刷新頁面，也不能關(guān)閉頁面，否則文件進(jìn)度將會丟失。這個對于現(xiàn)在的客戶來說有點(diǎn)難以接受，因?yàn)橛脩魝鞯奈募容^大，1G到10G都有，可能一次傳不完，傳一半，第二天再傳。
?
找了幾個月，只發(fā)現(xiàn)一個產(chǎn)品比較不錯：澤優(yōu)大文件上傳控件（up6），不僅提供了產(chǎn)品源碼，視頻教程，開發(fā)部這邊集成很快，基本上沒花什么時間，直接把他的代碼復(fù)制到項(xiàng)目中就完事了。
?
我們的需求實(shí)際上很簡單，第一就是希望使用簡單，不管是對開發(fā)人員，還是對普通用戶都要使用簡單。對開發(fā)人員來說要集成和整合簡單，能夠提供前端和后端 API，前端API使用和調(diào)用要方便。對于普通用戶，要使用簡單學(xué)習(xí)成本低。不需要進(jìn)行使用培訓(xùn)。
?
第二點(diǎn)就是穩(wěn)定可靠，用戶是政府單位的，對穩(wěn)定性要求比較高。用戶每天上傳和下載的文件都比較多，大的有10GB左右，小的有幾百KB。
?
第三點(diǎn)就是能夠提供技術(shù)支持，因?yàn)槭钦蛻簦仨氁屑夹g(shù)支持，這個是硬指標(biāo)，因?yàn)轫?xiàng)目周期也比較長，中途可能會變更需求或者定制開發(fā)，所以廠商必須提供技術(shù)服務(wù)。
?
除了這些還有一點(diǎn)就是下載功能需要也支持?jǐn)帱c(diǎn)續(xù)傳。用戶平時會從系統(tǒng)中下載很多文件，文件有大有小，大的1G，小的幾KB，但是用戶是批量下載，不是打包成ZIP下載。
?
上面的幾點(diǎn)能夠滿足的話基本上就沒有什么問題，領(lǐng)導(dǎo)這邊希望提供OEM買斷或控件源代碼的采購方式，我們是軟件公司，專門做政府和央企項(xiàng)目，客戶項(xiàng)目比較多，有些政府大客戶要求源代碼審查，領(lǐng)導(dǎo)希望集成到我們自己的產(chǎn)品中去賣，這樣就能夠?yàn)樗杏脩籼峁┻@個功能，用戶體驗(yàn)也能夠統(tǒng)一。后面維護(hù)起來也方便。主要是領(lǐng)導(dǎo)不想每次都要單獨(dú)采購，太麻煩了。
?
示例下載：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
