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

缺乏、安全感 2022-11-27 06:57 175阅读 0赞

**目录**

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

2.简单介绍一下Promise，它解决了什么问题？

3.position : absolute和float属性的异同

4.Cookie和Session有什么联系和区别？

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

6.css水平、垂直居中的写法，请至少写出4种（请写出垂直水平居中的实现方法）

7.对MVC和MVVM的理解？

8.vue-router有哪些钩子函数？

9.display : none和visiable : hidden区别

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

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

12.HTML5有哪些新特性？

13.介绍一下Vue的生命周期钩子函数

14.Vue有哪些指令，各自的用处是什么？

15.请写出css优先级

16.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

17.在以下元素，哪些是空元素？

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

--------------------

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

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

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

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

JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会**按照固定的时间间隔周期性的执行**。

不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后在函数中使用这些变量，直至函数结束，而闭包中由于内部函数的原因，外部函数并不能算是结束。

## 2.简单介绍一下Promise，它解决了什么问题？ ##

Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：**pending(等待态)，fulfiled(成功态)，rejected(失败态)**；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。Promise 规范中还规定了 Promise 中必须有 then 方法，这个方法也是实现异步的链式操作的基本。

Promise解决的问题：

（1）回调地狱问题

*  异步的嵌套可称之为回调地狱，回调地狱有两个很典型的问题就是可读性问题和信任问题

（2）可读性问题

（3）信任问题（也称控制反转问题）

*  对于回调过早的问题，由于Promise只能是异步的，所以不会出现异步的同步调用。即便是在决议之前的错误，也是异步的，并不是会产生同步（调用过早）的困扰。
 *  对于回调过晚或没有调用的问题，Promise本身不会回调过晚，只要决议了，它就会按照规定运行。所以不会存在回调过晚或没有调用的问题
 *  对于回调次数太少或太多的问题，由于Promise只能被决议一次，且决议之后无法改变，所以，即便是多次回调，也不会影响结果，决议之后的调用都会被忽略。

## 3.position : absolute和float属性的异同 ##

两者的共同点：对行内元素设置float或absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

两者的不同点：float仍会占位置，position会覆盖文档流中的其他元素。

网友总结的图如下：

![70][]

## 4.Cookie和Session有什么联系和区别？ ##

cookie：

在网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这个问题，第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。

session：

session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器（易伪造、不安全），而session存储在服务器端（会消耗服务器资源）。存储在服务器的数据会更加的安全，不容易被窃取。其次，Cookie 只能保存ASCII字符串，如果是Unicode字符或者二进制数据需要先进行编码。Cookie中也不能直接存取Java对象。 Session能够存取很多类型的数据，包括String、Integer、List、Map等，Session中也可以保存Java对象。

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

*  vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。
 *  vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 \{ \{\}\}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

## 6.css水平、垂直居中的写法，请至少写出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;

（2）垂直居中：

*  文本垂直居中，设置父元素`line-height`为`height`值
 *  如果元素为绝对定位（或相对定位），可以设置父元素position为relative，高度固定时设置top:0;bottom:0;margin:auto
 *  如果元素为绝对定位（或相对定位），可以设置父元素position为relative，高度固定时设置top`:50%，margin-top`值为高度一半的负值
 *  使用`flex`布局，设置父元素display:flex;同时设置align-items: center;
 *  使用老版`flex`布局，设置父元素display: -webkit-box;同时设置-webkit-box-align: center;
 *  将显示方式设置为表格，设置父元素display: table-cell;同时设置vertical-align: middle;

## 7.对MVC和MVVM的理解？ ##

(1)MVC(Model View Controller)是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

(2)MVVM是 Model-View-ViewModel的缩写，即模型-视图-视图模型，是一种设计思想。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；

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

ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

## 8.vue-router有哪些钩子函数？ ##

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

每次路由跳转，都会执行beforeEach和afterEach，一般写在main.js可以做权限控制

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个钩子函数！**

## 9.display : 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接口使用更方便

## 12.HTML5有哪些新特性？ ##

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

*  新增选择器`document.querySelector`、`document.querySelectorAll`
 *  拖拽释放(`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请求

create---beforeMount之间 vue会在options中查找有没有el选项，有就把它作为模板，没有就通过vm.$mount()  去挂载

created之后有个判断，先看你有没有el属性，在看看有没有模板属性，有模板属性呢，就会把模板上的东西渲染出去，没有模板属性呢，就把el上的东西当做模板渲染出去，

created-boforeMount的过程就是找模板，而模板都是虚拟的

**beforeMount()\{\}****：**vue会将el对应的模板 加到$el中去,但是还没有挂载出去，页面没有显示

**mounted()\{\}**：页面加载出来

**beforeUpdate()\{\}**：数据更新前，在虚拟dom中使用differ算法，在内存中实现的，mounted之前的过程就不管了。如果想看属性的变化，

在这个阶段可以使用watch(属性监听)这个方法监听属性

**update()\{\}**：更新完了，在渲染，谁改变了渲染谁，不是整个dom树重新渲染

**beforeDestroy()\{\}**：销毁之后

destroy销毁，实例销毁需要人为触发

销毁：之前渲染好的保持不变，保留下来，后面再使用这个实例就不起作用了

Vm.$destroy()   进行销毁

**destroyed()\{\}**：销毁之后

简述一下每个周期具体适合那些场景：

**beforeDestroy****：**可以在这加个loading事件，在加载实例是触发

**created****：**初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

**mouted****：**挂载元素，获取到DOM节点

**updated****：**如果对数据统一处理，在这里写上相应函数

**beforeDestroy****：**可以做一个确认停止事件的确认框

**nextTick****：**更新数据后立即操作Dom

## 14.Vue有哪些指令，各自的用处是什么？ ##

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优先级 ##

优先级关系：！important（在样式属性后不加“;”，在！important后加分号） > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符 > 继承 > 浏览器默认属性

CSS选择器分类

*  全局选择器（通配符\*）
 *  标签选择器（body，div，p，ul，li）
 *  类选择器（.）
 *  ID选择器（\#）
 *  组合选择器（.head .head\_loge，两选择器之间用空格隔开）
 *  后代选择器（\#head .nav li ul，从父级到子孙集的选择器）
 *  子选择器（div>p）
 *  群组选择器（div，span，img\{color：red；\}，即将具有相同样式的标签分组显示）
 *  继承选择器（div p，两选择器用空格键分开）
 *  伪类选择器（链接样式a元素的伪类：:link(未被访问)，:visited(已访问)，:active(被选择)，:hover(当鼠标悬停在链接上)）
 *  字符串匹配的属性选择符（^(开始)，$(中间)，\*(结尾)）
 *  css相邻兄弟选择器（如h1+p）

CSS选择器权值：是由四个级别和各级别出现次数决定的  
四个级别：行内样式，id选择器，class选择器，标签  
每个规则对应一个初始值0,0,0,0

*  若是 行内选择器，则加1、0、0、0
 *  若是 id选择器，则加0、1、0、0
 *  若是 类选择器/属性选择器/伪类选择器，则分别加0、0、1、0
 *  若是 元素选择器/伪元素选择器，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

优先级相同时，则采用就近原则，选择最后出现的样式

## 16.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

标准模型和IE模型的区别就在于宽和高的计算方式不同，标准模型的宽度和高度指的就是content的宽度和高度，它不包含padding和border，IE模型的宽度和高度是计算padding和border的，如果宽度都设置为200px，对于IE模型来说，200px包含了padding和border，如果IE模型的padding是10px，无border，那么对应的content只能是180px，高度亦是如此。

CSS如何设置这两种模型

通过CSS3中的属性box-sizing:content-box;设置成标准模型；box-sizing:border-box;设置成IE模型。浏览器默认的方式是content-box

JS如何设置获取盒子模型对应的宽和高

DOM.style.width/height（并不能拿到所有的宽和高，只能拿到内联样式的宽和高，也就是在div标签内写style的写法，其他两种CSS写法是取不到宽高的）  
DOM.currentStyle.width/height（拿到浏览器渲染后的宽高，但这个属性只有IE支持）  
window.getComputedStyle(DOM).width/height（与上一种原理相似，但这种支持大多数浏览器，兼容性更好）  
DOM.getBoundingClientRect().width/height（经常适用的场景是计算一个元素的绝对位置，这个绝对位置是根据视窗的绝对位置，getBoundingClientRect()这个方法拿到的有4个元素：left,top,width,height）

## 17.在以下元素，哪些是空元素？ ##

a) img

b) span

c) meta

d) input

e) dd

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

"a"

以上皆是本人目前在广州找实习期间亲身经历过的笔试题中的简答题，部分答案源于网上，如有错漏或有更好的答案也欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！

[前端][Link 1]开发交流QQ群：761614159

求职[前端][Link 1]开发的小伙伴可以进群交流一下！

[70]: /images/20221124/ac02701ff8914537a0f856fb51846dd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221124/751ee533911a49a0887cba0f6e985b49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221124/755968c0386643c4ac814bf38d84a106.png
[Link 1]: https://www.nowcoder.com/jump/super-jump/word?word=%E5%89%8D%E7%AB%AF