关于vue.js:2020-年我与技术面试那些事儿

前言

2020 年，是个不平庸的一年，因为疫情的蔓延打乱了我的全盘打算。但在工作中，实现了指标我的项目、攻克了技术难关、学习了新的技术，也感激平台！

首先上来就是给一个思维导图分享：

思维导图

微信 Web 开发者工具

小程序开发环境，相干工具

小程序组件

小程序 / 小游戏

开发接口

开发接口

凋谢能力

小程序媒体原生能力

小程序原生能力

小程序设施原生能力

小程序设施原生能力

小程序界面 / 图形原生能力

小程序界面 / 图形原生能力

小程序界面 / 图形原生能力

说说我做为前端开发工程师为啥学习云开发呢？

因为云开发（Tencent CloudBase，TCB）是云端一体化的后端云服务，采纳 serverless 架构，免去了挪动利用构建中繁琐的服务器搭建和运维。同时云开发提供的动态托管、命令行工具（CLI）、Flutter SDK 等能力极大的升高了利用开发的门槛。应用云开发能够疾速构建残缺的小程序 / 小游戏、H5、Web、挪动 App 等利用。

对于小程序开发，大家对其生命周期函数大都小白都是蒙蒙的，所以我讲一下：小程序注册实现后，加载页面，触发 onLoad 办法。页面载入后触发 onShow 办法，显示页面。首先显示页面，会触发 onReady 办法，渲染页面元素和款式，一个页面只调用一次。当小程序后盾运行或跳转到其余页面时，触发 onHide 办法。当小程序有后盾进入到前台运行或从新进入页面时，触发 onShow 办法。当应用重定向办法 wx.redirectTo(OBJECT)或敞开当前页返回上一页 wx.navigateBack()，触发 onUnload。

在开始小程序开发之前，须要注册小程序账号、私有云账号，购买云服务器、域名、申请 SSL 证书，还须要相干的配置，SSH 连贯服务器、装置 NodeJS、装置 Nginx、装置 MySQL、装置 MySQL、导入 SSL 证书、测试 Nginx、域名备案，才能够进行开发。

上面针对前端工程师的知识点开展介绍：

1. 务必把握 HTML（标签，属性，语义化）等。
2. 务必把握 CSS（文档流，盒模型，浮动，定位，继承，浏览器兼容性）等。
3. 务必把握 HTML5（新增的标签属性，以及外围 JavaScript API）等。
4. 务必把握 CSS3（新增的属性，媒体查问，布局，动画）等。
5. 务必把握 Bootstrap（款式，组件）等。
6. 务必把握 JavaScript（ECMAScript 核心技术，DOM 相干技术，前端常见算法）等。
7. 务必把握 jQuery 等相干技术。
8. 务必把握挪动端相干问题。
9. 务必把握开发兼容浏览器代码等问题。
10. 务必把握面向对象等问题，如（面向对象编程中的类，继承等）。
11. 务必把握 Ajax 与 JSON 等。
12. 务必把握 HTTP 和 HTTPS 等。
13. 务必把握 Node.js（开发服务器端开发）等。
14. 务必把握 EMAScript5 和 EMAScript6，设计模式（工作中）等。
15. 务必把握 Vue.js（框架，插件），Angular（框架，插件），React（框架，插件）等。
16. 务必把握游戏开发相干问题，网络安全相干问题，性能优化相干问题，模块化开发相干问题，CSS 预编译相干问题，混合开发相干问题，前端工程化问题（前端工程化工具 WebPack，gulp）等。
17. 务必把握版本管理工具（Git，SVN）, 测试相干问题。

针对公司面试官，会针对某一个问题，对面试者提出问题（若简历里没有对我的项目作出具体介绍即会开展对技术知识点的解答）

上面技术总结 HTML：

1. 标签要闭合，英文要小写，不要嵌套凌乱，用标签语义化来进步搜寻的概率，应用外链式的 CSS 和 JS。（使构造，款式，行为拆散，内容可能被更多的设施拜访，代码简洁，开发组件化，代码易保护，可复用等）。

2.HTML 是一种基于 web 网页的设计语言；XHTML 是一种基于 XML，语法严格，规范的设计语言。（不同：XHTML 元素必须正确嵌套，元素必须敞开，标签必须小写，必须有根元素；HTML 没有限度）

3. 严格模式是 浏览器依照 web 规范去解析页面的办法；混淆模式是一种向后兼容的解析办法。

（触发严格模式或者规范模式，就是在 HTML 标签前申明正确的 DTD；触发混淆模式能够在 HTML 文档开始时不申明 DTD，或者在 DOCTYPE 前退出 XML 申明）

4. 动态网页是没有数据交互的网页（没有数据库参加，没有服务器数据的加载）。如动态网页只有（HTML+CSS+JavaScript）；动静网页是有后盾数据参加的网页。（有动画的网页就是动静网页是谬误的认知）

5.DOCTYPE 申明位于文档中的最后面，位于 html 标签前，通知浏览器的解析器用什么文档类型标准来解析这个文档。DOCTYPE 不存在或格局不正确都会导致文档以混淆模式来出现。

严格模式下以浏览器反对的 最高规范来运行的，在混淆模式中，以向后兼容的形式来显示。

6.HTML 语义化让页面的内容变得 结构化，便于浏览器解析和搜索引擎解析，进步代码的可保护度和可重用性。

7. 锚点的应用形式：

id=""name="" 
<a href="#dadaqianduan">dadaqianduan</a>

8. 构造标签：

<header> 用于定义文档的页眉
<nav> 用于定义页面的导航链接局部。<section> 用于定义文档中的节，示意文档中一个具体的组成部分。<article> 用于定义独立于文档其余局部的内容。<footer> 用于定义某区域的脚注信息。<aside> 用于定义页面的一些额定组成部分。<a href="mailo:2xxx@qq.com>
<a href="javascript:void(0);">
超级链接用于创立一般超级链接，下载链接，电子邮件链接，分割咱们链接，空链接，锚点跳转，特定的代码性能。

9.IE 的内核 Trident；Firefox 的内核（Gecko,Chrome,Safari(Webkit）…

10.div 为网站布局的盒子标签，之前应用 table 布局会让网站加载慢，布局层级不清晰。

11.img 标签上的 title 是为提供题目信息，当光标悬浮在标签上后显示的信息，而 alt 是当图片不能失常显示时，图片的替换文案。

12. 上面空元素有：

<br> <hr> <img> <input> <link> <meta>

13.src 示意起源地址（示意引入），href 示意超文本援用。

14. 在新窗口关上链接的形式：

target=_blank

15.HTML 是网页内容的载体；CSS 是网页内容的体现；JavaScript 是用来实现网页上的特效和交互。

16. 应用 iframe，能够解决加载迟缓的第三方内容，能够实现平安沙箱，能够并行加载脚本。然而应用 iframe 会阻塞主页面的 Onload 事件。iframe 的内容即便是空的，加载它也是须要工夫的，iframe 元素是没有语义的。

17. 面试问考你对语义化的了解。

首先就是失落款式的时候，也可能让页面呈现出清晰的构造；有助于 SEO 进行抓取更多无效的音讯，语义化更具备可读性。

上面技术总结 CSS：

1.css 根本选择器有：类选择器，属性选择器，ID 选择器。CSS 选择器的权重分 4 个等级，其中 !important 关键字优先级最高。

能够用 0.0.0.0 来示意 4 个等级：

内联款式的优先级为：1.0.0.0

ID 选择器的优先级为：0.1.0.0

类属性选择器，属性选择器，伪类的优先级为：0.0.1.0

元素选择器，伪元素选择器的优先级为 0.0.0.1

通配符组合应用的时候，相应的层级权重也会减少

2. 上面说说 CSS 引入的形式：行内式将款式 写在元素的 style 属性内；内嵌式将款式写在 style 元素内；外链式将通过 Link 标签，引入 CSS 文件内的款式。

link 是 XHTML 的标签，除了加载 css 文件外，还能够加载 rss 等。@import 只能加载 css 文件。

应用 link 援用 css，在页面载入时同时加载，同步加载。

应用 @import 援用 css，须要等到网页齐全载入后，再加载 css 文件，异步加载。

link 是 XHTML 的标签，没有兼容问题；@import 是在 css2.1 中提出的，不反对低版本的浏览器。

link 的标签是 DOM 元素，反对应用 JavaScript 管制 DOM 和批改款式，@important 是一种办法，不反对管制 DOM 和批改款式。

3. 每次写浮动元素，会引起父元素的高度无奈被撑开，影响与父元素同级的元素；与元素同级的非浮动元素会紧随其后，会相似于遮蔽景象，这里留神如果一个元素浮动，那它后面的元素也是须要浮动的，不然会影响页面显示的构造。

当面试官问如何解决呢，首先第一个就是 能够为父元素设置 固定高度；第二能够为父元素设置 overflow:hidden 即可革除浮动，让父元素的高度被撑开；第三能够应用 clear:both 款式属性革除元素浮动。

这里阐明一下，有这两个设置 clear:left 或 clear:right，是别离解决左浮动或右浮动，而这个 clear:both 是都能够解决两边浮动的。

而后对父元素增加 after 伪元素，设置属性 content:””;display:block;clear:both;

应用 clearfix:

.clearfix:after{
 content: "";
 display: block;
 clear: both;
}

4. 地位定位：relative 示意绝对定位，绝对于本人自身所在失常文档流中的地位进行定位；absolute 示意为相对定位，绝对于最近一级定位，绝对于 static 的父元素进行定位；fixed 用于生成相对定位，绝对于浏览器窗口或 frame 进行定位；static 默认为没有定位；sticky 用于生成黏性定位的元素，容器的地位能够依据失常文档流计算得出。

5. 如果对内联元素设置 float 和 absolute 属性，让元素脱离文档流，并且能够设置其宽高。对于 float 可占据地位，不会笼罩在另一个 BFC 区域上，浮动的框能够向左或向右挪动，直到它的外边缘碰到蕴含框或另一个浮动框的边框为止。absolute 会笼罩文档流中的其余元素，即遮蔽景象。

6. 理解 css 选择器有哪些：id 选择器，类选择器，标签选择器，相邻选择器，子选择器，后辈选择器，通配符选择器，属性选择器，伪类选择器，伪元素选择器。

如: #id, .id, div, h1+p, ul>li, li a, #, button[disabled="true"], a:hover, li:fefore

7. 一些可继承款式：font-size,font-family color 等，一些不可继承的款式：

border,padding,margin,width,height

8. 说说 css 优先级：!important>style(内联)>id(权重 100)>class(权重 10)> 标签(权重 1）

9. 为啥总有人写：

*{padding:0;margin:0;}

因为浏览器的兼容问题，不同的浏览器对某些标签的默认值是不同的，如果没有初始化 css，往往会导致页面在不同浏览器之间呈现差别；这里留神初始化款式有时会对 SEO 产生肯定的影响。

10. 居中，以及居中一个浮动元素。

div {
 float: left;
 width: 400px;
 height: 200px;
 margin: -100px 0 0 -200px;
 position: relative;
 left: 50%
 top: 50%;
 background-color: pink;
}

1. display 值：block, none, inline, inline-block, list-item, table, inherit

block 是块类型，默认宽度为父元素宽度，可设置宽高，换行显示；none 示意元素不会显示，已脱离文档流；inline 示意行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示；inline-block 示意默认宽度为内容宽度，能够设置宽高，同行显示；list-item 示意像块类型元素一样显示，并增加款式列表标记；table 示意此元素会作为块级表格显示；inherit 示意从父元素继承 display 属性的值。

12.display:none 为暗藏元素，在文档布局总不会给它调配空间。visibility:hidden 暗藏元素，为文档布局中保留原来的空间。

13. 有人问 FOUC 是啥？如何防止 FOUC？FOUC 是无款式内容闪动，是在 IE 下通过 @import 形式导入 css 文件引起的：

<style type="text/css" media="all">@importurl('demo.css');</style>

IE 会先加载整个 HTML 文档的 DOM，而后导入内部的 css 文件。在页面 DOM 加载实现到 CSS 导入实现两头，有一段时间页面上的内容是没有款式的。这段时间跟网速和电脑速度无关。

能够解决 FOUC：在 head 标签之间退出一个 link 或 script 标签。

14. 聊聊 rem 和 em：rem 示意绝对于根元素的字体大小；em 示意绝对于父元素的字体大小。

15.css 中，自适应的单位百分比 %，绝对于视口宽度的单位 vw，绝对于视口高度的单位 vh，绝对于视口宽度或者高度的单位 vm。

绝对于父元素字体大小的单位 em，绝对于根元素字体大小的单位 rem。

16. 应用 rgba 给元素的背景设置透明度的形式，来代替应用 opacity 设置元素透明度的形式，解决子元素继承父元素透明度的问题。

17. 浏览器的规范模式和怪异模式区别在于盒子模型的渲染模式不同，能够应用 window.top.document.compatMode 判断以后模式为何为何种模式。后果为 BackCompat 示意怪异模式；后果为 CSS1Compat 示意规范模式。

18.FFC 示意自适应格式化上下文，即 display 值为 flex 或 inline-flex 的元素将会生成自适应容器。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元能够是任意数量的。伸缩单元内和伸缩容器外的所有元素都不受影响。

19.GFC, 网格布局格式化上下文，IFC, 内联格式化上下文，BFC，块级格式化上下文。

20.div+css 比 table 布局的长处在于扭转时比拟不便，只改变 css 文件。页面加载速度快，构造清晰，页面简洁，体现与构造拆散，搜索引擎优化敌对。

21.css 中遇到的 content 属性作用专门利用在 before/after 伪元素上，用于插入生成的内容，常见的利用是利用伪类革除浮动。

22. 网页制作用到哪些图片格式：支流的有 jpg,png,gif 等。

23. 优雅降级开始构建残缺的性能，而后再针对低版本浏览器进行兼容；渐进加强指对低版本浏览器构建页面，保障最根本的性能，再对高级浏览器进行成果，交互等批改。

24.px 和 em 是长度单位，区别在于 px 是固定的，指为多少就是多少，计算比拟容易，em 不是固定的，是绝对于容器字体的大小，并且 em 会继承父级元素的字体大小。

25. 程度垂直居中：

#box {
 width: 200px;
 height: 200px;
 background: red;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -100px 0 0 -100px;
}

26.css sprite 是把网页中一些背景图片整合到一张图片文件中，再利用 css 的 background-image,background-repeat,background-position 的组合进行背景定位 background-position 能够用数字准确地定位出背景图片的地位。

27. 页面重构，编写 css 让页面构造更合理化，晋升用户体验，达到良好的页面成果并晋升性能。

总结

以上就是明天要讲的内容，本文仅仅简略介绍了 2020 年「我与技术面试那些事儿」，感激浏览，如果你感觉这篇文章对你有帮忙的话，也欢送把它分享给更多的敌人。感激转发分享，点赞，珍藏哦！