每日3+3前端面试题(2020.12.17) 怼烎@ 2021-07-24 22:39 243阅读 0赞 ### 每日+3+3 ### * HTML * * 1.页面刷新时sessionStroage会变(会清空)吗? * 2.请实现一个文章阅读的进度条 * CSS * * 1.translate3D有什么作用 * 2.举例说说你对white-space属性的理解 * JS * * Number.call(Number, undefined, 0)何解? * Number.call.call(Number, undefined, 0) 何解? * ReferenceError和TypeError有什么区别 * Vue * * 1.Vue使用全局变量 * 2.怎么解决vue打包后静态资源图片失效的问题? * 网络 * * 1.GET 请求和 POST 请求的区别 * 2.什么是 session,有哪些实现 session 的机制 * NodeJs * * 说说你对Node模块的理解 # 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属性的理解 ## 控制文本内容如何展示: <table> <thead> <tr> <th>值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>normal 默认</td> <td>空白会被浏览器忽略。</td> </tr> <tr> <td>pre</td> <td>空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。</pre></td> </tr> <tr> <td>nowrap</td> <td>文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。</td> </tr> <tr> <td>pre-wrap</td> <td>保留空白符序列,但是正常地进行换行。</td> </tr> <tr> <td>pre-line</td> <td>合并空白符序列,但是保留换行符。</td> </tr> <tr> <td>inherit</td> <td>规定应该从父元素继承 white-space 属性的值</td> </tr> </tbody> </table> # 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 });
相关 前端面试题 事件代理优点有哪些? 可以为将来元素绑定事件 减少事件注册 什么是事件对象? 保存调用该事件详细信息的一个参数,没有固定命名 li与li之间有看不见的 本是古典 何须时尚/ 2022年05月21日 00:23/ 0 赞/ 273 阅读
相关 前端面试题 [前端面试题《CSS》][CSS] [前端面试题《JS》][JS] [前端面试题《vue》][vue] [前端面试题《网络&浏览器》][L £神魔★判官ぃ/ 2022年05月15日 18:12/ 0 赞/ 457 阅读
相关 前端面试题 一、532道前端真实大厂面试题 1.express和koa的对比,两者中间件的原理,koa捕获异常多种情况说一下 2.你项目里用到第三方登录涉及的oAuth(JWT)协 以你之姓@/ 2022年05月09日 12:04/ 0 赞/ 292 阅读
相关 前端面试题 2018 vue前端面试题 1、active-class是哪个组件的属性?嵌套路由怎么定义? vue-router模块的router-link组件 2、怎么定义 灰太狼/ 2022年03月26日 14:10/ 0 赞/ 218 阅读
相关 前端面试题 今天看到一份某大厂的前端面试题,自己看了看挺简单的,由于我是即将要面临找工作实习的大学生,所以想分享给大家。 1. 给String定义一个doRepate方法,该方法接受一 ╰半橙微兮°/ 2022年01月19日 02:55/ 0 赞/ 307 阅读
相关 前端面试题 1. css的三种盒模型 c s s 的 两 种 盒 模 型 = \{ w 3 c 标 准 盒 模 型 I E 盒 模 型 弹 性 盒 模 型 css的两种盒模型=\\ 古城微笑少年丶/ 2021年11月11日 07:44/ 0 赞/ 393 阅读
相关 前端面试题 前端面试题汇总 一、HTML和CSS 21 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 2. 每个HTML文件里开头都有个很重要的东西,Do 不念不忘少年蓝@/ 2021年11月05日 04:44/ 0 赞/ 550 阅读
相关 前端面试题 对闭包的理解 [http://www.ruanyifeng.com/blog/2009/08/learning\_javascript\_closures.html][h 蔚落/ 2021年10月19日 00:20/ 0 赞/ 380 阅读
相关 前端面试题 版权声明:本文为博主【小北】原创文章,如要转载请评论回复。个人前端公众号:前端你别闹,JS前端实用开发QQ群 :147250970 欢迎加入~! ![Center][] 古城微笑少年丶/ 2021年10月08日 06:16/ 0 赞/ 423 阅读
相关 前端面试题(每日一更) 一,什么是MVVM? 二、写React和vue项目时为什么要在列表组件中写key,其作用是什么? 三,TCP三次握手和四次挥手 四、ES5和ES6 的继承除了写法以 我不是女神ヾ/ 2021年10月01日 05:34/ 0 赞/ 243 阅读
还没有评论,来说两句吧...