前端基礎

 <!--dom事件級別-->
    // dmo0
    element.onclick=function () {};
    //dom 2
    element.addEventListener('click',function () {},false)

    //dom3
    element.addEventListener('keyup',function () { },false)

    // 事件模型
    /*   捕獲 --> 自上而下
    *    冒泡--> 自下而上
    * */

    // 事件流
/* 三個階段
*   捕獲--->目標元素 ---> 冒泡
*
* */

// 描述dom 事件捕獲的具體流程
    /*
    *       window -----> document ----->html ----> body -----> 普通元素的層級獲取
    *       冒泡: ---->反向上面部分
    * 如何獲取HTML這個節點 ---->document.getelement
    *
    * */
    // Event 對象常見應用
    /*
    *       event.preventDefault() // 阻止默認事件
    *       event.stopProgation()   // 阻止冒泡
    *       event.stopImmediatePropagation() // 事件響應優先級
    *       event.currentTarget()  // 處理事件委託  多個子級元素，判斷被點擊的是誰
    *       event.target() // 當前被綁點的元素
    * */
    // 自定義事件   || 模擬事件

    var eve = new Event('sugar');
    ev.addEventListener('sugar',function () { //sugar 事件名稱
        console.log(eve)
    })
    ev.dispatchEvent(eve)
/*  捕獲階段
*  var sugar = document.getElementById('sugar')
        window.addEventListener('click',function () {
                console.log('winodw捕獲到了事件')
        },true); // true 表示捕獲階段觸發
        document.addEventListener('click',function () {
            console.log('document捕獲到了事件')
        },true);
        document.documentElement.addEventListener('click',function () {
            console.log('HTML捕獲到了事件')
        },true)
        document.body.addEventListener('click',function () {
            console.log('body捕獲到了事件')
        },true);
        sugar.addEventListener('click',function () {
            console.log('div捕獲到了click事件')
        },true)
*
*
*
* */
<!--Http協議類型-->
    /*
    * 1.http 協議的主要特色
    * 2.http 報文的組成部分
    * 3.http方法
    * 4.post 和get 的區別
    * 5.http狀態碼
    * 6.什麼是持久鏈接
    * 7.什麼是管線化
    *
    * */
// 1.http 協議的主要特色
    /*
    * 1.簡單快速 // 直接輸入url訪問文件
    * 2.靈活     // 經過一個http協議完成不一樣數據類型傳輸
    * 3.無鏈接   // 鏈接一次就會斷開  不會保持鏈接
    * 4.無狀態   // 第一次和第二次鏈接 http協議是沒法判斷身份
    *            // 服務端能夠經過session來判斷
    *
    * */
    // 2.http 報文的組成部分
    /*包含兩個部分——請求報文    響應報文
    Request   Response
    *       請求報文{
    *           1.請求行  --> http方法 頁面地址 http協議以及版本
    *           2.請求頭 -->  key value 等  告訴服務端須要請求哪些數據
    *           3.空行   --> 告訴服務端該用請求體來解析
    *           4.請求體
    *       }
    *       響應報文{
    *           1.狀態行
    *           2.響應頭
    *           3.空行
    *           4.響應體
    *       }
    * */
    // 3.http方法
    /*
    * pst ---> 傳輸資源
    * get ---> 獲取資源
    * put ----> 更新資源
    * delete ---> 刪除資源
    * head ---> 獲取報文首部
    *
    * */
    // 4.post 和get 的區別
    /*
    * 1.get在瀏覽器回退時是無害的，而post則會再次請求
    * 2.get 產生的url地址是能夠唄收藏的，post則不能夠
    * 3.get請求會被瀏覽器主動緩存，post不會主動緩存
    * 4.get請求只能進行url編碼，post支持多種編碼格式
    * 5.get請求參數會被完整保存在瀏覽器歷史記錄中，post的參數不會被保存
    * 6.get請求在url中傳輸的參數有長度限制，post沒有
    * 7.對參數類型的限制：get只接受ascll字符，post沒有限制
    * 8.post比get更安全，get參數直接暴露在url上面
    * 9.get參數經過url，post則是在Request body中
    *
     *  */
    // 5.http狀態碼
    /*
    * 1xx : 指示信息  表示請求已經接收，繼續處理
    * 2xx ：成功   表示請求已經被成功接收
    * 200 請求成功  206 客戶發送了一個帶有Range頭的get請求  服務器完成了
    *
    * 3xx ：重定向  完成請求必須進行更進一步的操做
    * 304 ：讀取緩存  也算成功  301（永久） 302（臨時） 所請求的頁面轉移到了新的url
    * 4xx : 客戶端錯誤   請求因爲發錯誤或者沒法實現請求
    * 5xx : 服務器錯誤   服務器不能實現合法的請求
    * */
    // 6.什麼是持久鏈接
    /*  http1.1後版本可使用
    * http協議採用‘請求-應答’模式，當使用普通模式，每一個請求/應答 客戶和服務器都要
    * 從新簡歷一個鏈接，完成後當即斷開 （http協議爲無鏈接的協議）
    *
    * 當使用Keep-Alive模式時（持久鏈接或者鏈接重用），Keep-Alive功能使客戶端到服務器端的鏈接
    * 持續有效，比秒了從新鏈接或者創建
    * */
    // 7.什麼是管線化
    /* http1.1後支持


    * 在使用持久鏈接的狀況下
    * 請求-響應 請求- 響應 請求- 響應   是沒有中斷的
    *
    * 管線化請求下： 直接打包集體傳輸和返回
    * 請求1 請求2 請求3   響應1 響應2 響應3
    *
    *   服務端得支持管線化
    *
    * */
/*



    * 1.建立對象有幾種方法
    * --> 原型
    * --> 構造函數 任何一個函數被new使用 均可以叫構造函數
    * --> 實例
    * --> 原型鏈
    *
    * instanceof 的原理
    *
    *  new 運算符
    * */
// 建立對象有幾種方法
/*    //1
    var sugar = { name:'sugar' }
    var sugar1 = new Object({ name:'sugar1'});
    //2
    var Su = function () {
        this.name = 'Suo'
    };
    var Suo = new Su();
    //3
    var huahsneg = { name:"sugar" };
    var sugar=Object.create(huahsneg)*/
// 原型對象
/*
*          構造函數  constructor<----->prototype   原型對象 ---->_proto_  原型對象
*                       new  \     /   _proto_
*                                實例
*

*
* */

    /*
    * 1.渲染機制
    * 2.js運行機制{
    *   隊列任務和Event Loop
    * }
    * 3.頁面性能
    * 4.錯誤監控
    *
    * */
// 1.渲染機制
    /*
    * --> 什麼是DOCTYPE以及做用
    * ---> 瀏覽器渲染過程
    * ---> 重排Reflow
    * ---> 重繪 Repaint
    * ---> 佈局Layout
    *
    * */
// --> 什麼是DOCTYPE以及做用
/*
*   網頁採用html5，<!DOCTYPE> 聲明位於文檔中的最前面的位置，
*   處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。
    這個標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的
    HTML 文檔。
* */
// ---> 瀏覽器渲染過程
/* 參考  https://www.cnblogs.com/slly/p/6640761.html
*
*   解析渲染DOM 自上而下
*
* */
// ---> 重排Reflow
/*
*   一個頁面由兩部分組成：
    DOM：描述該頁面的結構
    render：描述 DOM 節點 (nodes) 在頁面上如何呈現
*
*
*   1.解析HTML代碼並生成一個 DOM 樹。
    2.解析CSS文件，順序爲：瀏覽器默認樣式->自定義樣式->頁面內的樣式。
    3.生成一個渲染樹（render tree）。這個渲染樹和DOM樹的不一樣之處在於，它是受樣式影響的。它不包括那些不可見的節點。
    4.當渲染樹生成以後，瀏覽器就會在屏幕上「畫」出全部渲染樹中的節點。
*
* 下列狀況會發生重排 重繪{
*       頁面初始渲染
        添加/刪除可見DOM元素
        改變元素位置
        改變元素尺寸（寬、高、內外邊距、邊框等）
        改變元素內容（文本或圖片等）
        改變窗口尺寸
*   }
*
*   如何減小重排
*   1.分離讀寫操做
*   2.樣式集中改變
*   3.可使用absolute脫離文檔流
*   4.使用 display:none ，不使用 visibility，也不要改變 它的 z-index
*   5.能用css3實現的就用css3實現
* */
// ---> 重繪 Repaint


    // 2.js運行機制
    /*  1. js屬於單線程 {
            一個時間只能作一個事情
            自上而下執行，
            優先順序： 同步任務處理完成後 ---> 異步任務
    }
        2. 任務隊列 {
            同步任務    console  -->  同步任務
            異步任務    setTimeout  --> 屬於異步任務
        }
    *   console.log(1);
        setTimeout(function () {
                console.log(2)
            },0);
         console.log(3)
    *   ///  1  3   2
    *
    *       console.log('A');
             setTimeout(function () {
                  console.log('B')
             },0);
             while(true){
            }
    *   // 輸出 A   任何異步操做都在同步執行完畢之後再執行
    *
    *
    *    for(var i=0;i<4;i++){
    *    // for循環 遇到setTimeout，沒有直接進入異步隊列中就+1  等到1秒後再把語句放入異步隊列中
            setTimeout(function () {
                console.log(i);
             },1000)
         }
    *
     * */
// 異步任務
    /*
    * 1.setTimeout  setInterval
    * 2.dom 事件
    * 3.Promise
    * */