前端面试总结——DOM与HTTP

319 阅读2分钟

DOM

1. 必考:事件委托

错误版(但是可能能过)

 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // 执行某个函数
     }
 })
bug 在于,如果用户点击的是 li 里面的 span,就没法触发 fn,这显然不对。

高级版

 function delegate(element, eventType, selector, fn) {
     element.addEventListener(eventType, e => {
       let el = e.target
       while (!el.matches(selector)) {
         if (element === el) {
           el = null
           break
         }
         el = el.parentNode
       }
       el && fn.call(el, e, el)
     })
     return element
   }
思路是点击 span 后,递归遍历 span 的祖先元素看其中有没有 ul 里面的 li。

2. 曾考:用 mouse 事件写一个可拖曳的 div

参考代码:jsbin.com/munuzureya/…

HTTP

3. 必考:HTTP 状态码知道哪些?分别什么意思?

2xx 表示成功

3xx 表示需要进一步操作

4xx 表示浏览器方面出错

5xx 表示服务器方面出错

完整参考 www.runoob.com/http/http-s…

3. 大公司必考:HTTP 缓存有哪几种?

需要详细的了解 ETag、CacheControl、Expires 的异同

参考 imweb.io/topic/5795d…

答题要点: ETag 是通过对比浏览器和服务器资源的特征值(如MD5)来决定是否要发送文件内容,如果一样就只发送 304(not modified) Expires 是设置过期时间(绝对时间),但是如果用户的本地时间错乱了,可能会有问题 CacheControl: max-age=3600 是设置过期时长(相对时间),跟本地时间无关。

4. 必考:GET 和 POST 的区别

错解,但是能过面试

GET在浏览器回退时是无害的,而POST会再次提交请求。

GET产生的URL地址可以被加入收藏栏,而POST不可以。

GET请求会被浏览器主动cache,而POST不会,除非手动设置。

GET请求只能进行url编码,而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。

GET请求在URL中传送的参数是有长度限制的,而POST么有。

对参数的数据类型,GET只接受ASCII字符,而POST没有限制。

GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。

GET参数通过URL传递,POST放在Request body中。

正解

就一个区别:语义——GET 用于获取资源,POST 用于提交资源。

想装逼请参考 zhuanlan.zhihu.com/p/22536382

5. Cookie VS LocalStorage VS SessionStorage VS Session

Cookie VS LocalStorage

主要区别是 Cookie 会被发送到服务器,而 LocalStorage 不会

Cookie 一般最大 4k,LocalStorage 可以用 5Mb 甚至 10Mb(各浏览器不同)

LocalStorage VS SessionStorage

LocalStorage 一般不会自动过期(除非用户手动清除),而 SessionStorage 在回话结束时过期(如关闭浏览器)

Cookie VS Session

Cookie 存在浏览器的文件里,Session 存在服务器的文件里

Session 是基于 Cookie 实现的,具体做法就是把 SessionID 存在 Cookie 里