微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一个 SPA 单页应用，随着时间累加，前端团队维护的 SPA 会随着业务增长越来越大，变得难以维护（项目启动耗时、CI\CD 耗时等）;

　　微前端可以帮助我们像后端一样将 SPA 应用按照业务拆分为多个可独立维护部署的应用，这样一方面我们可以实现，哪个业务改变就近更新哪个业务的前端；又可以帮助搭建从前端到后端单一业务领域的团队。

　　可以理解为微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。

　　那么什么样的产品适合微前端呢：（1）大型前端项目；（2）多个项目间跨应用模块共享；（3）有拆分出多个独立的子系统，独立部署维护的需求。

　　实现微前端落地方案常见的有以下三种形式：（1）自组织模式 - 主要通过 Nginx 路由分发；（2）容器模式 - 主要通过 qiankun 模式；（3）模块加载模式 - 这一块不太懂，所以需要研究一下。

　　微前端现有的落地方案可以分为三类：自组织模式、基座容器模式以及模块加载模式。

与基座模式相比，模块加载模式没有中心容器，这就意味着，我们可以将任意一个微应用当作项目入口，整个项目的微应用与微应用之间相互串联，打破项目的固定加载模式，彻底释放项目的灵活机动性，这样的模式，也被称为去中心化模式。

　　其实这个方案在微前端的架构理念中早已提及，但直到 2020 年 10 月 Webpack 5 正式发布之后才被真正落地应用。因为 Webpack 5 带来了一个全新特性：Module Federation，这是我们使用模块加载模式实现微前端架构的核心特性。

　　webpack5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。借助模块联邦我们可以一定程度的实现微前端。

　　在官方文档中，关于 Module Federation 的动机中，有这样一段介绍：

多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。

　　这通常被称作微前端，但并不仅限于此。

　　Module Federation 中文直译为“模块联邦”，为了方便我们这里简称为 mf。如果你去 Webpack 官方文档中查看，最多可以从前面的“动机”中看到模糊的解释，而对于“模块联邦”准确的定义，其实并没有给出。

　　但是，根据 “动机”的描述，不难看出，mf 实际想要做的事，便是把多个无相互依赖、单独部署的应用合并为一个。通俗点讲，mf 提供了能在当前应用中加载其他应用的能力。所以，在 mf 中，如果一个模块想要载入其他模块，就需要一个“引入”的动作；同样如果想让其他模块使用，就需要一个“导出”的动作。

　　对此，可以引出下面两个概念。

• expose：导出应用，被其他应用导入。

• remote：引入其他应用。

一个模块既可以导出给其他模块使用，又可以导入一个其他模块，这与“基座模式”完全不同。要知道，无论是 single-spa 还是 qiankun，加载不同模块，都需要有一个容器中心来承载；而在 mf 中，没有且也不需要容器中心。

　　鉴于 mf 的能力，我们完全可以实现一个去中心化的应用部署群：多个微应用单独部署在各自的服务器中，而每个微应用都可以引用其他应用，也能被其他应用导入使用，即每个应用都可以导出又导入，也就没有了容器中心的概念。

1、模块联邦能干什么？

　　模块联邦提供了可以在当前应用中远程加载其他服务器上应用的能力，使用 module Federation 可以实现一个去中心化的应用部署群，每个应用都单独部署，每个应用都可以引用其他应用，也能被其他应用所引用（js 级别）

　　借助第三方工具可实现跨技术栈开发 （react + vue 2）

　　可以用来实现前端项目平滑迭代（旧项目是一个应用，新项目是一个应用，两者之间通过远程连接，这样我们可以逐渐丰富 新项目来替换旧项目的内容）

　　又可以帮助搭建从前端到后端单一业务领域的团队

2、什么是本地模块与远程模块，什么是 host \ remote？

　　host：消费其他 remote 的 webpack 构建（即使用远程模块的应用）

　　remote: 被 host 消费的 webpack 构建（即提供可用的模块给其他应用使用）

　　host 与 remote 是相对的，一个应用既可以是 host 有可以是 remote，因此 模块联邦实现的微前端又是去中心化的。

　　本地模块即为我们本地开发时当前项目内的模块

　　远程模块不属于当前构建，它是在运行时被加载进来的 remote 应用提供的模块

3、模块联邦的负面影响

　　运行时加载远程模块等逻辑，可能导致一定的性能问题

　　本地开发需要开启多个端口的服务，比较麻烦

　　按需加载第三方依赖比较难实现

　　比起传统 spa 项目结构上有些复杂

　　迭代时的版本控制需要更多关注

4、此外还会有一些疑难杂症需要解决，具体可以看这篇文章：《webpack 5 模块联邦实现微前端疑难问题解决 - /mjzhang1993/article/details/》

元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

今天小编要跟大家分享的文章是关于2020年面试常见笔试题汇总，准备参加Web前端面试的小伙伴们来和小编一起看一看本篇文章，希望能够对大家有所帮助，帮助大家面试成功。

答：html5不是基于sgml(标准通用标记语言)，不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，

否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型

2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

3、页面导入样式时，使用link和@import有什么区别?

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务;@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题;@import是在CSS2.1提出的，低版本的浏览器不支持。

@import的写法一般有下列几种：

4、常见的浏览器内核有哪些?

使用Presto内核的浏览器：Opera7及以上版本;

5、html5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分html和html5?

新增的元素有绘画canvas，用于媒介回放的video和audio元素，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

移出的元素有下列这些：

如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

1.用来实现长连接，在Websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于HTTP长连接的”服务器推”技术

2.跨域通信。跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了

1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而 无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。

如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、 精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。

2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散 访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。

3、链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架 内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。

7、label的作用是什么?是怎么使用的?

Label中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

8、实现不使用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果?

9、网页验证码是干嘛的?是为了解决什么安全问题?

Apart)，翻译过来就是”全自动区分计算机和人类的图灵测试”，顾名思义，它是用来区分计算机和人类的。在CAPTCHA测试中，作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题，所以回答出问题的用户就可以被认为是人类。CAPTCHA是由计算机来考人类，而不是标准图灵测试中那样由人类来考计算机，因此人们有时称CAPTCHA是一种反向图灵测试。

验证码的原理：服务器端随机生成验证码字符串，保存在内存中，并写入图片，发送给浏览器端显示，浏览器端输入验证码图片上字符，然后提交服务器端，提交的字符和服务器端保存的该字符比较是否一致，一致就继续，否则返回提示。攻击者编写的robot程序，很难识别验证码字符，顺利的完成自动注册，登录;而用户可以识别填写，所以这就实现了阻挡攻击的作用。而图片的字符识别，就是看图片上的干扰强度了。就实际的效果来说，验证码只是增加攻击者的难度，而不可能完全的防止。

10、介绍一下标准的css的盒子模型?与低版本IE的盒子模型有什么不同?

盒子模型有两种，分别是ie盒子模型和标准w3c盒子模型

11、如何居中div，如何居中一个浮动元素?如何让绝对定位的div居中?

b.确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。

12、display有哪些值?说明他们的作用?

block :块对象的默认值。用该值为对象之后添加新行

none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行

compact :分配对象为块对象或基于内容之上的内联对象

marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before伪元素一起使用

inline-table :将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

run-in :分配对象为块对象或基于内容之上的内联对象

table :将对象作为块元素级的表格显示

Absolute，CSS中的写法是：position:absolute;他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

Relative，CSS中的写法是：position:relative;他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

14、display设置为inline-block时，li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车空格等等)的影响，这些空白也会被应用样式，占据空间，所以会有间隔

解决：设置ul的font-size为0，缺陷是必须重新在li中去设置字体大小

15、请解释下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

c.据说是最高大上的方法:after

方法：(注意：作用于浮动元素的父亲)IE6-7不支持:after，

f.父元素设置display:table盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

16、在网页中的应该使用奇数还是偶数的字体?为什么呢?

偶数字号相对更容易和Web设计的其他部分构成比例关系

使用奇数号字体不好的地方是，文本段落无法对齐

何时应当使用margin：

(1)需要在border外侧添加空白时，

(2)空白处不需要有背景(色)时，

(3)上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白(注意地方见第三点)。

(1)需要在border内侧添加空白时(往往是文字与边框距离的设置)，

(2)空白处需要背景(色)时，

(3)上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

margin使用时应该注意的地方

margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。

18、元素竖向的百分比设定是相对于容器的高度吗?

答：相对于父容器的宽度

19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容较低版本的IE?

答：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

20、设置元素浮动后，该元素的display值是多少?

以上就是小编今天为大家分享的关于2020年Web前端面试常见笔试题汇总的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有帮助，想要了解更多Web前端相关知识记得关注官网，最后祝愿小伙伴们面试成功，成为一名优秀的。

文章来源：原创 冯梦兰 IT高级程序吸金

【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】