什麼是盜鏈?javascript
盜鏈一般是一些名小網站來盜取一些有實力的大網站的地址(好比一些音樂、圖片、軟件的下載地址)而後放置在本身的網站中,經過這種方法盜取大網站的空間和流量,若是本身的網站被他人盜鏈,不只本身的網站知名度和訪問量得不到提高,還會下降本身服務器的運行速度。css
如何防止他人盜鏈?html
防盜鏈的工做原理是網站能夠檢測目標網頁訪問的來源網頁,若是是資源文件,則能夠跟蹤到顯示他的網頁地址,一旦檢測到來源不是本站即進行阻止或者返回指定頁面
那麼如何進行檢測呢?
前端
1.經過http協議中的表頭字段refererjava
referer可以表示從哪兒連接到當前的網頁或文件,經過referer,網站能夠檢測目標網頁訪問的來源網頁,若是是資源文件,則能夠跟蹤到顯示它的網頁地址。以Ngnix服務器爲例,利用Nginx 模塊 ngx_http_referer_module 用於阻擋來源非法的域名請求nginx
如下是經過配置nginx 來阻止除ygt.com對服務器資源的訪問並返回403web
配置代碼:數據庫
valid_referers none|blocked|server_names|string...;
none: "referer" 來源頭部爲空的狀況
blocked: "referer" 來源頭部不爲空,可是裏面的值被代理或者防火牆刪除了,這些值都不以http://或者https://開頭
location ~ .*\.(gif|jpg|png|flv|swf|rar|zip)$ { valid_referers none blocked ygt.com; if($invalid_referer) { #return 403; rewrite ^/http://www.ygt.com/403.jpg } }
2.加密簽名api
針對檢查refer的方式,能夠在頁面中間件裏面先進入目的地址的另一個頁面再轉到目的頁面便可,這樣頁面的refer就是目的站點本身的。因此還能夠經過另外一種方法:加密簽名瀏覽器
對文件請求連接的後面加上指定簽名參數,而後在服務器中進行驗證:
$sign = md5('jiami'. $_SERVER['REMOTE_ADDR']); //指定加密參數 jiami + ip地址組成加密參數 echo '<img src = "./xxx.png?sign = '.$sign. '">';
根據服務器所寫代碼 在nignx 中使用第三方模塊HttpAccessKeyModule實現防盜鏈
accesseky on|off 模塊開關 accesseky_hashmethod md5|sha-1 簽名加密方式 accesskey_arg GET參數名稱 acceskey_signature 加密規則
location ~ .*\.(gif|jpg|png|flv|swf|rar|zip)$
{
accesseky on;
accesseky_hashmethod md5; accesskey_arg sign; acceskey_signature "jiami$remote_addr";
expires 30d;//過時時間
}
在web頁面渲染過程當中,服務器鏈接數據庫並計算返回數據 , http請求以及數據(文件)通過網絡傳輸 , 文件在瀏覽器中計算渲染呈選; 其中大約80%的時間都耗在了http請求上,過多的http請求會影響頁面的呈現速度
如何減小http請求?
1.製做圖片地圖:容許一個圖片關聯多個url,即將多個圖片合併爲一個圖片,如如下例子
2.css sprites
經過css中的background-position來定位圖片中的某一具體部分,它比圖片地圖更靈活
3.合併腳本和樣式文件(js css)
javascript和css能夠嵌入html文檔中內聯 ,還能夠放入外部腳步樣式表中,前者會增長文檔大小,而且不符合低耦合的開發思路,使得代碼較難維護,但後者增長了http請求數,對於時間上來講會比較耗時,因此要根據實際狀況來決定如何倆配合使用比較好
4.圖片使用Base64編碼減小頁面請求數
採用base64編碼方式將圖片直接嵌入到網頁中,而不是從外部載入,經過使用data:URL數據形式能夠替代http請求,甚至能夠用於script和a標籤中,其缺陷是Base64編碼會增長圖片的大小,而且嵌在網頁中,會加大網頁的數據量,
瀏覽器緩存可以提升響應速度,在http緩存模型中,若是成功會有三種狀況
① 200 from cache: 直接從本地緩存中獲取響應 (最快速,最省流量,由於根本沒有向服務器發送請求)
② 304 Not Modified: 協商緩存,瀏覽器在本地沒有命中的狀況下,請求頭中發送必定的校驗數據到服務端,若是服務端數據沒有改變,則瀏覽器從本地緩存響應,返回304 (快速,發送的數據不多,只返回一些基本的響應頭信息,數據量很小,不發送實際響應體)
③ 200 OK :以上兩種緩存所有失敗,服務器返回完整響應,沒有用到緩存,相對最慢
那麼咱們如何配置緩存比較好呢?
首先要了解與緩存相關的幾個http頭部:
pragma: HTTP1.0時代的遺留產物,該字段被設置爲no-cache時,會告知瀏覽器禁用本地緩存,即每次都向服務器發送請求
Expires: HTTP1.0時代用來啓用本地緩存的字段,expires值對應一個形如Thu, 31 Dec 2037 23:59:59 GMT的格林威治時間,告訴瀏覽器緩存實現的時刻,若是還沒到該時刻,代表緩存有效,無需發送請求 (缺陷:瀏覽器與服務器時間沒法保持一致,若是時間差距大,就會影響緩存結果)
Cache-Control : HTTP1.1針對Expires時間不一致的解決方案,運用Cache-Control告知瀏覽器緩存過時的時間間隔而不是時刻,即時具體時間不一致,也不影響緩存的管理
Cache-Control 參數:
no-store: 禁止瀏覽器緩存響應
no-cache:不容許直接使用本地緩存,先發起請求和服務器協商
max-age = dalta-seconds : 告知瀏覽器該響應本地緩存有效的最長期限,以秒爲單位
優先級 Pragma > Cache-Control > Expires
什麼是協商緩存?
當瀏覽器沒有命中本地緩存,如本地緩存過時或者響應中聲明不容許直接使用本地緩存,那麼瀏覽器確定會發起服務端請求,服務端會驗證數據是否修改,若是沒有修改,通知瀏覽器使用本地緩存
相關頭部:
Last-Modified:通知瀏覽器資源的最後修改時間
If-Modified-Since :瀏覽器獲得服務器返回的資源的最後修改時間後,會將這個信息經過If-Modified-Since 提交到服務器作檢查,若是沒有修改,返回304 狀態碼
ETag : HTTP1.1推出,文件的指紋標識符,若是文件內容修改,指紋會改變
If-None-Match: 本地緩存失效,會攜帶此值去請求服務端,服務端判斷該資源是否改變,若是沒有改變,直接使用本地緩存,返回304
瞭解了相關http頭部信息後,接下來了解緩存策略的選擇:
適合緩存的內容有:
不變的圖像,如logo,圖標等,js/css靜態文件 ,可下載的內容,媒體文件
適合使用協商緩存的有
html文件,常常替換的圖片,常常修改的js,css文件(js.css文件的加載能夠加入文件的前面來拒絕緩存 index.css?簽名 index.簽名.js)
不建議緩存的內容有
用戶隱私等敏感數據,常常改變的api數據接口
例子:
利用Nginx配置緩存策略:
相關指令:
add_header 指令:添加狀態碼爲2xx和3xx的響應頭信息
add_header name value [always]; 能夠設置Paragma expires cache-control
expires time 通知瀏覽器過時時長 爲負值表示Cache-Control: no-cache;當爲正或0時,就表示Cache-Contorl: max-age= 指定的時間
當爲max時,會把expires設置爲「Thu,31 Dec 2037 23:55:55」 GMT,cache-control 設置到10年
Etag指令 :指定簽名
etag on|off 默認是on
前端代碼和資源的壓縮
經過壓縮前端代碼和資源,可讓資源文件更小,加快文件在網絡中的傳輸速度,讓網頁更快的展示,下降帶寬和流量開銷
壓縮方式:
1.JS代碼壓縮 js壓縮的原理通常是去掉多餘的空格和回車、替換長變量名、簡化一些代碼的寫法等。利用js代碼壓縮工具如:UgligyJS、YUICompressor、Closure Compiler
2.CSS代碼壓縮 原理跟JS壓縮原理相似,去除空白符,註釋並優化一些css語義規則等 工具:CSS Compressor
3.HTML代碼壓縮 不建議使用代碼壓縮,有時會破壞代碼結構,可使用Gzip壓縮,轉換後要檢查代碼結構
4.圖片壓縮 工具:tinypng 、JpegMini 、ImageOptim
5.其餘自動化構建工具Grunt
CDN的全稱是Content Delivery Network,即內容分發網絡 儘量避開互聯網上有可能影響數據傳輸雙速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層虛擬網絡
CDN系統可以實時地根據網絡流量和各節點的連接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上
傳統web訪問:
用戶在瀏覽器輸入域名發起請求--->解析域名獲取服務器IP地址--->根據IP地址找到對應的服務器--->服務器響應並返回數據
CDN訪問:
用戶發起請求--->智能DND的解析(根據IP判斷地理位置、接入網類型、選擇路由最短和負載最輕的服務器)--->取得緩存服務器IP--->把內容返回給用戶(若是緩存中有)--->向源站發起請求--->將結果返回給用戶--->將結果存入緩存服務器
場景:
站點或者應用中大量靜態資源的加速分發,列如css,js,圖片和HTML 大文件下載,直播
實現:
cdn加速服務、lvs負載均衡、Nginx反向代理