Jack N @ GitHub

Full stack engineer, focus on: Angular/React, node.js/.Net

0%

前端(Fontend)面试题汇总

前端(Fontend)面试题汇总

1. http 1.1/2.0 新增加的功能

HTTP1.1

  1. 缓存处理,在 HTTP1.0 中主要使用 header 来控制缓存策略。
  2. 带宽优化及网络连接的使用,HTTP1.1 则在请求头引入了 range 头域,它允许只请求资源的某个部分, 并且支持断点续传。
  3. 错误通知的管理,在 HTTP1.1 中新增了 24 个错误状态响应码,如 409(Conflict)表示请求的资源与资源的当前状态发生冲突;410(Gone)表示服务器上的某个资源被永久性的删除。
  4. Host 头处理,在 HTTP1.0 中认为每台服务器都绑定一个唯一的 IP 地址,因此,请求消息中的 URL 并没有传递主机名(hostname)。但随着虚拟主机技术的发展,在一台物理服务器上可以存在多个虚拟主机(Multi-homed Web Servers),并且它们共享一个 IP 地址。HTTP1.1 的请求消息和响应消息都应支持 Host 头域,且请求消息中如果没有 Host 头域会报告一个错误(400 Bad Request)。
  5. 长连接,HTTP 1.1 支持长连接(PersistentConnection)和请求的流水线(Pipelining)处理,在一个 TCP 连接上可以传送多个 HTTP 请求和响应. (Connection: keep-alive)

HTTP2.0 大幅度的提高了 web 性能,进一步减少了网络的延迟。实现低延迟高吞吐量。

  1. 二进制分帧 (二进制格式编码)
  2. 首部压缩 (header)
  3. 多路复用 (HTTP2.0 可以在共享 TCP 连接的基础上同时发送请求和响应,避免 HTTP 旧版本的队头阻塞问题)
  4. 请求优先级
  5. 服务器推送 (服务端根据客户端的请求,提前返回多个响应,推送额外的资源给客户端。)

2. 用户输入 URL 到浏览器显现给用户页面经过了什么过程

  1. 用户输入 URL,浏览器获取到 URL
  2. 检查缓存,如果有有效缓存,直接加载
  3. 浏览器(应用层)进行 DNS 解析(直接输入 IP 地址既跳过该步骤)
  4. 根据解析出的 IP 地址+端口,浏览器(应用层)发起 HTTP 请求
  5. 请求到达传输层,tcp 协议为传输报文提供可靠的字节流传输服务,它通过三次握手等手段来保证传输过程中的安全可靠。通过对大块数据的分割成一个个报文段的方式提供给大量数据的便携传输。
  6. 服务器端收到发送方的 HTTP 请求之后,进行请求文件资源(如 HTML 页面)的寻找并响应报文
  7. 客户端收到返回内容后,处理 html
  8. 解析 html,生成 dom 树
  9. CSS 解析,为 DOM 中元素加入样式
  10. javascript 解析处理,更改 dom 树
  11. 进行页面渲染
  12. 重排、重绘

3. HTML5 的新特性

  1. 新的内容标签:header nav content footer article 1. aside
  2. 更好的单元格体系:
  3. 音频、视频 API:video radio
  4. 画布(Canvas) API
  5. 地理(Geolocation) API
  6. 网页存储(Web storage) 1. API:localStorage,sessionStorage
  7. 拖拽释放(Drag and drop) API

4. 对浏览器内核的理解

主要分成两部分:渲染引擎(layout engine 或 Rendering Engine)和 JS 引擎。

  1. 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
  2. JS 引擎则:解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。

5. cookies,sessionStorage 和 localStorage

cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。

存储大小:
cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。

有期时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭

6. 如何实现浏览器内多个标签页之间的通

WebSocket、SharedWorker;也可以调用 localstorge、cookies 等本地存储方式;

7. script标签中的async、defer属性的作用

  1. Async: 可选属性。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。
  2. Defer: 可选属性。标识脚本可以延迟到文档完全被解析和显示之后再执行。