用 // 代替 http:// 有什么好處(自適應(yīng)https)
隨著國內(nèi)運營商等的大肆劫持導致大家在訪問網(wǎng)站的時候插入大量的低俗廣告,降低用戶體驗,所以各大搜索引擎都希望大家盡量將站點轉(zhuǎn)換為https方式...
//缺省協(xié)議
/缺省協(xié)議的使用,代表資源訪問的協(xié)議和當前頁面保持一致,如果當前頁面是http ,采用http協(xié)議訪問,如果是https,則使用 https 協(xié)議訪問。這樣用就不管是http還是升級到https都不用改動代碼,現(xiàn)在很多CDN資源都是這樣引用。一般使用在內(nèi)鏈中,外鏈的協(xié)議頭具有不確定性的原因。
//的含義?
//是缺省協(xié)議的寫法,例如
//baiid.net/css/
缺省協(xié)議默認使用當前協(xié)議
當前頁面為HTTP時,等效
http://baiid.net/css/
當前頁面為HTTPS時,等效
https://baiid.net/css/
使用 // 代替 http:// 的條件和好處?
當前頁面和目標資源同時支持HTTP和HTTPS正在從http升級到https
這樣的好處就是能根據(jù)用戶打開頁面的方式自適應(yīng)的選擇資源的請求協(xié)議,
對于https頁面的內(nèi)容,瀏覽器默認會組織非https內(nèi)容,可以避免這種情況
// 缺點
直接打開本地文件調(diào)試時,使用的協(xié)議是文件協(xié)議(file://)
這個時候這個協(xié)議會變成 file://baiid.net/css/顯然是不存在的
與當前網(wǎng)站的協(xié)議保持一致,快速發(fā)布與你當前協(xié)議相匹配的版本,同時減少SSL或其它協(xié)議版本的部署成本。開發(fā)者不需要管服務(wù)器云端提供什么協(xié)議,只要用//符號來代表一切最適應(yīng)的匹配,這和nodeJS的思維是一脈相承的。
優(yōu)點如下:
因為很多網(wǎng)站都將http升級為https,這樣就可以防止我們的網(wǎng)址被劫持,前期為了在轉(zhuǎn)換過程中我出差錯我們沒有強制跳轉(zhuǎn),就是當用戶訪問http或https都可以正常訪問,那么里面的js,圖片,鏈接等都不能用https或http,那么有什么解決方法呢,那么解決方法來了就是用//,不要帶http:與https這樣就可以了。
//這種寫法是根據(jù)你請求的協(xié)議自動添加協(xié)議的。舉個栗子:你的網(wǎng)站是http協(xié)議,那么其實你訪問的就是http://xxxx 如果你的網(wǎng)站是https協(xié)議的,那么請求的地址會變成https://xxxx 要知道,如果你寫成了http://xxx. 那么如果你們的網(wǎng)站線上是https,那么可能會報安全警告,有的瀏覽器甚至沒法正常加載頁面。如果你直接寫成https,要知道,本地開發(fā)可是http啊...
下面的內(nèi)容是來自知乎的一些經(jīng)典回復
好處很多人都答過了。升級 https 當然最能感受到這種好處。我只是補充一個為什么前人不這么寫的理由。當然,確實有很多前端并不知道這種寫法。不過,就算知道也很可能無法這么寫。因為 UC 瀏覽器的許多較早版本不支持這種寫法,會把 //a.b/ 直接理解為 /a.b/,也就是說,如果你在 http://example.com 的頁面里寫了 //example-cdn.net/static-file 的地址,UC 實際訪問的是 http://example.com/example-cdn.net/static-file 。UC 過去的市占率大家是知道的。所以……
一看你就沒做過「全站 HTTPS 升級改造」。我給全站做 HTTPS 升級的時候,真的想把寫 http:// 的人砍死。尤其是數(shù)據(jù)庫里的鏈接和 JS 里拼接出來的 url。期間用了各種正則,還要人工核查。奈何寫 http:// 的程序員太多,只能作罷。有人還在評論里問原因,原因就是如果你全寫 //,我就不用改造數(shù)據(jù)庫里的數(shù)據(jù)和源碼了,直接升級 https 就行了。你可能會說 https 改造這種事情很少發(fā)生吧,巧了,我在騰訊和阿里都遇到了 https 改造 ?_? 而且在阿里的時候我要負責 1688 整站(個別部門自行改造)的前端代碼改造(不只是 HTML,還有 CSS 、JS、Velocity 模板等!簡直就是臟活累活,我 TM 為什么要接這個活兒),你猜我罵寫 http:// 的人罵了多少次?有的前端還直接在 JS 里寫 http,沿用一下當前頁面的協(xié)議你會死啊?
還有的前端用正則判斷 url 時居然只接受 http:// 和 https:// 不接受 //,真的是沒常識。太多程序員,太智障了。也有可能是因為他們沒聽說過 HTTPS 而已。如果你還不懂,我就問你幾個問題:如果你用 http:// ,那你就是默認當前頁面是 http 協(xié)議了,你一個前端憑什么決定當前頁面的協(xié)議?難道你不知道 http 鏈接在 https 頁面里會報錯啊?你應(yīng)該沿用當前頁面的協(xié)議,所以你要寫 //如果你用 https://,也是一樣的問題,你怎么知道三年后會不會出現(xiàn)一個 httpshe://,難道到時候你再全部改成 httpshe:// ?不要做任何明顯是錯誤的假設(shè)!你根本就不知道當前頁面會用什么協(xié)議打開!所以你要用 // 啊!類似的錯誤假設(shè)還有很多,比如很多中國程序員都以為電話號碼只含數(shù)字和括號,不含字母。真的是這樣嗎?
有人說全局替換不就完了嗎?舉例說明吧,假設(shè)淘寶要升級 https于是你將 http:// 全部替換成 //
第一個 bug:
你把 替換成了 ,然而當時 http://tmail.com 還不支持 https于是你將一定范圍內(nèi)的域名替換,http://(taobao|taobao2|taobao3).com 替換成 //$1.com
第二個 bug:
有些 JS 是這樣寫的 url = "http://" + location.hostname + '/' + path,還有寫 JS 是這樣寫的 /^http://///.test(input)。你說這個就沒法用正則了,在所有 JS 里全局搜索 http 然后人工審查吧。你知道淘寶有多少 JS 文件嗎…… 而且這些文件是緩存十年的……就算你改了,也不一定能更新。而且一旦你改錯了,影響用戶下單,馬云損失一個億你賠得起嗎?
第三個 bug:
有些數(shù)據(jù)根本就不在代碼里,在數(shù)據(jù)庫里,比如 user.image 的值是 http 開頭的。于是你將 user.image 寫成 user.image.replace('http://', '//') 或者你直接改數(shù)據(jù)庫里的數(shù)據(jù)(當數(shù)據(jù)量很大的時候,這基本是不可能的)
第四個 bug:你忘了改 nginx、crossdomain 里面的域名第五個 bug:你忘了改配置系統(tǒng)里面的 base_url第六個 bug:你的 https 頁面嵌入了一個外部的 http iframe……你就哭吧,這很難解決,運氣好直接改成 // (外部支持 https 即可),運氣不好就要改頁面邏輯了。
第 N 個 bug……
HTTPS 升級就是臟活累活,你說簡單你來做,你開始做就知道牽連的地方有多少了。最好的方案還是把協(xié)議做成很容易變更的方式,比如遵循當前頁面,或者用變量,反正寫死 http:// 肯定不好。有些程序員寫代碼的時候,明明知道有 HTTPS 卻不去兼容,心理想著「反正我在這個公司呆兩年就走了,HTTPS 至少還有三年呢」然后就寫出了垃圾代碼。
越來越多的開發(fā)者,在鏈接文件時,采用//來代替http://,即如< a href="http://baiid.net……一般寫為 < a href = " //http://baiid.net……,這與傳統(tǒng)帶http有什么區(qū)別?
原本你的網(wǎng)站是http的,所有的src都是 http開頭,以為遭到狗屎運營商大量劫持,在你的頁面塞了一大堆少兒不宜/和單純廣告的內(nèi)容的時候,有人告訴你替換https可以改善這個問題,那么這個時候你就知道 之前的src和ajax寫得//而不是http://是當初多么明智的決定。。。
逐浪CMS官方
隨著越來越多開源和云平臺的涌現(xiàn)以及SSL協(xié)議的廣泛導入(如逐浪CMS已經(jīng)全面啟用了SSL協(xié)議支持),人們在進行開發(fā)時不得不面對http協(xié)議的選擇和識別。眾所周知,過多的ssl引用,可能會造成普通站點的效率低下,但我們不能為此再去重新設(shè)計一個純SSL版本。表現(xiàn)在開源庫上,一般平臺都同時提供SSL版和非SSL版。如這兩個庫:https://code.z01.com/js/jquery-3.2.1.slim.min.js
http://code.z01.com/js/jquery-3.2.1.slim.min.js
其引用效果是一致的。于是開發(fā)者們直接用"//網(wǎng)址/文件"方法來替代前面的協(xié)議,使之自動識別。即具體是SSL協(xié)議還是普通http協(xié)議,交給瀏覽器去自動識別并自動與當前站點匹配,從而實現(xiàn)最佳的安全請求和最高效的加載方法。概言之,這是一種開發(fā)方法和開發(fā)思維,云計算的web與移動開發(fā)日益壯大。
- 詳解移動端網(wǎng)頁設(shè)計實現(xiàn)內(nèi)滾動的四種解決方案
- 網(wǎng)頁設(shè)計如何優(yōu)雅的實現(xiàn)垂直居中
- 網(wǎng)頁設(shè)計:淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)
- 用戶需求導致營銷型網(wǎng)頁設(shè)計
- 網(wǎng)頁設(shè)計柵格就是你對頁面版式的規(guī)劃
- 網(wǎng)頁設(shè)計內(nèi)容網(wǎng)頁中關(guān)于圖片預覽的設(shè)計
- 網(wǎng)頁設(shè)計:腳本素材重構(gòu)用戶體驗
- Html布局左右寬度固定中間自適應(yīng)解決方案
- 利用nginx和騰訊云免費證書制作https的方法
- WPS表格中自適應(yīng)成績查詢系統(tǒng)
詳解移動端網(wǎng)頁設(shè)計實現(xiàn)內(nèi)滾動的四種解決方案
這篇文章主要介紹了關(guān)于移動端實現(xiàn)內(nèi)滾動的四種解決方案,實現(xiàn)的效果就是在一個區(qū)域內(nèi)只允許部分區(qū)域產(chǎn)生滾動的效果,而其余部分則不能移動,需要的朋友可以參考借鑒,下面來一起看看吧。...
網(wǎng)頁設(shè)計如何優(yōu)雅的實現(xiàn)垂直居中
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的實現(xiàn)垂直居中的相關(guān)資料,文中分別給大家介紹了已知寬高的元素、未知寬高的元素以及基于 Flexbox 的解決方案,都分別給出了示例代碼供大家參考學習,需要的朋友們下面隨著小編來一起學習學習吧...
網(wǎng)頁設(shè)計:淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)
這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧...
用戶需求導致營銷型網(wǎng)頁設(shè)計
我們的每期話題,團隊在內(nèi)部都會通過郵件進行一番討論,隨著討論的激烈,往往能碰撞出很多有意義的觀點,因此,將討論內(nèi)容分享出來,有興趣的朋友可以接著話題討論下去。Junchen:期望不是從石頭里面蹦出來的,所有期望都是受到外界影響、結(jié)合自身需求的一個外在表現(xiàn)...
網(wǎng)頁設(shè)計柵格就是你對頁面版式的規(guī)劃
英文原文:http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm柵格就是你對頁面版式的規(guī)劃你日常所見的許多頁面都有柵格存在。你可能注意不到,但它確實存在,并且支撐著設(shè)計內(nèi)容,建立整體的架構(gòu),引導著頁面的元素。柵格是隱形的架構(gòu),用于指導你頁面...
網(wǎng)頁設(shè)計內(nèi)容網(wǎng)頁中關(guān)于圖片預覽的設(shè)計
之前有寫過《內(nèi)容頁頁碼的預覽導航》跟《照片預覽導航分析》兩個文章,想說明的是預覽這一功能在用戶心理所占有的比重是很大的,如果僅僅只是給出一排順序數(shù)字做為鏈接的標題,用戶的心理會產(chǎn)生不安全感。雖然給出一排順序數(shù)字做為鏈接幾乎是整個互聯(lián)網(wǎng)的默認分頁鏈接模...
網(wǎng)頁設(shè)計:腳本素材重構(gòu)用戶體驗
設(shè)計網(wǎng)站的同志背景主要有兩種:學計算機、學藝術(shù)。基本上會寫代碼的不懂設(shè)計,會設(shè)計的不懂代碼,這個格局似乎到今天還沒變。某些學計算機的同學,有自己的審美品位,也能夠做出看起來不錯的網(wǎng)站,但學藝術(shù)的同學普遍難搞懂代碼...
Html布局左右寬度固定中間自適應(yīng)解決方案
文章主要介紹了詳解左右寬度固定中間自適應(yīng)html布局解決方案的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 a.使用浮動布局html結(jié)構(gòu)...
利用nginx和騰訊云免費證書制作https的方法
文章主要介紹了利用nginx和騰訊云免費證書制作https的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧之前一直在研究,https怎么弄。最近看到...
WPS表格中自適應(yīng)成績查詢系統(tǒng)
菜單式成績查詢
每個學校都會用到成績查詢。常規(guī)的查詢查詢方式是輸入待查詢對象的相關(guān)信息后讓系統(tǒng)提取成績資料。這種方式有兩個缺點:
1.需要錄入文字,對于不會打字或者字符錄入速度慢者不方便;
2.如果錄入了錯別字、...