前端开发实习笔试题(简答题)

2023年11月25日发(作者：)

前端开发实习笔试题（简答题）

⽬录

1.说说你知道Javascript的内存回收机制

内存回收机制在回收内存时,⾸先会判断该对象是否被其它对象引⽤.在确定没有其它对象引⽤便释放该对象内存区域。

Javascript具有⾃动垃圾回收机制(GC:Garbage Collecation)，也就是说，执⾏环境会负责管理代码执⾏过程中使⽤的内存。

原理：垃圾收集器会定期（周期性）找出那些不在继续使⽤的变量，然后释放其内存。

JavaScript垃圾回收的机制很简单：找出不再使⽤的变量，然后释放掉其占⽤的内存，但是这个过程不是实时的，因为其开销⽐较⼤，所以

垃圾回收器会按照固定的时间间隔周期性的执⾏。

不再使⽤的变量也就是⽣命周期结束的变量，当然只可能是局部变量，全局变量的⽣命周期直⾄浏览器卸载页⾯才会结束。局部变量只在函

数的执⾏过程中存在，⽽在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后在函数中使⽤这些变量，直⾄函数

结束，⽽闭包中由于内部函数的原因，外部函数并不能算是结束。

和Session有什么联系和区别？

cookie：

在⽹站中，http请求是⽆状态的。也就是说即使第⼀次和服务器连接后并且登录成功后，第⼆次请求服务器依然不能知道当前请求是哪个⽤

户。cookie的出现就是为了解决这个问题，第⼀次登录后服务器返回⼀些数据（cookie）给浏览器，然后浏览器保存在本地，当该⽤户发

送第⼆次请求的时候，就会⾃动的把上次请求存储的cookie数据⾃动的携带给服务器，服务器通过浏览器携带的数据就能判断当前⽤户是哪

个了。

session：

session和cookie的作⽤有点类似，都是为了存储⽤户相关的信息。不同的是，cookie是存储在本地浏览器（易伪造、不安全），⽽

session存储在服务器端（会消耗服务器资源）。存储在服务器的数据会更加的安全，不容易被窃取。其次，Cookie 只能保存ASCII字符

串，如果是Unicode字符或者⼆进制数据需要先进⾏编码。Cookie中也不能直接存取Java对象。 Session能够存取很多类型的数据，包括

String、Integer、List、Map等，Session中也可以保存Java对象。

是如何实现双向数据绑定的？原理是什么？

vue实现数据双向绑定主要是：采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Property() 来劫持各个属性的

setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把⼀个普通 Javascript 对象传给 Vue 实例来作为它

的 data 选项时，Vue 将遍历它的属性，⽤ Property() 将它们转为 getter/setter。⽤户看不到 getter/setter，但是

在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的⼊⼝，整合Observer，Compile和Watcher三者，通过Observer来监听⾃⼰的model

的数据变化，通过Compile来解析编译模板指令（vue中是⽤来解析 {{}}），最终利⽤watcher搭起observer和Compile之间的通信桥

梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

⽔平、垂直居中的写法，请⾄少写出4种（请写出垂直⽔平居中的实现⽅法）

（1）⽔平居中：

元素为⾏内元素，设置⽗元素text-align:center

如果元素宽度固定，可以设置左右margin为auto

如果元素为绝对定位（或相对定位），可以设置⽗元素position为relative，宽度固定时设置left:0;right:0;margin:auto

如果元素为绝对定位（或相对定位），可以设置⽗元素position为relative，宽度固定时设置left:50%，margin-left值为宽度⼀半的负值

使⽤flex布局，设置⽗元素display:flex;同时设置justify-content: center;

使⽤⽼版flex布局，设置⽗元素display: -webkit-box;同时设置-webkit-box-pack: center;

View：代表UI视图，负责数据的展⽰；

ViewModel：就是与界⾯(view)对应的Model。因为，数据库结构往往是不能直接跟界⾯控件⼀⼀对应上的，所以，需要再定义⼀个数据对

象专门对应view上的控件。⽽ViewModel的职责就是把model对象封装成可以显⽰和接受输⼊的界⾯数据对象。

-router有哪些钩⼦函数？

（1）全局路由钩⼦函数beforeEach和afterEach

每次路由跳转，都会执⾏beforeEach和afterEach，⼀般写在可以做权限控制

beforeEach函数有三个参数：

to:router即将进⼊的路由对象

from:当前导航即将离开的路由

next:Function,进⾏管道中的⼀个钩⼦，如果执⾏完了，则导航的状态就是 confirmed （确认的）；否则为false，终⽌导航。

afterEach函数不⽤传next()函数

这类钩⼦主要作⽤于全局,⼀般⽤来判断权限等操作

（2）单个路由钩⼦函数beforeEnter和beforeleave

beforeEnter有三个参数：to/from/next

单个路由钩⼦函数主要⽤于写某个指定路由跳转时需要执⾏的逻辑

（3）组件路由钩⼦函数beforeRouteEnter，beforeRouteUpdate,beforeRouteLeave

三个参数：to/from/next

beforeRouteEnter：进⼊这个组建路由之前

beforeRouteLeave：离开这个组建路由

beforeRouteUpdate：再本路由的下级路由切换才会触发beforeRouteUpdate

总共有7个钩⼦函数！

y : none和visiable : hidden区别

联系：它们都能让元素不可见

区别：

display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden不会让元素从渲染树消失，渲染时元素

继续占据空间，只是内容不可见

display: none是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改⼦孙节点属性⽆法显⽰；visibility: hidden是继承

属性，⼦孙节点消失由于继承了hidden，通过设置visibility: visible可以让⼦孙节点显式

修改常规流中元素的display通常会造成⽂档重排。修改visibility属性只会造成本元素的重绘

读屏器不会读取display: none元素内容；会读取visibility: hidden元素内容

10.你是怎么学习JS的？（请写出渠道：⽹站、书籍和⽅法）

⽹站：慕课⽹、bilibili、CSDN学院、简书、博客园、开源中国、github等；

书籍：JavaScript⾼级程序设计（第3版）、Java Web程序设计（慕课版）；

宝贵经验；

阅读源代码；

11.说⼀下localStorage、sessionStorage和cookie的区别

localStorage: localStorage 的⽣命周期是永久的，关闭页⾯或浏览器之后 localStorage 中的数据也不会消失。localStorage 除⾮

主动删除数据，否则数据永远不会消失

sessionStorage: sessionStorage 的⽣命周期是仅在当前会话下有效。sessionStorage 引⼊了⼀个“浏览器窗⼝”的概

念，sessionStorage 是在同源的窗⼝中始终存在的数据。只要这个浏览器窗⼝没有关闭，即使刷新页⾯或者进⼊同源另⼀个页⾯，数

据依然存在。但是 sessionStorage 在关闭了浏览器窗⼝后就会被销毁。同时独⽴的打开同⼀个窗⼝同⼀个页⾯，sessionStorage 也

是不⼀样的

cookie: cookie⽣命期为只在设置的cookie过期时间之前⼀直有效，即使窗⼝或浏览器关闭。 存放数据⼤⼩为4K左右, 有个数限制

（各浏览器不同），⼀般不能超过20个。缺点是不能储存⼤数据且不易读取

共同点：都是保存在浏览器端、且同源的

区别：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，⽽sessionStorage和

localStorage不会⾃动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径

下

存储⼤⼩限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很⼩的数据，如会话

标识。sessionStorage和localStorage虽然也有存储⼤⼩的限制，但⽐cookie⼤得多，可以达到5M或更⼤

数据有效期不同，sessionStorage：仅在当前浏览器窗⼝关闭之前有效；localStorage：始终有效，窗⼝或浏览器关闭也⼀直保存，

因此⽤作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗⼝关闭或浏览器关闭

作⽤域不同，sessionStorage不在不同的浏览器窗⼝中共享，即使是同⼀个页⾯；localstorage在所有同源窗⼝中都是共享的；

cookie也是在所有同源窗⼝中都是共享的

web Storage⽀持事件通知机制，可以将数据更新的通知发送给监听者

web Storage的api接⼝使⽤更⽅便

5有哪些新特性？

Html5 现在已经不是SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加

新增选择器elector、electorAll

拖拽释放(Drag and drop) API

媒体播放的video 和audio

本地存储localStorage 和sessionStorage

离线应⽤manifest

桌⾯通知Notifications

语意化标签article、footer、header、nav、section

增强表单控件calendar、date、time、email、url、search

地理位置Geolocation

多任务webworker

全双⼯通信协议websocket

历史管理history

跨域资源共享(CORS)Access-Control-Allow-Origin

页⾯可见性改变事件visibilitychange

跨窗⼝通信PostMessage

Form Data 对象

绘画canvas

13.介绍⼀下Vue的⽣命周期钩⼦函数

Vue 实例从创建到销毁的过程，就是⽣命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等⼀系

列过程，我们称这是 Vue 的⽣命周期。在vue组件中，组件的实例从创建前(beforeCreate)、创建后(created)、挂载前(beforeMount)、

挂载后(mounted)、更新前(beforeUptate)、更新后(updated)、销毁前(beforeDestroy)、销毁后(destroyed)⼀系列，即从创建到销毁

的整个过程，我们把它称之为vue组件的⼀个完整的⽣命周期。

beforeCreate(){}：实例初始化之前 数据没有加载 页⾯没有显⽰

debugger; 断点调试

往往在这个阶段做loading 请求状态

Created(){}：实例初始化后，请求到了数据，事件，属性等，但是没有加载，页⾯依然没有显⽰，在这个阶段，往往发送 ajax请求，http

请求

v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。

v-show：根据表达式之真假值，切换元素的display CSS 属性。

v-for：循环指令，基于⼀个数组或对象渲染⼀个列表，Vue 2.0 以上必须需配合key值使⽤。

v-bind：动态地绑定⼀个或多个特性，或⼀个组件prop到表达式。

v-on：⽤于监听指定元素的DOM事件，⽐如点击事件。绑定事件监听器。

v-model：实现表单输⼊和应⽤状态之间的双向绑定。

v-pre：跳过这个元素和它的⼦元素的编译过程。可以⽤来显⽰原始Mustache标签。跳过⼤量没有指令的节点会加快编译。

v-once：只渲染元素和组件⼀次，随后的重新渲染，元素/组件及其所有的⼦节点将被视为静态内容并跳过。这可以⽤于优化更新性能。

15.请写出css优先级

标准模型和IE模型的区别就在于宽和⾼的计算⽅式不同，标准模型的宽度和⾼度指的就是content的宽度和⾼度，它不包含padding和

border，IE模型的宽度和⾼度是计算padding和border的，如果宽度都设置为200px，对于IE模型来说，200px包含了padding和

e) dd

18.(window.a || (window.a = 'a')) 最后输出什么？为什么？