字节暑期实习前端二面
介绍项目
如何实现文件下载
通过FileReader实例的readAsArrayBuffer方法，获取文件的二进制数据
使用Blob这个构造函数创建一个blob实例，结合URL.createObjectURL方法创建一个包含源内容的字符串
创建一个a标签，将a标签的href属性指定为URLL.createObjectURL方法返回的字符串，download指定为文件名称
调用a标签的click方法实现文件下载
例如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="ie=edge" http-equiv="X-UA-Compatible"> <title>Title</title> </head> <body> <input id="file" name="img" type="file"> </body> <script> const element = document.querySelector('#file'); const fileReader = new FileReader() element.addEventListener('change', () => { // 获取文件对象 let file = element.files[0] // 获取文件对应的二进制数据 fileReader.readAsArrayBuffer(file) fileReader.onload = () => { // 创建blob实例 let blob = new Blob([fileReader.result], { type: file.type }) // 创建包含源内容的字符串 let url = URL.createObjectURL(blob) let a = document.createElement('a') a.href = url a.download = file.name // 下载文件 a.click() // 删除这个包含源内容的字符串，因为该字符串与文档相关联，避免内存泄漏 URL.revokeObjectURL(url) } }) </script> </html>
使用URL.createObjectURL这个方法需要注意什么
该方***创建一个字符串，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的document相绑定
需要调用URL.revokeObjectURL(url)从文档中移除该字符串，避免内存泄漏
服务器如何验证用户身份？
- cookie或者token
token过期了怎么办？
- token续签
- 已知token过期时间，在请求前根据时间差决定是否需要续签token
- 或者当返回401状态码的时候，根据当前用户是否登录决定是否续签token，未登录重定向到登录页
webpack如何配置压缩代码？
- html----html-webpack-plugin
- css----先提取css文件（mini-css-extract-plugin）---压缩css（css-minimizer-webpack-plugin）
- js----terser-webpack-plugin
- compression-webpack-plugin将文件压缩为gzip格式，在浏览器请求压缩后的.gz文件时，会通过浏览器内置的解码器解码.gz文件
- 配置tree-shaking删除无用代码，也可以压缩代码体积
使用tree-shaking需要注意什么？
- 项目的模块规范必须使用esmodule
- package.json中的sideEffects设置为false，表示整个项目没有副作用，可以进行tree-shaking处理
- 如果css文件通过@import引入的其他的css文件，说明该样式文件存在副作用，需要在sideEffects配置一个数组，值为对应的css文件名称
webpack压缩时，主要压缩了什么？
- 删除代码之间的空格
- 删除注释
- 减少变量名和函数名的长度，让变量名和函数名更短，打包出来变量名或者函数名基本只有一两个字母
将图片转换为base64编码和不转换有啥区别吗？
- 好处就是，将图片转换为base64字符串，让图片可以通过内联的方式被引入，减少了网络请求的带宽消耗
- 缺点就是内容编码后体积变大，编码和解码需要额外的开销
base64如何编码，为啥非要叫base64，不叫63？
- 我。。。（凉）
- 早期文件传输使用的ascll编码，对于图片，视频等文件处理不好，为解决这个问题base64编码应运而生
- base64有一张数值与字符的对应表，数字从0-63，每个数字对应一个字符
- 这些字符包括a-z A-Z 0-9 + / 一共64个，所以叫base64
除了base64，图片还可以转换为那种形式的编码，然后直接引入？
- 我的乖乖，不晓得（哦豁）
gzip如何编码？
- 啊这。。。。（寄）
- 将文件打包成二进制数据，在http协议的两端，比如浏览器和服务器，通过内置的编码器和解码器进行数据传输吧
实现es6的Set
class MySet { constructor() { this.size = 0; this.list = {}; } add(val) { if (!this.list[val]) { this.list[val] = val; this.size++; return true; } return false; } has(val) { return this.list.hasOwnProperty(val); } delete(val) { if (this.list[val]) { delete this.list[val]; this.size--; return true; } return false; } clear() { this.list = {}; this.size = 0; } keys() { return Object.keys(this.list); } values() { return Object.values(this.list); } entries() { return Object.entries(this.list); } forEach(callback) { let keys = this.keys(); for (let i = 0; i < keys.length; i++) { callback(keys[i], keys[i], this.list); } } }
实现哈希表
class Hash { constructor() { this.map = []; this.size = 0; this.max = 64; } getHash(key) { let code = 0; for (let i = 0; i < key.length; i++) { code += key.charCodeAt(i); } return code % this.max; } set(key, val) { if (this.size >= this.max) { return false; } let index = this.getHash(key); while (this.map[index]) { index = (index + 1) % this.max; } this.map[index] = val; this.size++; } has(key) { return !!this.map[this.getHash(key)]; } get(key) { return this.map[this.getHash(key)]; } delete(key) { if (this.has(key)) { this.map[this.getHash(key)] = undefined; this.size--; } } clear() { this.map = []; this.size = 0; } }
