幾天有個學妹問我為什么在瀏覽器里面輸了網址就會顯示出來頁面,雖然這個現象很常見,但是要想解釋清楚確實有些小困難,當時也只是簡單的回答了她,現在想趁著這個機會好好整理下相關知識。整理完才覺得其實就和我們去一個地方找人是一個道理。所以說藝術源于生活卻又高于生活,技術同樣如此。
在回答這個問題前, 我們先來了解下我們平常說的那個網址到底是啥?
網址的學名叫做統一資源定位符(Uniform Resource Locator, 常縮寫為URL), 我們知道現在的互聯網其實就是由眾多資源所構成的一張巨大的網, 如何定位那些資源就是靠的URL, 因此我們也可以把URL理解為是網絡上資源的“門牌號“, 我們在瀏覽器中輸入網址, 就相當于開一輛車(瀏覽器)去找一個地址(URL)
1. 緩存查找
如果你要出門找一個地方, 第一想法肯定是先想這個地方你有沒有去過, 你要是去過的話那就不需要問人直接過去就好了。 我們的系統也是這么想的。 當你在瀏覽器中輸入了URL之后, 瀏覽器會先查看 瀏覽器緩存 中有沒有這個地址, 如果沒有那就再去 系統緩存, 如果系統緩存還沒有, 那就去路由器緩存找, 總之只要緩存中有, 就說明有這個資源, 那瀏覽器直接顯示出來就好了。
Tips: 這里說下 hosts文件 , hosts 是一個沒有擴展名的系統文件, 可以用記事本等工具打開, 其作用就是將一些常用的網址域名與其對應的IP地址建立一個關聯“數據庫”, 當用戶在瀏覽器中輸入一個需要登錄的網址時, 系統會首先自動從 hosts 文件中尋找對應的 IP 地址,一旦找到, 系統會立即打開對應網頁, 如果沒有找到, 則系統會再將網址提交 DNS 域名解析服務器進行IP地址的解析。 需要注意的是, hosts文件配置的映射是靜態的, 如果網絡上的計算機更改了請及時更新IP地址, 否則將不能訪問。
2. DNS 解析
如果你認得去那個地址的路自然是最好, 那如果你根本就沒去過那咋辦? 肯定會有人說導航, 但并不是所有的地方都是導航能搜到的, 這個時候我們自然而然就會想著去問路人了。 瀏覽器也是這樣的, 如果在本地緩存中沒有找到想要的資源, 那就只能去其他網絡上的機器中尋找我想要的資源了。 那你怎么知道你要的資源在那臺機器上? 這時, DNS就橫空出世了。
DNS(Domain Name System, 域名系統),DNS解析的過程就是尋找哪臺機器上有你需要資源的過程。當你在瀏覽器中輸入一個地址時, 例如 www.baidu.com, 其實這段URL并不是真正意義上的地址。 互聯網上每一臺計算機的唯一標識是它的 IP 地址(比如127.0.0.1就是我們本機的 IP 地址), 但是 IP 地址并不方便記憶(畢竟都是很長的數字串), 所以也就出現了網址(URL)這個玩意了, 目的就是為了方便普通用戶去尋找網絡上的其他計算機。 所以 DNS 實際上充當了一個翻譯的角色, 將網址翻譯成 IP 地址(就跟我想去南京大學, 問路的那個人告訴我南京大學在廣州路上是一個道理)。
2.1 DNS 解析過程
DNS解析其實是一個遞歸查詢的過程:
在上述過程中, 首先在本地域名服務器中查詢 IP 地址, 如果沒有找到, 本地域名服務器會向根域名服務器發送一個請求, 如果根域名服務器也不存在該域名時, 本地域名會向com頂級域名服務器發送一個請求, 依次類推下去。 直到最后找到目標網址所對應的 IP, 并將其緩存到本地, 以供下次使用。
2.2 DNS負載均衡
在講DNS負載均衡前先來看張圖片:
看到這可能就會有人犯嘀咕了, 我們不是 ping 的同一個網址嗎, 為啥兩次IP都不一樣啊? 其實原因很簡單, 如果每次都一樣是否說明你請求的資源都位于同一臺機器上面, 那么這臺機器需要多高的性能和儲存才能滿足億萬請求呢? 其實真實的互聯網世界背后存在成千上百臺服務器, 大型的網站甚至更多。 但是在用戶的眼中, 它需要的只是處理他的請求, 哪臺機器處理請求并不重要。 DNS可以返回一個合適的機器的IP給用戶, 例如可以根據每臺機器的負載量, 該機器離用戶地理位置的距離等等, 這種過程就是DNS負載均衡, 又叫做DNS重定向。
再來舉個例子, 如果你在新街口用地圖搜南京大學, 返回給你的第一條數據可能就是南京大學鼓樓校區(因為距離最近), 但如果你是在仙林用地圖搜南京大學, 返回給你的第一條數據就有可能是南京大學仙林校區了。 DNS負載均衡簡單來說也是這個道理。
2.3 DNS 污染
DNS 污染(DNS cache pollution), 又稱域名服務器緩存投毒(DNS cache poisoning), 是指一些刻意制造或無意中制造出來的域名服務器數據包, 把域名指往不正確的IP地址。
某些網絡運營商為了某些目的, 對DNS進行了某些操作, 導致上網的用戶無法通過域名取得正確的IP地址。 某些國家或地區出于某些目的為了防止某網站被訪問, 而且其又掌握部分國際DNS根目錄服務器或鏡像, 也會利用此方法進行屏蔽。 (Google、 Facebook等)
至于如果防止DNS污染, 這里只說一個方法就是修改hosts文件, 其他的自行搜索吧。
3. TCP連接
其實在上面DNS解析的圖中就已經有了TCP連接的過程了:
我們通過DNS解析獲取到了網址所對應的IP地址后, 便需要發起TCP連接請求, 這里總共需要三次握手, 具體的過程就不贅述了, 可以查閱相關資料, 這里推薦劉欣老師的《TCP/IP 之 大明王朝郵差》, 以及大學計算機網絡課本里面的TCP相關章節。
4. HTTP 請求
握手成功后, 瀏覽器就可以向服務器發送http請求了, 請求數據包。 發送HTTP請求的過程就是構建HTTP請求報文并通過TCP協議中發送到服務器指定端口(HTTP協議80/8080, HTTPS協議443)。HTTP請求報文是由三部分組成: 請求行,請求報頭和請求正文。
4.1 請求行
格式如下:
Method RequestURL HTTPVersion CRLF
例如:
GET index . html HTTP / 1.1
常用的方法有: GET,POST,PUT,DELETE,OPTIONS,HEAD。
4.2 請求報頭
請求報頭允許客戶端向服務器傳遞請求的附加信息和客戶端自身的信息。
Tips:客戶端不一定特指瀏覽器, 有時候也可使用Linux下的CURL命令以及HTTP客戶端測試工具等。
常見的請求報頭有: Accept,AcceptCharset,AcceptEncoding,AcceptLanguage,ContentType,Authorization,Cookie,UserAgent等。
上圖是使用Chrome開發者工具截取的對百度的HTTP請求以及響應報文, 從圖中可以看出, 請求報頭中使用了Accept, AcceptEncoding, AcceptLanguage, CacheControl, Connection, Cookie等字段。 Accept 用于指定客戶端用于接受哪些類型的信息, AcceptEncoding 與 Accept 類似, 它用于指定接受的編碼方式。Connection 設置為 Keepalive 用于告訴客戶端本次 HTTP 請求結束之后并不需要關閉 TCP 連接, 這樣可以使下次 HTTP 請求使用相同的 TCP 通道, 節省 TCP 連接建立的時間。
5. 服務器響應
這部分對應的就是后端工程師眼中的 HTTP。 后端從在固定的端口接收到 TCP 報文開始, 這一部分對應于編程語言中的 socket。 它會對 TCP 連接進行處理, 對 HTTP 協議進行解析, 并按照報文格式進一步封裝成 HTTP Request對象, 供上層使用。 這一部分工作一般是由 Web 服務器去進行, 常用的Web服務器有 Tomcat, IIS 和 Netty 等等。
HTTP響應報文也是由三部分組成: 狀態碼, 響應報頭和響應報文。 篇幅原因這里就不詳細展開了。
6. 瀏覽器解析網頁信息
服務器返回給瀏覽器的文本信息, 通常是 HTML, CSS, JS, 圖片等文件, 那么瀏覽器是如何對澤瀉內容進行渲染呢? 通常是下面五個步驟:
不過這五個步驟在不同內核的瀏覽器中執行細節是不同的, 想深入了解的可以查閱相關資料, 這里推薦一篇文章:《瀏覽器渲染頁面過程與頁面優化》(https://segmentfault.com/a/1190000010298038)
瀏覽器是一個邊解析邊渲染的過程。 首先瀏覽器解析HTML文件構建DOM樹, 然后解析CSS文件構建渲染樹, 等到渲染樹構建完成后, 瀏覽器開始布局渲染樹并將其繪制到屏幕上。
JS的解析是由瀏覽器中的 JS 解析引擎完成的。 JS是單線程運行, 也就是說, 在同一個時間內只能做一件事, 所有的任務都需要排隊, 前一個任務結束, 后一個任務才能開始。 但是又存在某些任務比較耗時, 如IO讀寫等, 所以需要一種機制可以先執行排在后面的任務, 這就是: 同步任務(synchronous)和異步任務(asynchronous)。 JS的執行機制就可以看做是一個主線程加上一個任務隊列(task queue)。 同步任務就是放在主線程上執行的任務, 異步任務是放在任務隊列中的任務。 所有的同步任務在主線程上執行, 形成一個執行棧; 異步任務有了運行結果就會在任務隊列中放置一個事件; 腳本運行時先依次運行執行棧, 然后會從任務隊列里提取事件, 運行任務隊列中的任務, 這個過程是不斷重復的, 所以又叫做事件循環(Event loop)。 如下圖所示:
7. 總結
當上述步驟執行完成后我們便可在瀏覽器中看到一個完整的頁面了, 總結下其實就只有幾步:
其實簡單來看這幾個過程并不是很復雜, 但是每個步驟都可以深挖出一大堆的知識, 比如DNS的優化、頁面渲染的優化、 HTTPS等等非常多的東西, 這里考慮到篇幅以及科普效果很多東西都一筆帶過了
Java識堂,一個高原創,高收藏,有干貨的微信公眾號,一起成長,一起進步,歡迎關注
如果網頁中有框架,那么可以通過以下幾種方式來訪問:
框架有parent及top兩個屬性
self與window是相同的
由于不同瀏覽器支持的屬性不同,所以做了一個表格方便查看。
以下是跨瀏覽器的代碼,即無論是哪種瀏覽器,都可以正常使用(注:因書本是2012年的,現在可能已經不一樣了)。
var leftPos=(typeof window.screenLeft=="number") ? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop=="number") ? window.screenTop : window.screenY;
alert(leftPos);
alert(topPos);
移動窗口(沒有實現,不知是不是現在瀏覽器對這些命令有限制)
起來體驗騰訊位置服務功能吧】
結合自己小程序業務,集成騰訊位置服務地圖功能還是不錯的,推薦各位同行提前體驗和使用
【前言】
第一次使用騰訊位置服務也算是挺早的,當時是在web端使用。后來,個人慢慢接觸到小程序,有一次的需求是能夠展示附近的各類店鋪,方便自己快速定位周圍有什么好吃好逛的地方。再后來每次到一個地方旅游,我們必不可少的一個需求就是需要上WC,當時就在想如何通過一個地圖來實現快速定位周邊WC的位置以及步行路線,鑒于那時還沒太了解小程序里也開始集成了騰訊位置服務,所以僅僅是一個想法和構思,現在好了,有騰訊位置服務功能可以直接在小程序上面直接使用,借助巨人的力量可以好好發揮去實現需求功能了。
因此,寫這篇文章,也是希望能夠總結對接騰訊位置服務功能步驟和知識點,方便開發同行快速上手和使用。
【申請Key】
創建用于自己某一業務或某一場景的Key密鑰,擁有這把鑰匙,就可以開始地圖功能體驗啦!直接微信掃碼授權登錄即可,騰訊列表功能使用微信掃碼登錄方便好多,省去了古老需要密碼登錄的好方式。
后臺點擊菜單
key與配額 ->key管理,具體開發者密鑰申請信息填寫如下
【設置域名】
小程序管理后臺 -> 開發 -> 開發管理 -> 開發設置 -> “服務器域名” 中設置request合法域名,添加https://apis.map.qq.com
【引入js】
下載地址:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
JavaScriptSDK v1.2
// 引入SDK核心類,js文件根據自己業務,位置可自行放置
var QQMapWX=require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data:{
longitude:'113.390451',
latitude:'23.048914',
markers:[{longitude:'113.390451',latitude:'23.048914'}]
},
onLoad: function () {
// 實例化API核心類
qqmapsdk=new QQMapWX({
key: 'xxxx-xxxx,你自己申請到的key'
});
},
onShow: function () {
// 調用接口
qqmapsdk.search({
keyword: '廣州大學城',
success: function (res) {
//console.log(res);
},
fail: function (res) {
//console.log(res);
},
complete: function (res) {
console.log(res);
}
});
}
})
view代碼
<view class='view'>
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
</view>
【標注顯示文本】
js代碼效果
//關鍵代碼
//markers屬性下還有屬性成員-{label:{content:'廣州番禺大學城'}
data:{
markers:[{label:{content:'廣州番禺大學城'},longitude:'113.390451',latitude:'23.048914'}]
},
【WC路線規劃】
下面的還有做樣式設置,比如:箭頭、和線路顏色,以及起點和終點的文本顯示等等,純屬默認參數
效果
// 引入SDK核心類,js文件根據自己業務,位置可自行放置
var QQMapWX=require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data:{
longitude:'113.390451',
latitude:'23.048914',
markers:[{label:{content:'廣州番禺大學城'},longitude:'113.390451',latitude:'23.048914'}]
},
onLoad: function () {
// 實例化API核心類
qqmapsdk=new QQMapWX({
key: 'xxxx-xxxx,你自己申請到的key'
});
},
onShow: function () {
// 調用接口
qqmapsdk.search({
keyword: 'GoGo廁所',
success: function (res) {
//console.log(res);
},
fail: function (res) {
//console.log(res);
},
complete: function (res) {
console.log(res);
}
});
},
//觸發表單提交事件,調用接口
formSubmit(e) {
//起點坐標:23.048914,113.390451
//終點坐標:23.061793,113.392056
//23.061793,113.392056
//23.063073,113.391762
var _this=this;
//調用距離計算接口
qqmapsdk.direction({
mode: 'driving',//可選值:'driving'(駕車)、'walking'(步行)、'bicycling'(騎行),不填默認:'driving',可不填
//from參數不填默認當前地址
from: e.detail.value.start,
to: e.detail.value.dest,
success: function (res) {
console.log(res);
var ret=res;
var coors=ret.result.routes[0].polyline, pl=[];
//坐標解壓(返回的點串坐標,通過前向差分進行壓縮)
var kr=1000000;
for (var i=2; i < coors.length; i++) {
coors[i]=Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//將解壓后的坐標放入點串數組pl中
for (var i=0; i < coors.length; i +=2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
console.log(pl)
//設置polyline屬性,將路線顯示出來,將解壓坐標第一個數據作為起點
_this.setData({
latitude:pl[0].latitude,
longitude:pl[0].longitude,
polyline: [{
points: pl,
color: '#FF0000DD',
width: 4
}]
})
},
fail: function (error) {
console.log(error);
},
complete: function (res) {
console.log(res);
}
});
}
})
<!--地圖容器-->
<map
id="myMap"
style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}"
scale='16'
polyline="{{polyline}}"
show-location
>
</map>
<form bindsubmit="formSubmit">
<!--輸入起點和目的地經緯度坐標,格式為string格式-->
<!--起點輸入框,同終點,不填默認當前位置-->
<label>起點坐標:<input style="border:1px solid #000;" name="start"></input></label>
<!--終點輸入框,例:39.984060,116.307520-->
<label>終點坐標:<input style="border:1px solid #000;" name="dest"></input></label>
<!--提交表單數據-->
<button form-type="submit">路線規劃</button>
</form>
【開啟個性化騰訊地圖】
微信掃碼綁定,微信會判斷當前小程序是否注冊騰訊位置服務,如果提示未注冊,那么可以輸入已注冊的賬號,一般是手機號碼登錄,完成小程序和騰訊位置服務賬號的綁定。
有些插件還要另外申請appid
*請認真填寫需求信息,我們會在24小時內與您取得聯系。