每日3+3前端面试题（2020.12.17）

HTML

1.页面刷新时sessionStroage会变（会清空）吗？

不会

SessionStroage 是数据页面会话级别的, 当你在打开这个页面的时候会被创建, 并且重新加载或恢复页面仍会保持原来的页面会话

2.请实现一个文章阅读的进度条

还是使用scroll监听事件，动态修改height和width
this.scrollTop + this.clientHeight == this.scrollHeight 到底了

CSS

1.translate3D有什么作用

使用 translate3d 方法bai可以让浏览器开du启GPU硬件加zhi速模式

2.举例说说你对white-space属性的理解

控制文本内容如何展示：

值	说明
normal 默认	空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值

JS

Number.call(Number, undefined, 0)何解？

call的第一参是this指向，Number无作用相当于Number(undefined, 0) 等于NAN（Number只接受一参）

Number.call.call(Number, undefined, 0) 何解？

按照上面的可化解为：
Number.call.call(Number, undefined, 0) === Number.call( undefined, 0) ；
然后：
Number.call( undefined, 0) === Number(0) 等于 0

ReferenceError和TypeError有什么区别

ReferenceError:引用出错
比如尝试访问未定义的变量，或者提前访问无提升的变量，都会引发这个错误：

console.log(foo);  // ReferenceError: foo is not defined
let foo = 1;

TypeError:类型出错。

众所周知JavaScript是一个弱类型的语言，这既是它的优点，也经常被人诟病。你永远也不知道 a + b 是在做数值加减还是字符串拼接，而且似乎 a + b 几乎从来也不会报错。

而tc39自 ES5 到 ES6 以来，将 TypeError 的频率几乎翻了4倍之多。目的就是为了规范和强调类型这一概念，避免过于模糊类型这一概念导致JavaScript对于语义的不确定性。

Symbol() + 1; // TypeError: Cannot convert a Symbol value to a number

({ toString: () =>({}) }) + 'a';  // TypeError: Cannot convert object to primitive value

这样使得JavaScript更为规范，当一个方法的参数需要一个 number 但却收到了一个 object，与其让它返回 NaN，不如果断地抛出 TypeError 吧。

Vue

1.Vue使用全局变量

使用prototype挂载使用mixin混入

2.怎么解决vue打包后静态资源图片失效的问题？

1、确定线上环境是否在根路径上，配置资源根目录，vue-cli2 和 vue-cli3 字段不一致（assetsPublicPath 和 publicPath ），如果项目是根路径上，用’/’，’./‘都行，如果是在’/hc’这个路径上，用’./’ 相对路径（需history模式），也可以用’/hc/’。 在’/hc’路径上，如果需要本地和线上保持一致，可以用环境做判断设置不同的publicPath值。
2、确定静态文件放置的位置。
①、如果放在public/static，不经过webpack打包， 放在public 又分使用绝对路径和相对路径。
②、如果放在assets， 经过webpack打包， 使用的是相对路径
3、路径是否是动态的，如果是动态，需要用require() 引入。

一般都是以下方式用的比较多

<img :src="require('../../../assets/images/xxx.png')" />

网络

1.GET 请求和 POST 请求的区别

1.GET请求在URL中传送的参数是有长度限制的，而POST没有
2.GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
3.GET请求能够缓存，因此绝大部分的 GET 请求都被 CDN 缓存起来了，大大减少了 Web 服务器的负担。
4.GET在浏览器回退时是无害的，而POST会再次提交请求
5.GET请求只能进行url编码，而POST支持多种编码方式
6.GET参数通过URL传递，POST放在Request body中

2.什么是 session，有哪些实现 session 的机制

session 是一种维持客户端与服务器端会话的机制。但是与 cookie 把会话信息保存在客户端本地不一样，session 把会话保留在浏览器端。

我们同样以登陆案例为例子讲解 session 的使用过程：

1.首先用户在客户端浏览器发起登陆请求

2.登陆成功后，服务端会把用户信息保存在服务端，并返回一个唯一的 session 标识给客户端浏览器。

3.客户端浏览器会把这个唯一的 session 标识保存在起来

4.以后再次访问 web 应用时，客户端浏览器会把这个唯一的 session 标识带上，这样服务端就能根据这个唯一标识找到用户信息。

看到这里可能会引起疑问：把唯一的 session 标识返回给客户端浏览器，然后保存起来，以后访问时带上，这难道不是 cookie 吗？

没错，session 只是一种会话机制，在许多 web 应用中，session 机制就是通过 cookie 来实现的。也就是说它只是使用了 cookie 的功能，并不是使用 cookie 完成会话保存。与 cookie 在保存客户端保存会话的机制相反，session 通过 cookie 的功能把会话信息保存到了服务端。

进一步地说，session 是一种维持服务端与客户端之间会话的机制，它可以有不同的实现。

以现在比较流行的小程序为例，阐述一个 session 的实现方案：

1.首先用户登陆后，需要把用户登陆信息保存在服务端，这里我们可以采用 redis。比如说给用户生成一个 userToken，然后以 userId 作为键，以 userToken 作为值保存到 redis 中，并在返回时把 userToken 带回给小程序端。

2.小程序端接收到 userToken 后把它缓存起来，以后每当访问后端服务时就把 userToken 带上。

3.在后续的服务中服务端只要拿着小程序端带来的 userToken 和 redis 中的 userToken 进行比对，就能确定用户的登陆状态了。

NodeJs

说说你对Node模块的理解

首先一个文件就是一个模块，每个模块都有自己的作用域，它分为系统的内置模块和用户自己依赖的模块
一般是使用module.exports导出，使用require引入

一般暴露出去的方法有

exports.a = function(){}  // 导出单个一个对象
module.exports.a = function(){} // 导出单个一个对象
module.exports.{ a:"66",b:function(){} }

node内部的模块封装器大致是这样的

(function(exports, require, module, __filename, __dirname){
// 模块的代码实际上在这里
    
   __filename	当前js文件所在的路径(当前模块的完整路径)
   			//C:\Users\yang\WebstormProjrcts\day01\01.node\04.module.js
    
   __dirname	当前js文件所在的目录(当前模块所在文件夹的完整路径)
 			//C:\Users\yang\WebstormProjrcts\day01\01.node
});