整理本身的筆記，構建知識體系（前端篇 一）

前言

做爲一個轉行過來的萌新，17年初入坑至今，期間本身好像零零散散學習了很多東西，可是又感受本身什麼都不會，恰逢最近離職找工做（有靠譜內推的，不用客氣，請聯繫我，馬上，立刻。座標：深圳，郵箱：tanna5421023@163.com萬分感謝），正好整理下本身的學習筆記，構建本身的知識體系。（PS：很是很是很是有必要創建本身的知識體系）初次發文，文筆有限，不對之處，請各位大佬多多指正。 本文僅爲本身的學習筆記，並不是原創，感謝大佬們的分享。 附上本身很是喜歡的一句話：生命中的任何饋贈，其實都已經暗中標好了價碼。諸君共勉之。 廢話很少說，follow me 帶你走進初級前端的世界。

大綱

從一道很是經典並且槽點又多的題入手：從輸入url到頁面加載，發生了什麼？ 看到這道題，個人內心就沒有13數了，這個問題很大，得慌！ 先點支菸，冷靜一下，仔細分析一波： 首先，衆所周知 瀏覽器是多進程的，瀏覽器內核是多線程的，那麼輸入url後，瀏覽器會開啓網絡請求線程發起一個完整的http請求，服務器接收到請求，先後臺http交互，瀏覽器收到服務器返回數據包解析，包括解析html生存dom樹，解析css生成樣式樹，合併成渲染樹，計算layout，painting渲染，js引擎解析等等。分析不了了，看大綱：

1 從瀏覽器接收url到開啓網絡請求線程

多進程瀏覽器
多線程瀏覽器內核
解析url
複製代碼

2 開啓網絡請求線程發出完整的http請求

DNS查詢獲得IP地址
tcp/ip請求
五層因特爾網協議
複製代碼

3 服務器接收到請求

負載均衡
後臺處理
複製代碼

4 先後臺http交互

http報文
http緩存
cookie
長短鏈接
http1.0/1.1/2
https   
複製代碼

5 解析頁面

html解析，生成dom樹
css解析，生產樣式樹
渲染
簡單層與複合層
js引擎解析
等等
複製代碼

1 從瀏覽器接收url到開啓網絡請求線程

首先，咱們得知道什麼是進程，什麼是線程： 簡單來講 進程是CPU資源分配的最小單位，線程是CPU調度的最小單位。 納尼？這叫簡單？做爲一個非科班出身，對不起，我看不懂，呵呵，那麼詳細一點來講： 爲何會有進程與線程呢？因爲CPU運行速度很快，當咱們執行一段程序，實現一個功能的時候，相關資源構成程序上下文，而後CPU開始執行，當這個程序執行完了，或者分配給他的CPU執行時間用完了，那它就要被切換出去，等待下一次CPU的臨幸。在被切換出去的最後一步工做就是保存程序上下文，由於這個是下次他被CPU臨幸的運行環境，必須保存。 CPU都是輪流執行的，先加載程序A的上下文，而後開始執行A，保存程序A的上下文，調入下一個要執行的程序B的程序上下文，而後開始執行B,保存程序B的上下文。。。。進程就是包換上下文切換的程序執行時間總和 = CPU加載上下文+CPU執行+CPU保存上下文； 線程又是什麼？因爲進程的進程的顆粒度太大，每次都要有上下的調入，保存，調出。若是咱們把進程比喻爲一個運行在電腦上的軟件，那麼一個軟件的執行不多是一條邏輯執行的，一定有多個分支和多個程序段，就比如要實現程序A，實際分紅 a，b，c等多個塊組合而成。那麼這裏具體的執行就可能變成：程序A獲得CPU =>CPU加載上下文，開始執行程序A的a小段，而後執行A的b小段，而後再執行A的c小段，最後CPU保存A的上下文。這裏a，b，c的執行是共享了A的上下文，CPU在執行的時候沒有進行上下文切換的。這裏的a，b，c就是線程，也就是說線程是共享了進程的上下文環境，的更爲細小的CPU時間段。兩個名詞不過是對應的CPU時間段的描述。

總的來講：進程和線程都是一個時間段的描述，是CPU工做時間段的描述，不過是顆粒大小不一樣。 從底層CPU角度分析一波，是否是感受你們都理解了，說到這裏，我又想到，既然進程是CPU資源分配的最小單位，那麼就涉及到了競爭CPU的調度，以及申請內存（物理地址空間）；進程之間相互獨立安全性高，若是兩個進程之間須要進行（事件通知，數據傳輸，資源共享，進程控制）那麼就須要經過進程間通訊（管道，消息隊列，共享內存，信號量等）的方式來達成。而線程是程序運行的最小單位，線程是進程的一個分流（一個進程至少有一個線程）， 一個進程內部的多個線程之間共享進程的數據，若是多個線程同時訪問臨界資源就會存在線程衝突（經過互斥鎖來放置線程訪問共享資源衝突的問題，有的時候互斥鎖會帶「死鎖」和「飢餓現象」的問題），固然大多數線程內部的數據是單獨享有的存儲在線程棧上面。這方面我也不太懂，求大佬們告知 ，嘿嘿嘿。

多進程的瀏覽器

上面咱們瞭解了什麼是進程什麼線程，那咱們簡單來看看瀏覽器的多進程：

瀏覽器是多進程的，有一個主控進程，每打開一個tab頁面都會新開一個進程（某些狀況下多個tab會合並進程），這裏麪包括：主控進程（負責協調、主控，只有一個），插件進程（每種類型的插件對應一個進程，僅當使用該插件時才建立），GPU（最多一個，用於3D繪製），tab頁（瀏覽器內核，控制頁面渲染，腳本執行，事件處理等，有時候會優化，如多個空白tab會合併成一個進程）等等。

多線程的瀏覽器內核

每個tab頁面能夠看做是瀏覽器內核進程，而後這個進程是多線程的，它包括幾大類子線程：

GUI線程，JS引擎線程，事件觸發線程，定時器線程，網絡請求線程

從這裏面咱們能夠看到，js引擎線程只是瀏覽器內核進程中的一個線程，這也是咱們說js是單線程的。

解析url

看到這，咱們先看看 URL,URN,URI：

URL ：（Uniform Resource Locator），統一資源定位符

URN ：（Uniform Resource Name），統一資源名稱

URI ：（Uniform Resource Identifier），統一資源標識符

起源：

這三個縮略詞是Tim Berners-Lee在一篇名爲RFC 3986: Uniform Resource Identifier (URI): Generic Syntax的文檔中定義的互聯網標準追蹤協議。

引文：

統一資源標識符(URI)提供了一個簡單、可擴展的資源標識方式。URI規範中的語義和語法來源於萬維網全球信息主動引入的概念，萬維網從1990年起使用這種標識符數據，並被描述爲「萬維網中的統一資源描述符」。

區別

首先咱們要弄清楚一件事：URL和URN都是URI的子集。

換言之，URL和URN都是URI，可是URI不必定是URL或者URN。

關於URL：

URL是URI的一種，不只標識了Web 資源，還指定了操做或者獲取方式，同時指出了主要訪問機制和網絡位置。

關於URN：

URN是URI的一種，用特定命名空間的名字標識資源。使用URN能夠在不知道其網絡位置及訪問方式的狀況下討論資源。

如今，若是到Web上去看一下，你會找出不少例子，這比其餘東西更容易讓人困惑。我只展現一個例子，很是簡單清楚地告訴你在互聯網中URI 、URL和URN之間的不一樣。 來看個列子，理解它們的區別：

這是一個URI：

bitpoetry.io/posts/hello…

咱們開始分析

http://

是定義如何訪問資源的方式。另外

bitpoetry.io/posts/hello.html

是資源存放的位置，那麼，在這個例子中，

#intro

是資源。

URL是URI的一個子集，告訴咱們訪問網絡位置的方式。在咱們的例子中，URL應該以下所示：

bitpoetry.io/posts/hello…

URN是URI的子集，包括名字(給定的命名空間內)，可是不包括訪問方式，以下所示：

bitpoetry.io/posts/hello.html#intro

就是這樣。如今應該可以辨別出URL和URN之間的不一樣。記不住不要緊，只要記住URI能夠被分爲URL、URN或二者的組合。

emmm，扯遠了，來從新回到URL：

URL通常包括：scheme （定義網絡服務類型，譬若有http，https，ftp，file，telnet等），host（主機域名或IP地址），domain （ 定義因特網域名），port（端口號），path（目錄路徑），query（即查詢參數），filename（ 定義文檔/資源的名稱）

這裏再說一下通常計算機上的默認端口號：

apache ： 80/443

mysql： 3306

ftp: 21 文件傳輸協議

ssh: 22 安全的遠程登錄

telnet : 23 遠程登錄

smtp：25 簡單郵件傳輸協議

dns: 53 域名解析

http： 80

pop3： 110 客戶端遠程管理在服務器上的電子郵件，提供了SSL加密的POP3協議被稱爲POP3S

https： 443 加密的超文本傳輸協議

結語

因爲篇幅有限，這裏就先簡單介紹到這裏，這兩天我會把後續的部分寫出來，文中錯誤的地方請大佬們幫忙指出，碼字不易，幫忙點個贊，哈哈

留一個有趣的小問題，與本文無關：

有100瓶水，其中有一瓶有毒，用小白鼠作實驗（對不起，小白鼠）每瓶水能夠給多隻小白鼠喝，每隻小白鼠能夠喝多個瓶子的水，能夠請問最少用多少隻小白鼠檢查出有毒的那瓶水？（PS：聽說是小學生題目，反正我不信，若是是，我只想說：原來這就是強者的世界啊 摔手 嗚嗚嗚）