我与技术面试那些事儿
哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。
每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我vx:xiaoda0423，欢迎点赞、收藏和评论
不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。
前言
首先上来就是给一个思维导图分享：
思维导图
微信 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、域名备案，才可以进行开发。
下面针对前端工程师的知识点展开介绍：
务必掌握 HTML（标签，属性，语义化）等。
务必掌握 CSS（文档流，盒模型，浮动，定位，继承，浏览器兼容性）等。
务必掌握 HTML5（新增的标签属性，以及核心 JavaScript API）等。
务必掌握 CSS3（新增的属性，媒体查询，布局，动画）等。
务必掌握 Bootstrap（样式，组件）等。
务必掌握 JavaScript（ECMAScript 核心技术，DOM 相关技术，前端常见算法）等。
务必掌握 jQuery 等相关技术。
务必掌握移动端相关问题。
务必掌握开发兼容浏览器代码等问题。
务必掌握面向对象等问题，如（面向对象编程中的类，继承等）。
务必掌握 Ajax 与 JSON 等。
务必掌握 HTTP 和 HTTPS 等。
务必掌握 Node.js（开发服务器端开发）等。
务必掌握 EMAScript5 和 EMAScript6 ，设计模式（工作中）等。
务必掌握 Vue.js（框架，插件），Angular（框架，插件），React（框架，插件）等。
务必掌握游戏开发相关问题，网络安全相关问题，性能优化相关问题，模块化开发相关问题，CSS 预编译相关问题，混合开发相关问题，前端工程化问题（前端工程化工具 WebPack，gulp）等。
务必掌握版本管理工具（Git，SVN）,测试相关问题。
针对公司面试官，会针对某一个问题，对面试者提出问题（若简历里没有对项目作出详细介绍即会展开对技术知识点的解答）
下面技术总结 HTML：
标签要闭合，英文要小写，不要嵌套混乱，用标签语义化来提高搜索的概率，使用外链式的 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.锚点的使用方式：
8.结构标签：
9.IE 的内核 Trident；Firefox 的内核（Gecko,Chrome,Safari(Webkit）...
10.div 为网站布局的盒子标签，之前使用 table 布局会让网站加载慢，布局层级不清晰。
11.img 标签上的 title 是为提供标题信息，当光标悬浮在标签上后显示的信息，而 alt 是当图片不能正常显示时，图片的替换文案。
12.下面空元素有：
13.src 表示来源地址（表示引入），href 表示超文本引用。
14.在新窗口打开链接的方式：
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:
4.位置定位：relative 表示相对定位，相对于自己本身所在正常文档流中的位置进行定位；absolute 表示为绝对定位，相对于最近一级定位，相对于 static 的父元素进行定位；fixed 用于生成绝对定位，相对于浏览器窗口或 frame 进行定位；static 默认为没有定位；sticky 用于生成黏性定位的元素，容器的位置可以根据正常文档流计算得出。
5.如果对内联元素设置 float 和 absolute 属性，让元素脱离文档流，并且可以设置其宽高。对于 float 可占据位置，不会覆盖在另一个 BFC 区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute 会覆盖文档流中的其他元素，即遮盖现象。
6.了解 css 选择器有哪些：id 选择器，类选择器，标签选择器，相邻选择器，子选择器，后代选择器，通配符选择器，属性选择器，伪类选择器，伪元素选择器。
7.一些可继承样式：font-size,font-family color 等，一些不可继承的样式：
8.说说 css 优先级：!important>style(内联)>id(权重 100)>class(权重 10)>标签(权重 1）
9.为啥总有人写：
因为浏览器的兼容问题，不同的浏览器对某些标签的默认值是不同的，如果没有初始化 css，往往会导致页面在不同浏览器之间出现差异；这里注意初始化样式有时会对 SEO 产生一定的影响。
10.居中，以及居中一个浮动元素。
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 文件引起的：
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.水平垂直居中：
26.css sprite 是把网页中一些背景图片整合到一张图片文件中，再利用 css 的 background-image,background-repeat,background-position 的组合进行背景定位 background-position 可以用数字精确地定位出背景图片的位置。
27.页面重构，编写 css 让页面结构更合理化，提升用户体验，达到良好的页面效果并提升性能。
❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章
点赞、收藏和评论
我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)
我们下期见！
文章持续更新，可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录
github收录，欢迎Star：https://github.com/webVueBlog/WebFamily
版权声明: 本文为 InfoQ 作者【魔王哪吒】的原创文章。
原文链接:【http://xie.infoq.cn/article/7c9c65c6a894bef86ee8e5329】。未经作者许可，禁止转载。
微信搜：程序员哆啦A梦 2018.05.08 加入
面向JavaScript爱好人员提供：Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。 博客首发：http://www.dadaqianduan.cn/#/
评论