面试复盘|贝壳面试

一面

1. 自我介绍
2. HTML行内、块级元素都有哪些

   • 行内元素有：a b span img input select strong；

   • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

3. CSS盒模型：盒模型都是由四个部分组成的，分别是margin、border、padding和content。

   • 标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同

     • 标准盒模型的width和height属性的范围只包含了content，

     • IE盒模型的width和height属性的范围包含了border、padding和content。

   • 修改元素的box-sizing属性来改变元素的盒模型：

     • box-sizeing: content-box表示标准盒模型（默认值）

     • box-sizeing: border-box表示IE盒模型（怪异盒模型）

4. CSS可继承属性与不可继承属性有哪些

   • 无继承的属性：

     1. display：规定元素应该生成的框的类型

     2. 文本属性：

        • vertical-align：垂直文本对齐

        • text-decoration：规定添加到文本的装饰

        • text-shadow：文本阴影效果

        • white-space：空白符的处理

        • unicode-bidi：设置文本的方向

     3. 盒子模型的属性：width、height、margin、border、padding

     4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

     5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

     6. 生成内容属性：content、counter-reset、counter-increment

     7. 轮廓样式属性：outline-style、outline-width、outline-color、outline

     8. 页面样式属性：size、page-break-before、page-break-after

     9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

   • 有继承的属性：

     1. 字体系列属性

        • font-family：字体系列

        • font-weight：字体的粗细

        • font-size：字体的大小

        • font-style：字体的风格

     2. 文本系列属性

        • text-indent：文本缩进

        • text-align：文本水平对齐

        • line-height：行高

        • word-spacing：单词之间的间距

        • letter-spacing：中文或者字母之间的间距

        • text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）

        • color：文本颜色

     3. 元素可见性

        • visibility：控制元素显示隐藏

     4. 列表布局属性

        • list-style：列表风格，包括list-style-type、list-style-image等

     5. 光标属性

        • cursor：光标显示为何种形态
5. 水平垂直居中的实现

   • 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心

     .parent {
         position: relative;
     }
      
     .child {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
     } 

     
     

     
     

   • 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

     .parent {
         position: relative;
     }
      
     .child {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         margin: auto;
     } 

     
     

     
     

   • 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。

     .parent {
         position: relative;
     }
      
     .child {
         position: absolute;
         top: 50%;
         left: 50%;
         margin-top: -50px;     /* 自身 height 的一半 */
         margin-left: -50px;    /* 自身 width 的一半 */
     } 

     
     

     
     

   • 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

     .parent {
         display: flex;
         justify-content:center;
         align-items:center;
     }

     
     

     
     

6. 闭包的理解、应用：在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包。

   1. 封闭作用域: 全局变量私有化, 不会污染全局空间, 内部所有的临时变量执行完毕都会释放不占内存空间, 可以保存全局数据, 更新复杂变量.

   2. 作用域链: 封装全局变量, 把一些不需要暴露在全局的变量封装成"私有变量".

   3. 高级排他: 通过使用闭包, 将i变为局部变量. 如果不适用闭包, 所有的i都是同步变掉的
   4. 参数传递: 函数内部返回函数
   5. 函数节流: 封装节流函数
7. HTTP状态码304什么意思？讲一下HTTP缓存
   1. 浏览器缓存相关。该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。304 状态码返回时，不包含任何响应的主体部分。

   2. 浏览器缓存分为强缓存和协商缓存, 浏览器加载一个页面的简单流程如下 :

      1. 浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；

      2. 下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持HTTP1.1，则使用 expires 头判断是否过期。如果命中则直接加载缓存中的资源, 并不会将请求发送到服务器. (强缓存)

      3. 如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match 和 If-Modified-Since 的请求；

      4. 服务器收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改，Etag 值一致则没有修改，命中协商缓存，返回 304；如果不一致则有改动，直接返回新的资源文件带上新的 Etag 值并返回 200；

      5. 如果服务器收到的请求没有 Etag 值，则将 If-Modified-Since 和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回 304；不一致则返回新的 last-modified 和文件并返回 200；

      6. 如果未命中协商缓存, 则服务器会将完整的资源返回给浏览器, 浏览器加载新资源, 并更新缓存. (新的请求)

8. 算法

   1. 归并排序

   2. 反转链表

二面

1. 自我介绍
2. 聊项目（如何做前后端交互、为什么不采用服务器渲染、前后端分离的好处...）

   1. C#、Django、Node的区别？

   2. 为什么采用Node做服务器，Node的优势是什么
   3. 如何做前后端交互
   4. 前后端分离的好处
   5. Node事件循环和浏览器事件循环
   6. 为什么用Vue不用React
3. Vue双向数据绑定原理：Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
4. Vue2中数组的响应式原理：改写七个方法，以Array.prototype为原型，创建了一个arrayMethods对象，并且用es6的Object.setPrototypeOf方法，让数组的proto指向了arrayMethods，就可以调用新定义的七个函数方法。
5. 从输入URL到页面展示的全过程
6. 平时怎么学习？如何学习前端？关注过哪些社区？

HR面

1. 自我介绍
2. 三个词形容一下自己
3. 为什么选择前端
4. 在做过的项目中的角色是什么
5. 如何分配团队成员之间的工作
6. 遇到问题如何解决
7. 职业规划
8. 对贝壳有哪些了解
9. 什么时候可以入职

总结提问：