• 客戶端和伺服器端互動模型詳解

        [request]請求階段
        1.首先根據客戶端輸入的域名，到DNS伺服器上進行反解析（通過域名找到對應的伺服器的外網ip）
        2.通過找到的外網ip 找到對應的伺服器
        3.通過在位址列中輸入的埠號（沒輸入是因為不同協議有自己預設埠號）找到伺服器上釋出的對應專案
        [response]響應階段
        4.伺服器獲取到請求資原始檔的地址·例如/stu/index.html·,把資原始檔中的原始碼找到
        5.伺服器端會把找到的原始碼返回給客戶端（通過HTTP等傳輸協議返回）
        [瀏覽器渲染]
        6.客戶端接收到原地阿媽後，會交給瀏覽器的核心（渲染引擎）進行渲染，最後由瀏覽器繪製出對應的頁面
 

• HTTP等傳輸協議詳解

        URL、URI、URN
        URI:統一資源識別符號
        URL:統一資源路徑地址
        URN:統一資源名稱
        URI=URL+URN
 
        一個完整的URL包涵很多部分
        http://www.baidu.com/stu/index.html?name=baidu&age=9
        
        第一部分：傳輸協議
            傳輸協議使用來完成客戶端和伺服器端的資料（內容）傳輸的，類似於快遞員，負責吧客戶
            和商家的物品來回傳送
            1.客戶端不近可以向伺服器傳送請求，而且還可以把一些內容傳遞給伺服器
            2.伺服器也可以吧內容返回給客戶端
            客戶端和伺服器端傳輸的內容總稱為HTTP報文，這些報文資訊都是基於傳輸協議完成傳輸的，
            客戶端傳遞給伺服器叫做請求（Request），伺服器返回給客戶端的叫做響應（Response），
            request和response兩個階段統稱為一個HTTP事務（一件完整的事）
                HTTP事務：當客戶端向伺服器端傳送請求，此時客戶端和伺服器端會建立一個傳輸通道，傳輸協議
            就是基於這個通道把資訊進行傳輸的
                當伺服器端接收到請求資訊，把內容返回給客戶端後，傳輸通道會自動銷燬

            傳輸協議分類
            http：長文字傳輸協議（客戶端和伺服器端傳輸的內容除文字以外，還可以傳輸圖片、音視訊等檔案流【二進位制編碼/base64】）
                以及傳輸xml格式的資料等，是目前市場上應用最廣泛的傳輸協議
            https：http ssl ，它比http更加安全，因為資料內容的傳輸通道是經過ssl加密的（它
            需要在伺服器端進行特殊的處理），所以設計資金類的網站一般都是https協議的

            ftp：資原始檔傳輸協議，一般使用者客戶端把資原始檔（不是程式碼內容），上傳到伺服器，或者從伺服器端下載一些檔案資源（
            ftp傳輸的內容會比http這類協議傳輸的內容多）
 

• HTTP報文的一些核心知識 

 HTTP報文

        1.起始行
        請求起始行
        響應起始行

        2.首部（頭）
        請求頭：內建請求頭、自定義請求頭
        響應頭：內建響應頭、自定義響應頭
        通用頭：請求和響應都有的



        3.主體
        請求體
        響應主體




        請求xxx都是客戶端設定的資訊，伺服器端獲取這些資訊
        響應XXX都是伺服器設定的資訊，客戶端來接收這些資訊


        在瀏覽器控制檯network選項中，可以檢視當前客戶端和伺服器端互動的全部資訊
    
        總結：
            客戶端傳遞給服務端資料
            1。URL問號傳遞引數
            2.設定請求頭
            3.設定請求主體

            伺服器端返回給客戶端內容
            1.設定響應頭（例如伺服器時間）
            2.設定響應主體
 

•  前端開發優化的一些常見的辦法

        一：減少HTTP請求的次數
        頁面中沒法送一次HTTP請求，都需要完成請求+相應合格完整的HTTP事務，會小號一些時間，也可能會
        導致HTTP連結通道的堵塞，為了提高頁面載入速度和執行的效能，我們應該減少HTTP的請求次數
        1.採用css雪碧圖技術（css Sprit/css圖片精靈）把一些小圖合併在一張大圖上
        ，使用的時候通過背景圖片定位，定位到具體的某一張小圖上
        .pubBg{
            background:url(../img/....png) no-repead;
            background-size:和原圖大小保持一致；
        }
        .box{
            background-position:x y;通過背景定位，定位到具體的位置，展示不同的圖片即可
        }

        2.真實專案中，我們最好把css或者js檔案進行合併壓縮；尤其是在移動端開發的時候，如果css或者
        js內容不是很多，我們可以採取內嵌式，以此減少http請求次數
          
          css合併成一個，js也最好合併成一個
          首先通過一些工具（如webpack）把合併後的css或者js壓縮成XXX.min.js，減少檔案大小
          伺服器端開啟資原始檔的GZIP壓縮
          通過一些自動化工具完成css以及js的合併壓縮，或者在完成LESS轉css，ES6轉ES5等，這種自動化構建模式成為前端工程化開發

        3.採用圖片懶載入技術，在頁面開始載入的時候，不請求真是的圖片地址，而是預設圖佔位，當頁面載入完成後，在根據相關的條件依次載入真實圖片
        （減少頁面首次載入的HTTP請求的次數）
            -真實專案中，我們開始圖片都不載入，頁面首次載入完成，先把第一螢幕中可以看到的圖片進行載入，隨著頁面的滾動，再把下面區域中能夠呈現的圖片進行載入
            -根據圖片懶載入技術，還可以闊成雛，資料的懶載入，開始載入頁面的時候，我們只把首屏或前兩屏的資料從伺服器端進行請求，有些網站首屏資料是後臺渲染好，整體返回給客戶端呈現的
            -分頁展示技術採用的也是資料的懶載入思想實現的：如果我們請求的資料是很多的資料，我們最好分批請求，開始只請求第一次的資料，當用戶點選
            第二頁（微博是下拉到一定距離後，再請求第二頁的資料）
        
        4.對於不經常更新的資料，最好採用瀏覽器的304快取做處理
            例如：第一次請求css和js下來，瀏覽器會把請求的內容快取起來，如果做了304處理，使用者再次請求css和js，會直接從快取中讀取，如果不需要再去伺服器獲取（減少HTTP請求次數）
                當強制花心頁面或者頁面快取的css或js發生變動，都會從伺服器獲取  
                
             對於客戶端來講，我們還可以基於localStirage來做一些本地儲存，例如:第一次請求的資料或者不經常更新的css和js，都可以把內容儲存在本地，
             下一次頁面載入，直接從本地獲取，設定一定的期限或一些標識，可以控制在某個階段重新從伺服器獲取

        5.使用字型圖示代替一些頁面中的點陣圖，這樣不僅做適配時方便，而且更加輕量級，而且減少了HTTP請求次數

        


        6.如果頁面中哪個出現了AUDIO或者VIDEO標籤，最好設定他們的preload=none：頁面載入時，音視訊資源不進行載入，播放的時候再開始載入
        （減少頁面首次載入HTTP請求次數）
        preload=auto：頁面首次載入的時候就把音視訊資源載入
        preload=metadata：頁面首次載入的時候只把音視訊資源的頭部資訊載入


        7.在客戶端和伺服器端進行資料通訊的時候，儘量使用JSON格式進行資料傳輸
            【優勢】：
                JSON格式的資料，能夠清晰的展示出資料的結構，也方便自己的獲取和操作
                相對於XML格式的傳輸，JSON格式的資料更加輕量級
                客戶端和伺服器端都支援json格式資料的處理，處理起來非常方便
                （真實專案中，並不是所有的資料都要基於json，我們儘量這樣做，但是對於一些特殊的需求，如檔案流
                或者文件傳輸，使用json就不合適了）

        8.採用CDN加速
            （地域分散式）
        


        關於編寫程式碼時候的一些優化技巧
            除了減少HTTP請求次數和大小可以優化效能，在編寫程式碼時，也可以進行一些優化，讓頁面的效能有所提升，（有些不好的程式碼辨析習慣，會導致頁面效能消耗太大，例如：記憶體洩漏）
            1.在編寫js程式碼的時候，儘量減少對DOM的操作
             在JS中操作dom是一個非常消耗心梗的事情，但是又不能避免的操作dom，所以只能減少
             【操作dom弊端】
                DOM存在對映機制（JS中的dom元素物件和頁面中的DOM結構是存在對映機制的，一改則都改），這種對映機制是瀏覽器按照W3C標準完成
                對js語言的構建和dom的構建（其實就是構建了一個監聽機制）操作dom是要同事修改兩個地方的，相當於一些其他的js程式設計來說是消耗效能的
                頁面中的dom結構改變或者樣式改變，會觸發瀏覽器的迴流（瀏覽器會把dom結構重新進行計算）和重繪（把元素的樣式進行重新渲染）

            2.編寫程式碼的時候，更多的使用非同步程式設計
                同步程式設計可能會導致上面的程式碼執行不完，下面的任務也做不了
                尤其是ajax資料請求，我們一般都要使用非同步程式設計，最好是基於promise設計模式進行管理（專案中經常使用fetch、axios等外掛來進行請求處理）

            3.在真實專案中，儘量避免一次性迴圈過多資料（因為迴圈操作是同步的），尤其是要避免while導致的死迴圈操作

            4.CSS選擇器優化
                儘量減少標籤選擇器的使用
                儘可能少使用id選擇器，多使用樣式類選擇器（通用性強）
                減少使用選擇器時前面的字首例如：.headerBox .nav .left a{} 選擇器是從右向左查詢的

            5.避免使用css表示式

            6.減少頁面中的冗餘程式碼，儘可能提高方法的重複使用率。“低耦合高內聚”

            7.css放head中  js放在body底部

            8.js中避免使用eval
                效能消耗大
                程式碼壓縮後，容易出現程式碼執行錯亂問題

            9.js中儘量減少閉包的使用
                閉包會形成一個不銷燬的棧記憶體，過多的棧記憶體累積會影響頁面的效能
                還會容易導致記憶體的洩漏

            10.在做dom繫結事件時，儘量避免一個個的事件繫結，而是採用效能更高的事件委託來實現

                事件委託（事件代理）
                把事件繫結給外層rong容器，當裡面的後代元素相關行為處罰，外層容器繫結的方法也會被觸發，（冒泡傳播機制）

            11.儘量使用css3動畫代替js動畫，因為css3動畫或變形都開啟了硬體加速，效能比js動畫
        
            12.編寫js程式碼儘可能使用設計模式來構建體系，方便後期維護，提高擴充性
        
            13.css中減少對濾鏡的使用，頁面中也減少對flash的使用
        
        
            關於頁面的SEO優化技巧
            1.頁面中杜絕死連結（404頁面），而且對於使用者輸入一個錯誤頁面，我們要引導404頁面提示（伺服器處理的）

            2.避免瀏覽器中宜昌錯誤丟擲
            儘可能避免程式碼出錯
            使用try catch 做宜昌資訊捕獲
            3.增加頁面關鍵詞優化

• 一個完整的URL各部分內容及其作用 

        域名：
            設定域名其實就是給不好記憶的伺服器外網IP設定了一個好記的名字

            頂級域名（一級域名）：qq.com
            二級域名：wwww.qq.com   v.qq.com  sports.qq.com.....
            三級域名:kbs.sports.qq.com
            .....


        埠號
            在伺服器釋出專案的時候，我們可以通過埠號區分當前伺服器上不同的專案

            一臺伺服器的埠號取值範圍：0-65535之間，如果電腦上安裝了很多程式，有一些埠號是被佔用了

            HTTP:預設埠號是80
            HTTPS：預設埠號是443
            FTP：預設埠號是21

            對於上述三個埠號其實很重要的，如果被其它程式佔用，我們則不能使用
            所以伺服器上一般是禁止安裝其它程式的

        請求資原始檔的路徑名稱
            /stu/index.html
            在伺服器釋出專案的時候，我們一般都會配置一些預設文件：使用者及時不輸入請求檔案的名稱，伺服器也會找到預設文件
            都是index/default...
            通常為了做SEO優化，會把一些動態頁面的地址（xxx.php/ xxx.asp/ xxx.jsp）進行偽url重寫
            （需要伺服器處理）


            https:item.jd.com/543212345654.html
             不可能是有一個商品就單獨寫一個詳情頁面，肯定是同一個詳情頁做的不同處理
            方案1：由後臺語言根據詳情頁模板動態生成具體的詳情頁面
            方案2：當前頁面就是一個頁面，例如：detail.html  detai.php.... 我們做詳情頁面的時候，開發是按照detail.html?id=3221344321來開發的
                    但是這種頁面不方便做SEO優化，此時我們把真是的地址進行重寫，重寫為我們看到的543443.html
            
        問號傳參
          1.  ?name=smd&age=23
                把一些值通過XXX=XXX的方式，放在一個URL的末尾，通過問號傳遞
                【作用】：1.在ajax請求中，可以通過問號傳遞引數的方式，把一些資訊傳遞給伺服器，伺服器通過傳遞資訊的不一樣，返回不同的資料

                $.ajax(url,{})
                $.get(url,function(){}),對於ajax請求的特殊寫法，原理還是基於ajax方法實現的
                    $.post   $.script....

            
                $.ajax({
                    url:"getPersonInfo?id=12"
                  ....
                })
                當前案例，我們傳遞給伺服器的編號是多少，伺服器端就會把對應編號人員資訊給返回
            
            2.消除ajax請求中GET方式快取
                $ajax({
                    url:"xxx?_=0.12311",
                    method:"get"
                })

            3.通過URL傳遞引數的方式，可以實現頁面之間資訊的通訊，例如：我們有兩個頁面A/B，A是列表
                頁面，B是詳情頁面

            hash值
            #xxx
                URL末尾傳遞的井號，就是hash值
                【作用】
                1.頁面中錨點定位
                2.前端路由（SPA單頁面開發）