关于JS面试题

 1. 利用冒泡和不利用冒泡的差别

答案：

• 绑定位置不同: 不利用冒泡绑定在目标元素上，利用冒泡绑定在父元素上
• 监听对象的个数不同: 不利用冒泡会反复创建多个监听，利用冒泡始终只有一个监听
• 动态生成的元素: 不利用冒泡无法自动获得事件处理函数，必须反复绑定

      利用冒泡可让动态添加的子元素自动获得父元素的处理函数，无需反复绑定

2.列举DOM中常用优化

答案：

• 查找时，如果之用一个条件就可查询出结果时，优先选择按HTML查找。如果查找条件复杂，则优先选择易用的按选择器查找
• 添加时，尽量减少操作DOM树的次数，减少重排重绘。如果同时添加父元素和子元素，应先将子元素添加到到父元素，最后再将父元素添加到DOM树。如果添加多个平级子元素，则应先将子元素添加到文档片段，最后，再将文档片段添加到DOM树
• 修改时，尽量减少重排重绘。如果同时修改多个元素的内容或样式，应尽量使用innerHTML和cssText方式修改元素的内容和样式。应使用class批量修改样式
• 事件绑定时，应尽量利用冒泡减少事件监听的个数。

3.描述一下DOM事件模型  

答案:

•            捕获、目标触发、冒泡
•            捕获阶段: 由外向内，依次记录各级父元素上的事件处理函数。只记录，暂不触发。
•            目标触发：优先触发目标元素上的事件处理函数。
•            冒泡: 由内向外，依次触发各级父元素上的事件处理函数。

  • 4.谈谈事件委托/代理           

    • 答案:

                  事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件

                   优点：

                      -   可以减少事件注册，节省大量内存占用

                      -   可以将事件应用于动态添加的子元素上

                    缺点： 使用不当会造成事件在不应该触发时触发

      • 5.前端优化的方法  

        • 答案:

                          1.减少dom操作

                          2.部署前，图片压缩，代码压缩

                          3.优化js代码结构，减少冗余代码

                          4.减少http请求，合理设置 HTTP缓存

                          5.使用内容分发cdn加速

                          6.静态资源缓存

                          7.图片延迟加载

          6.$的原理

          •               

            答案：

       $(“选择器”) 是先查找DOM元素，再将DOM元素放入jQuery对象中

                        其中自带优化:

                        如果选择器是#id，则自动调用getElementById

                        如果选择器是.class，则自动调用getElementsByClassName

                        如果选择器是标签名，则自动调用getElementsByTagName

                        否则，其它选择器，都自动调用querySelectorAll()

        $(DOM元素) 是直接将DOM元素放入jQuery对象中

        $(“HTML片段”) 是创建一个新元素

        $(function(){}) 是绑定事件，在DOM内容加载后就提前触发。

7.实现跨域访问有几种方式

答案：主要有两种     

• JSONP:
• 客户端: 客户端动态添加script元素，用script发送请求，代替ajax请求，并携带客户端一个函数名到服务端
• 服务端: 接收客户端发来的函数名，将函数名和要返回的数据拼接为一条可执行的js语句，返回
• CORS: Cross-Origin Resources Sharing
• 客户端正常发送ajax请求，服务端定义响应头，允许指定来源的请求跨域访问:
• res.writeHead(200,{
•    …，
•    “Access-Control-Allow-Origin”:”允许的请求来源域名”
• })

• 8.请解释一下 JavaScript 的同源策略, 为什么要有同源限制

• 答案：

  概念:同源策略是客户端脚本（尤其是 Javascript）的重要的安全度量标准。它最早出自 Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议

  指一段脚本只能读取来自同一来源的窗口和文档的属性

  我们举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了。

  缺点: 现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节