前端小知识点1

前端小知识点

1. CSS Sprites 一种网页图片应用处理方式。他允许讲一个页面涉及到的所有零星图片包含到一张大图中，这样访问页面载入图片就不会一张一张显示。

   最大的优点：能够减少网页的http请求，从而大大的提高页面的性能。

   能减少图片字节，合并后的图片字节大小总是小于原来的总和

   更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护更方便

2. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

3. fixed 生成绝对定位的元素，相对于浏览器窗口进行定位

   absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

4. onfocus 获得焦点 onblur 失去焦点

5. 新窗口打开网页用到_blank

6. 设置readonly属性的表单控件可以获得焦点

7. 上右下左 4方位顺序

8. H5的Web存储对象两个：localStorage，sessionStorage

9. html加载完毕后触发的事件：window.onload = function(){}

10. JS false==null 返回false

11. 检测ip是ipv6还是ipv4

    /**
     * @param {string} IP
     * @return {string}
     */
    var validIPAddress = function(IP) {
        var ipv4 = /^((\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.){4}$/;
        var ipv6 = /^(([\da-fA-F]{1,4}):){8}$/
        return ipv4.test(IP + ".") ? "IPv4" : ipv6.test(IP + ":") ? "IPv6" : "Neither";
    };
    

12. js事件托管：事件托管是指利用时间冒泡，指定一个时间处理程序，管理某一类型的事件。

    事件冒泡：在document.addEventListener的时候我们可以设置事件模型：事件冒泡，事件捕获

    优点：

    减少事件注册，节省内存。
    简化了dom节点更新时，相应事件的更新。

    缺点：
    利用事件冒泡的原理，不支持不冒泡的事件；
    层级过多，冒泡过程中，可能会被某层阻止掉。
    理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在ol上代理li，而不是在document上代理li。
    把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

13. 如何提高网页加载速度：

    网页加载顺序：1. DNS查找 2. 下载并渲染HTML文件 3. 下载并执行css及js组件 4. 下载图片

    按提升幅度排序：

    1. 减少DNS查找。在DNS查找完成前，所有的文件下载都无法执行。DNS查找顺序：浏览器缓存》系统缓存》路由器缓存》ISP DNS缓存》递归搜索
    2. CSS优先加载，JS延迟加载。在解析HTML文件，构建DOM树时，一旦遇到link标记时，即遇到css样式表，将其下载，便可以立即构建渲染树，从而呈现页面效果。而遇到script标记，即js脚本，将立即阻塞DOM树的构建，将控制权交给JS引擎，等待JS引擎运行完毕，浏览器才会从中断的地方恢复渲染树的构建。因此我们需要将js脚本放置到页面的底部，或者让js脚本异步或延迟加载。
    3. 减少http请求。常用：将小图片合成为一个大图片，提升显著。
    4. 缩小文件。http请求中资源越大，时间越长。使用图片压缩等方式缩小文件。
    5. 利用缓存。避免在html文件中使用style标签和script标签。将js和css文件分离出来，便于利用缓存，提高页面的加载速度。
    6. 代码优化。

14. var s='';
    console.log(!s);
    // 输出true
    

15. js 正则表达式：在对字符串进行操作时使用很便利。（待补充）

16. AJAX ：异步js和xml（ajax应用程序可能使用xml来传输数据，但数据作为纯文本或json文本也同样常见）。优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。ajax核心是XMLHttpRequest对象。

17. Promise：用于表示一个异步操作的最终完成或失败，及其结果值。一个Promise必定为以下状态之一：待定（pending），已兑现（fulfilled，或解决resolved），已拒绝（rejected）。

18. http状态码：1xx：服务器收到请求，需要请求者继续执行操作。2xx：成功，操作被成功接收并处理。3xx：重定向，需要进一步操作以完成请求。4xx：客户端错误，请求包含语法错误或无法完成请求。5xx：服务器错误，服务器在处理请求的过程中发生了错误。常见：200：OK，请求成功，一般用于GET和POST请求。201：Created，已创建，成功请求并创建了新资源。202：Accepted，已接收，已接受请求，但处理未完成。301：Moved Permanently，永久移动，请求的资源已被永久移动到新URI，返回信息会包括新URI，浏览器会自动重定向到新URI。302：Found，临时移动，与301相似，但只是临时移动。400：Bad Request，客户端请求的语法错误，服务器无法理解。401：Unauthorized，请求要求用户的身份认证。403：Forbidden，服务器理解客户端的请求，但是拒绝执行该请求。404：Not Found，服务器无法根据客户端的请求找到资源或页面。408：Request Time-out，服务器等待客户端发送的请求时间过长，超时。500：Internal Server Error，服务器内部错误，无法完成请求。

19. 跨域：跨域是指浏览器允许向服务器发送跨域请求，从而克服ajax只能同源使用的限制。同源策略：指协议，域名，端口三者相同。同源导致：cookie，LocalStorage，IndexDB无法获取，DOM和js对象无法获得，ajax请求不能发送。解决方法：1.使用CORS（跨域资源共享）， 2.使用JSONP， 3.nginx反向代理，

20. js 原型链： js不能接口继承，只能实现继承。实现继承主要通过原型链实现。基本思想就是通过原型继承多个引用类型的属性和方法。构造函数，原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指回原型。如果原型也是另一个原型的实例，就意味着这个原型本身有一个内部指针指向另一个原型，相应的另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。

21. 什么是虚拟DOM？

    一个普通的js对象，包含tag，props，children三个属性。

    <div id="app">
        <p class="text">
            hello world!
        </p>
    </div>
    

    {
        tag:'div',
            props:{
                id:'app'
            },
            children:[
                {
                    tag:'p',
                    props:{
                        className:'text'
                    },
                    children:[
                        'hello world!'
                    ]
                }
            ]
    }
    

    DOM是树形结构，可以使用js对象进行简单的表示。原生DOM规范复杂，创建空的div也代价很高。虚拟DOM在DOM发生变化时，通过diff算法对比原生js对象，计算出需要变更的DOM，然后只对需要变更的DOM进行操作，不更新整个视图。

    虚拟DOM最大的优势：抽象了原本的渲染过程，实现了跨平台的能力。