前端基础

 
    // 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)
*
*
*
* */

    /*
    * 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， 声明位于文档中的最前面的位置，
*   处于  标签之前。此标签可告知浏览器文档使用哪种 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
    * */