jsliang 的 2019 面试准备

Create by jsliang on 2019-2-11 15:30:34
Recently revised in 2019-3-17 21:30:36

Hello 小伙伴们，如果觉得本文还不错，记得给个 star ， 小伙伴们的 star 是我持续更新的动力！GitHub 地址

并不是只有特定的季节才能跑路，只因为人跑得多了，这条路就定下来了。

金三银四跳槽季，jsliang 于 2019年2月11日 写下了这篇文章，开始准备自己的面试之旅。

至 2019年3月17日 为止，jsliang 搭建出个人的面试知识体系，海量地翻阅了一些前辈留下的资料，结合个人需求进行了几场面试，从而进一步完善该文章并进行了发表，希望对准备跳槽或者正在跳槽中的小伙伴有所帮助。

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
2.1 自我介绍
2.2 跳槽原委
2.3 进击目标
2.4 开篇点题
三 HTML
3.1 HTML 学习推荐
3.2 HTML 语义化
3.3 HTML5 新标签
3.4 常见浏览器及其内核
3.5 cookies、session、sessionStorage、localStorage
四 CSS
4.1 CSS 学习推荐
4.2 CSS reset
4.3 CSS 盒模型
4.4 CSS 单位
4.5 CSS 选择器
4.6 CSS 常见布局
4.7 CSS3 新特性
4.8 BFC
4.9 行内元素和块级元素
4.10 行内样式、内嵌式、链接式以及导入式
4.11 水平垂直居中
五 JavaScript
5.1 JS 学习推荐
5.2 JS 引用方式
5.3 原型与原型链
5.4 作用域与闭包
5.5 浅拷贝与深拷贝
5.6 模块化与组件化
5.7 面向对象与面向过程
5.8 防抖与节流
5.9 ES6
5.10 数组操作
六 Vue
6.1 MVVM
6.2 生命周期
6.3 双向数据绑定
6.4 Virtual DOM
6.5 template 编译
6.6 key
6.7 nextTick
6.8 父子组件通讯
七 微信小程序
7.1 文件主要目录及文件作用
7.2 微信小程序生命周期
7.3 如何封装数据请求
7.4 页面数据传递
7.5 加载性能优化的方法
7.6 微信小程序与原生 APP、Vue、H5 差异
7.7 微信小程序原理
八 浏览器
8.1 浏览器解析 URL
8.2 重绘与回流
8.3 数据存储
8.4 内存管理与垃圾回收
8.5 内存泄漏
九 网络协议
9.1 网络分层
9.2 HTTP/HTTPS
9.3 HTTP 状态码
9.4 TCP 三次握手与四次挥手
十 性能优化
10.1 HTML 优化
10.2 CSS 优化
10.3 JavaScript 优化
十一 算法
十二 其他
十三 总结
十四 参考文献
14.1 关于面试
14.2 关于 HTML
14.3 关于 CSS
14.4 关于 JS
14.5 关于其他
十五 网友反馈

二 前言

返回目录

请时刻准备好自己的简历，不管是互联网经济不佳面临裁员，还是因为公司内部斗争严重心乱如麻，还是因为厌倦了目前的一切……只有随时更新自己，把自己的简历准备好，你才知道哪一刻跑路是最佳选择。

2.1 自我介绍

返回目录

Hello 小伙伴们好，我叫梁峻荣，网名叫 jsliang，由于崇拜前端大佬 技术胖（jspang）的原因，又因为自己学的是前端（JavaScript），所以给自己取了个 jsliang（JavaScriptLiang） 的网名，希望自己能通过建立自己的前端知识体系，从而在前端路上走得更远。并将自己的经验分享给小伙伴，携手小伙伴们一起前行。

下面是讲讲个人故事：

首先，jsliang 高考后的暑期就听大学师兄的建议，开始学习编程，那时候学习了 C 语言，觉得世界上最神奇的事情不过如此，敲两下键盘，按下回车，电脑就会一闪一闪地响应我们！于是在大学的时候，陆陆续续学过 C、C#、.Net 等……。

-_-|| 由于学得都是基础，又都还给老师了，在这里就不多累述了。

然后，在大二就开始接触 HTML，那时候选修了个《网页设计基础》，跟着老师做了个只有几个页面的静态网站。在大三的时候，参加了学校的特训班，分角色按流程从头到尾做了个包含角色管理、购物等功能的网站。同时，由于在特训班的时候，看到后端使用 ThinkPHP（简称 TP），觉得蛮不错的，于是自己捣鼓，使用 TP 3.2.3 + Bootstrap 3 + MySQL 打造了自己的博客（已下线）。

接着，由于选修了门 Node.js 的课，所以也跟着大佬的步伐接触了下 Vue、Koa 这些，那时候对 npm 等诸多不懂，为了折腾这个，我的前端世界自此打开了个大门。

最后，我在自己的毕业设计中使用 Node.js + Vue + ElementUI + MongoDB 打造了个校园外卖、快递代拿等功能的社区单页应用。

在 2018 年 5 月的时候，家里催促，于是直接出来面试。不像其他大佬的毕业等于失业，很幸运地 jsliang 面试第一家就给了 offer，于是就进了这家公司，那时候感觉自己前面的大学生活白过了，只懂 ES5、jQuery、HTML/HTML5、CSS/CSS3 的皮毛。

在熟悉了三个月的业务，公司给的任务能顺利完成后，我觉得自己不够努力：外面的前端翻天覆地，我的技术却只是 jQuery is all！

于是 2018 年 8 月，jsliang 开始写 Markdown，将 5 月份到 8 月份记录到 Word 文档上的笔记整理成了 jsliang 的文档库，并在 jsliang 的掘金 上发表了第一篇文章。

18 年 8 月至今，jsliang 大致经历了以下这些：

1. 学 Webpack，并用 Webpack 构建一个多页面配置。然后幸运的是，刚好碰到公司的一个仿站任务，于是整个前端小组直接用了我的 Webpack + jQuery + VS Code 的 Live Share 套路进行协同开发！
2. 学 微信小程序，并将它应用到电信开发的微信小程序项目翼小微中。
3. 学 ECharts 报表，并用它做了个 Vue + ECharts 的报表，来展示爱音乐公司的运营数据。
4. 学 Node，然后搭了个企业网站（company.jsliang.top），并写了篇小文章（目前最高成就，获得了 1100 多赞）。
5. 学 Vue，由于之前学的 Vue，在工作上有好多没有，逐渐淡忘了，所以从基础开始，准备写一套《Vue 从 0 到 1》。

以上，就是 jsliang 的编程生涯。

今儿，在这里写写 jsliang 为了跳槽，根据个人想法进行的一些前端面试资料整理，小伙伴们觉得不错的点个赞或者去 GitHub 点个 star，觉得有误请指出，谢谢~

2.2 跳槽原委

返回目录

马老板曾经说过，跳槽有两个原因：

1. 钱没给到位。
2. 心被委屈了。

首先，如果非要给 jsliang 我自己的跳槽定个位，那肯定是钱没给到位，劳动与产出不成正比。在我 2018 年 5 月入职前，与人事的交谈中了解到每年的 8 月和 2 月可以提薪，当初的技术栈是：HTML、CSS、ES5。

然后，2018 年 6 月到 2019 年 1 月，学习并应用到工作中的技术有：

1. jQuery
2. Webpack
3. JSP
4. 微信小程序
5. Vue
6. ECharts

其中 2018 年 8 月刚转正，也不敢说自己技术进步很大，也不敢说自己项目贡献很大，为公司谋了多大利益，所以没有提薪想法。

2019 年 1 月底感觉自己项目也做了，凌晨 4/5/6 点的体育西路也看过了，技术也提升了，于是跟人事交谈，期望 2 月能加薪，人事表示年终述职演讲得好的给提薪，2 月开工的时候表示提薪名单没我份……

你没看错，提薪全靠 PPT。PPT 里提高了不给，没提就是没有。
当初想法很简单，你随便加个 5/600 我也满足了。

最后，jsliang 曾跟项目总监私下谈话，建议可以发展一些新产品，这样公司或许能获取一些新收入，我也可以进一步挑战我的技术。但是，由于我司是个老牌子公司，并且大部分依赖于接手电信项目进行扩张……

enm...所以心也委屈了。

在 2018 的努力下，GitHub 破 600 近 700 star，掘金破 10 万阅读量，3000 粉丝：
GitHub 见证：点击查看
掘金见证：点击查看

2.3 进击目标

返回目录

• 目标城市：广州
• 目标薪资：10K - 15K
• 目标技术：

1. 熟悉 HTML/HTML5、CSS/CSS3、ES5/ES6。
2. 了解 OOP 概念，并尝试在工作中使用过 OOP 技巧。
3. 对 MVC/MVVM 架构有一定了解，如有 Vue/React/Angular 或者 微信小程序开发经验更佳。
4. 使用过 Bootstrap 或者 ElementUI 等 UI 库，并对前端 UI 库有一定的个人理解。
5. 了解 Git、Webpack 等工具。
6. 对 Java、Node.js 等后端编程有一定了解。
7. 一年及以上工作经验。
复制代码

• 广州前端分析：

1. 广州 13K 薪资要求：
   1. 2/3 年工作经验。
   2. 熟悉 OOP，并能在工作中使用，且能独立开发插件等……
   3. 你可以不懂 Vue，但 React 你必须得会！
2. 广州 15k+ 薪资要求：
   1. 5 年+ 工作经验。
   2. 全能，懂前端，熟悉后端，能写文档……
   3. 带领过小队进行开发。
3. 广州异常偏科公司：
   1. 要求必须懂后端。
   2. 要求必须懂安卓或者 IOS 开发。
   3. 要求必须精通 jQuery 全家桶(jQuery UI、jQuery Mobile 等……)。

该分析数据来自 Boss 直聘

2.4 开篇点题

返回目录

本文的知识点将涉及 HTML、CSS、JS、HTTP、Vue、Webpack、打包工具、性能优化等，没有前置条件，看得懂可以瞅瞅复习下，看不懂可以瞅瞅学习下。

关于面试，在这记下慕课网视频看到的，个人非常认同的三个问答：

• 问：拿到一个面试题，第一时间看到什么？ 答：考点
• 问：如何看待网上搜出来的永远看不完的题海？ 答：不变应万变
• 问：如何对待面试题？ 答：题目到知识再到题目

然后在复习面试题的过程中，个人有些小看法：

• 个人感言一：为什么我总是比不上别人优秀？

当编写业务代码中，碰到某个业务 bug 时，我会习惯性地百度这个业务 bug，看看网友是怎么解决的。但是，学霸级的程序猿，会多走一步，他们会思考产生这个业务 bug 的底层原因是什么，下次碰到类似的是如何应用该技术解决。所以，日积月累，我的确比不上人家了。

• 个人感言二：辞职并不是件便捷的事。

way 1：面试成功，跟自己公司递辞呈，走流程，同时跟对面 hr 申请一个月后入职。

way 2：面试成功，跟自己公司递辞呈，询问能不能快速离职，收到回复跟对面 hr 确认时间。【推荐】

way 3：先递辞呈，同时面试，面试成功的，一律申请走完原公司一个月的流程之后的日子入职。

jsliang 于 2 月底拿到 offer 并递交辞呈，3 月 - 4 月进入一个月倒计时，4 月第一周才能拿到离职证明。

最后在这里祝各位小伙伴能找到称心如意的工作~

三 HTML

返回目录

HTML 属于结构层，负责描绘出内容的结构。

CSS 属于表示层，负责如何显示有关内容。

JavaScript 属于行为层，负责内容应如何对事件做出反应。

3.1 HTML 学习推荐

返回目录

• 《前端工程师手册》
• 《HTML 教程- (HTML5 标准) - 菜鸟教程》

3.2 HTML 语义化

返回目录

语义化的含义就是用正确的标签做正确的事情，HTML 语义化就是让页面的内容结构化，它有如下优点：

1. 便于对浏览器、搜索引擎解析；
2. 便于盲人浏览网页；
3. 便于阅读源代码的人对网站进行分开，维护和理解；

简单来说，能用

、

等 H5 新标签的就不用

，不要使用

来存放段落等……

3.3 HTML5 新标签

返回目录

HTML5 中新增标签大致有：

、

、

、

、、、等等。

3.4 常见浏览器及其内核

返回目录

	Chrome	Firefox	Safari	IE	Opera
排版引擎	Blink	Gecko	Webkit	Trident	Blink
JS 引擎	V8	SpiderMonkey	Nitro	Chakra	V8

国内一些浏览器使用较多的是 Webkit 内核。

• 针对不同浏览器内核，HTML 辨别：

1. IE 内核浏览器识别：
2. 非 IE 内核浏览器识别：

• 针对不同浏览器内核，CSS 辨别：

/* 设置文字不可选取 */
* {
  -moz-user-select: none; /* 火狐 浏览器 */
  -webkit-user-select: none; /* Webkit 浏览器 */
  -o-user-select: none; /* Opera 浏览器 */
  -ms-user-select: none; /* IE10 浏览器 */
  -khtml-user-select: none; /* 早期浏览器 */
  user-select: none; /* 默认 */
}
复制代码

3.5 cookies、session、sessionStorage、localStorage

返回目录

• cookies：存储于浏览器端的数据。可以设置 cookies 的到期时间，如果不设置时间，则在浏览器关闭窗口的时候会消失。

• session：存储于服务器端的数据。session 存储特定用户会话所需的属性和配置信息。

• cookies 和 session 的区别在于：

1. cookies 数据存放在客户的浏览器上，session 数据存放在服务器上。
2. 前端都是裸君子，没有安全可言，cookies 可能会被黑客利用作数据欺骗。所以重要信息记得存 session。
3. session 如果在生效期内量过大，会占用服务器性能。
4. 单个 cookies 保存的数据不能超过 4 K，很多浏览器限制一个站点保存最多 20 个 cookies。

---

• sessionStorage：生命周期存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据会随着窗口或者标签页的关闭而被清空。

• localStorage：生命周期是永久的，除非用户主动清除浏览器上存储的 localStorage 信息，否则它将会永久存在。

• sessionStorage 和 localStorage 操作方法：setItem、getItem 以及 removeItem。

以 localStorage 为例：

localStorage.getItem('name'); // 获取 name 的值
localStorage.setItem('name', 'jsliang'); // 设置 name 的值为 jsliang
localStorage.removeItem('name'); // 删除 name 的值
复制代码

参考 1：《前端分享之cookie的使用及单点登录》
参考 2：《Cookie、session和localStorage、以及sessionStorage之间的区别》

四 CSS

返回目录

HTML 属于结构层，负责描绘出内容的结构。

CSS 属于表示层，负责如何显示有关内容。

JavaScript 属于行为层，负责内容应如何对事件做出反应。

4.1 CSS 学习推荐

返回目录

• 《前端工程师手册》
• 《CSS 权威指南》
• 《CSS 揭秘》
• 《CSS 世界》

4.2 CSS reset

返回目录

在工作的过程中，会发现各式各样的浏览器对某个标签有自己独特的样式。

但是在前端开发中，如果不采用统一标准，那么会产生千奇百怪的 bug。所以为了减少后期 bug 的出现，前端开发人员会重置一遍 CSS 样式，尽可能地使开发的网页在各个浏览器相差不大。

下面是 jsliang 在使用的样式重置，当然如果小伙伴有不同的想法，可以去 百度/必应/google 搜索并使用其他版本的样式重置：

• jsliang 的 CSS 样式重置

4.3 CSS 盒模型

返回目录

在工作的过程中，也许小伙伴需要 div 块的总宽度为 100px，然后发现总是被 margin 撑高，这是因为盒模型定义的问题：

CSS 中有个属性叫 box-sizing。

box-sizing: border-box
box-sizing: content-box
复制代码

1. border-box 中，整个 div 的宽、高，包括 margin、padding、border。
2. content-box 中，整个 div 的宽、高，则不包括上面元素。

如上图，如果一个 div ，你的代码如下：

div {
  box-sizing: border-box;
  margin: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
}
复制代码

那么，你的整个宽高还是 100px。

但是，如果你的代码如下：

div {
  box-sizing: content-box;
  margin: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
}
复制代码

那么，你的整个盒子宽高是 120px。

如果你在设计页面中，发现内容区被撑爆了，那么，请检查下现在的 border-box 是什么，最好在引用 reset.css 的时候，就对 border-box 进行统一设置，方便管理。

4.4 CSS 单位

返回目录

在 CSS 中，除了我们常用的 px，还有其他单位小伙伴们可以了解一下：

单位	描述
%	百分比
px	像素。计算机屏幕上的一个点为 1px。
em	相对单位。相对于父元素计算，假如某个 p 元素为 font-size: 12px，在它内部有个 span 标签，设置 font-size: 2em，那么，这时候的 span 字体大小为：12 * 2 = 24px
rem	相对单位。相对于根元素 html 的 font-size，假如 html 为 font-size: 12px，那么，在其当中的 div 设置为 font-size: 2rem，就是当中的 div 为 24px。
rpx	微信小程序相对单位。1rpx = 屏幕宽度 / 750 px。在 750px 的设计稿上，1rpx = 1px。

除此之外还有 pt、ex 等单位，但由于不太好换算，故在此不提。

4.5 CSS 选择器

返回目录

选择器是匹配元素的一种模式。

• 关于 CSS 解析器：

HTML 经过解析生成 DOM Tree；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

Render Tree 中的元素与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。

在建立 Render Tree 时，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。

• CSS 解析顺序

在 CSS 的选择器中，它会按照优先级 从右向左解析，因为这样匹配元素的时候，能尽量少地查找，所以选择器最好写地简洁一点。

• CSS 常用选择器

1. 通配符：*
2. ID 选择器：#ID
3. 类选择器：.class
4. 元素选择器：p、a 等……
5. 后代选择器：p span、div a 等……
6. 伪类选择器：a:hover 等……
7. 属性选择器：input[type="text"] 等……
8. 子元素选择器：li:firth-child、p:nth-child(1) 等……

• CSS 选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

4.6 CSS 常见布局

返回目录

1. 水平垂直居中。这种布局老生常谈，jsliang 在本文也有提到，详解请 点击链接
2. 两列布局。一侧固定，另一侧自适应。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Two Column Layouttitle>
  <style>
    .container {
      display: flex;
    }
    .child-one {
      width: 300px;
      height: 300px;
      background: red;
    }
    .child-two {
      width: 100%;
      height: 300px;
      background: deepskyblue;
    }
  style>
head>
<body>
  <div class="container">
    <div class="child-one">div>
    <div class="child-two">div>
  div>
body>
html>
复制代码

3. 三列布局。类似于两列布局，新增多一个固定宽的
   块而已。当然，小伙伴们可能会说：jsliang 你要考虑 flex 的兼容性啊！enm...支持所有最新版本的浏览器！请更新你的浏览器哦亲~

避免被寄刀片，附上 float 布局：《css常见布局》

4.7 CSS3 新特性

返回目录

经典：CSS3 相关属性你了解吗，说说都有哪些？能说说你工作中常用的一些 CSS3 属性吗？

那么，CSS3 新特性都有哪些呢？

• transition：过渡
• transform：旋转、缩放、移动或者倾斜
• animation：动画
• gradient：渐变
• shadow：阴影
• border-radius：圆角

为了方便记忆，咱将它们扔到同一个 HTML 文件上，小伙伴拷贝到本地上打开，可以看到一个拥有渐变的小球，做着横向运动，如果你鼠标移动到它上面，它的宽度会放大，并且进行倾斜。

<html>
<head>
<meta charset="utf-8"> 
<title>CSS3 新特性title>
<style> 
  div {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: linear-gradient(red, orange);
    box-shadow: 10px 10px 5px #888888;
    position: relative;
    transition: width 2s;
    animation: mymove 5s infinite;
  }
  div:hover {
    width:300px;
    transform: rotate(7deg);
  }
  @keyframes mymove {
    from { left: 0px; }
    to { left: 200px; }
  }
style>
head>
<body>
  <div>div>
body>
html>
复制代码

参考 1：《CSS3 圆角》
参考 2：《CSS3 渐变（Gradients）》
参考 3：《CSS3 transition 属性》
参考 4：《CSS3 transform 属性》
参考 5：《CSS3 animation（动画） 属性》
参考 6：《CSS3 box-shadow 属性》
参考 7：《个人总结（css3新特性）》

4.8 BFC

返回目录

• 什么是 BFC？

BFC 就是 块级格式上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。

一定的 CSS 声明可以生成 BFC，浏览器对生成的 BFC 有一系列的渲染规则，利用这些渲染规则可以达到一定的布局效果。

• 为什么需要 BFC 呢？

1. 它可以防止 margin 元素重叠（div 中包含 ul，而 div 与 ul 之间的垂直距离，取决于 div、ul、li 三者之间的最大外边距，这时候给 ul 一个 display:inline-block 即可解决这个问题）
2. 清除内部浮动（div 中包含 ul，而 ul 采用 float:left，那么 div 将变成一长条，这时候给 div 加上规则使其变成 BFC 即可）

• 如何产生 BFC？

1. display: inline-block
2. position: absolute/fixed

• 工作中一般可能不会顾及这个：

1. float 很少使用了，尽可能使用 flex
2. css reset 一般会清除掉一些问题，减少 BFC 的使用。

参考文献：《我对BFC的理解》

返回目录

4.9 行内元素和块级元素

返回目录

行内元素：宽度和高度由内容决定，与其他元素共占一行的元素，我们将其叫行内元素。例如：、、 等……

块级元素：默认宽度由父容器决定，默认高度由内容决定，独占一行并且可以设置宽高的元素，我们将其叫做块级元素。例如：

、

、

等……

在日常开发中，我们经常使用 CSS 的 display 属性来打破两者的壁垒：display: inline-block，使它们拥有更多的状态。

4.10 行内样式、内嵌式、链接式以及导入式

返回目录

在引用 CSS 上，分为四种形式：行内样式、内嵌式、链接式以及导入式，下面介绍这四种模式。

• 行内样式

直接对 HTML 的标记使用 style 属性，然后将 CSS 代码直接写进去：

<p style="color: #fff; backgournd: deepskyblue;">p>
复制代码

• 内嵌式

将 CSS 写 与 之间，并且用 标记进行声明：

<head>
  <style>
    p {
      color: #fff;
      background: deepskyblue;
    }
  style>
head>
复制代码

• 链接式

通过将