前端面试

Midsummer
190 阅读6分钟

1.cookie、sessionStorage、localStorage区别

  • 存储大不同
    • cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识；
    • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，sessionStorage,localStorage约5M。
  • 数据有效期不同
    • cookie：只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；
    • sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
    • localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。
  • 作用域不同
    • cookie也是在所有同源窗口中都是共享的；
    • sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
    • localStorage 在所有同源窗口中都是共享的。
window.sessionStorage
//保存数据语法：
sessionStorage.setItem("key", "value");
//读取数据语法：
var lastname = sessionStorage.getItem("key");
//删除指定键的数据语法：
sessionStorage.removeItem("key");
//删除所有数据：
sessionStorage.clear();

2.同源

URL结果原因
store.company.com/dir2/other.…同源只有路径不同
store.company.com/dir/inner/a…同源只有路径不同
store.company.com/secure.html失败协议不同
store.company.com:81/dir/etc.htm…失败端口不同 ( http:// 默认端口是80)
news.company.com/dir/other.h…失败主机不同

3. 浏览器在生成页面的时候，会生成那两颗树？

构造两棵树，DOM树和CSSOM规则树

当浏览器接收到服务器相应来的HTML文档后，会遍历文档节点，生成DOM树，

CSSOM规则树由浏览器解析CSS文件生成，

4.浏览器缓存

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

种类获取资源形式状态码发送请求到服务器
强缓存从缓存取200（from cache）否，直接从缓存取
协商缓存从缓存取304（not modified）是，通过服务器来告知缓存是否可用

5.前端优化

  • 降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
  • 加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
  • 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。
  • 渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

6.HTTP支持的方法

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

7.如何画一个三角形

div {
  width:0px;
  height:0px;
  border-top:10px solid red;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid transparent;
}

8.浏览器工作过程

  • 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面；
  • 把请求回来的 HTML 代码经过解析，构建成 DOM 树；
  • 计算 DOM 树上的 CSS 属性；
  • 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图；
  • 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度；
  • 合成之后，再绘制到界面上。

9.tcp三次握手

  • 第一次握手：S只可以确认 自己可以接受C发送的报文段
  • 第二次握手：C可以确认 S收到了自己发送的报文段，并且可以确认 自己可以接受S发送的报文段
  • 第三次握手：S可以确认 C收到了自己发送的报文段

10.TCP和UDP的区别

  • TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。
  • TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
  • TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
  • TCP只能是1对1的，UDP支持1对1,1对多。
  • TCP的首部较大为20字节，而UDP只有8字节。
  • TCP是面向连接的可靠性传输，而UDP是不可靠的。

11.WebSocket

  • 什么是WebSocket?

    WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个

  • WebSocket是什么样的协议，具体有什么优点？

    HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。

12.HTML5 drag api

  • dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发；
  • darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发；
  • dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发；
  • dragover：事件主体是目标元素，在被拖放在某元素内移动时触发；
  • dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发；
  • drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发；
  • dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

13.http2.0

  • http和https的区别，相比于http,https是基于ssl加密的http协议;
  • 提升访问速度；
  • 允许多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞；
  • 二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码。

14.Cookie如何防范XSS攻击

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

结果应该是这样的：Set-Cookie=<cookie-value>.....

15.addEventListener参数

addEventListener(event, function, useCapture)

其中，event指定事件名；function指定要事件触发时执行的函数；useCapture指定事件是否在捕获或冒泡阶段执行。

15.link标签和import标签的区别

  • link属于html标签，而@import是css提供的
  • 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
  • link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
  • link方式样式的权重高于@import的。

16.transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

17.BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）

avatar
文章
阅读
粉丝