之前整理了前端面试相关的知识，分享给大家！注：很多内容来源于网络，侵权联系删除哈！ * [前端面试系列初章——HTML & CSS 篇](https://juejin.cn/post/7243019785100165179 "https://juejin.cn/post/7243019785100165179") * [前端面试系列之最重要的基础知识——JavaScript篇](https://juejin.cn/post/7244335987575521336 "https://juejin.cn/post/7244335987575521336") * [前端面试系列之 Vue 必备知识点](https://juejin.cn/post/7250012486992511033 "https://juejin.cn/post/7250012486992511033") * [前端面试系列之 React 必备知识点](https://juejin.cn/post/7250357906712838205) * [前端面试系列之计算机网络篇](https://juejin.cn/post/7256674240489848891 "https://juejin.cn/post/7256674240489848891") * [前端面试系列之浏览器篇](https://juejin.cn/post/7256702654578409532 "https://juejin.cn/post/7256702654578409532") * [前端面试系列之工程化篇](https://juejin.cn/post/7257441472458604599) * [前端面试系列之性能优化和服务端篇](https://juejin.cn/spost/7257441221772804157) ## HTML ### HTML 、XML 和 XHTML 的区别？ * HTML（HyperText Markup Language）是超文本标记语言，主要是用于规定怎么显示网页。 * XML（Extensible Markup Language）是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。 * XHTML（Extensible Hypertext Markup Language）也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。 ### DOCTYPE(⽂档类型) 的作⽤ * `` 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。 * 一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。 * 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。 * 而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。 ### 标准模式与兼容模式各有什么区别？ * 标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。 * 在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。 * 具体区别，可以举个例子：盒模型 * 在严格模式中：width 是内容宽度 content = width; * 在兼容模式中 IE 盒子模型：content 则是 = width + padding + border ### 对HTML语义化的理解 * 语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 * 优点 * 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录； * 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。 * 常见的语义化标签 * `

头部导航栏

区块（有语义化的div）

主要区域

主要内容侧边栏底部` ### JavaScript脚本延迟加载的方式有哪些？ * js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。 * 方法： * 第一种方式是我们一般采用的是将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。 * 第二种方式是给 js 脚本添加 defer 属性，**这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞**。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。 * 第三种方式是给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，**但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞**。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。 * 第四种方式是动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。 ### 常⽤的meta标签有哪些 * `` 元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。 * 总而言之, meta 标签是用来让机器识别的，同时它对 SEO 起着重要的作用。 * 详细 * charset。指定了html文档的编码格式，常用的是utf-8(Unicode的字符编码) * name & content。指定元数据的名称和内容。 * `` * …（可举更多例子） ### 在 meta 中设置 viewport 是什么意思？（一般会结合移动端布局进行考察） * Viewport，适配移动端，可以控制视口的大小和比例： * `` * 其中，content 参数有以下几种： * width viewport ：宽度(数值/device-width) * height viewport ：高度(数值/device-height) * initial-scale ：初始缩放比例 * maximum-scale ：最大缩放比例 * minimum-scale ：最小缩放比例 * user-scalable ：是否允许用户缩放(yes/no） ### HTML5有哪些更新 * 新特性 * （1）新增语义化标签：nav、header、footer、aside、section、article * （2）音频、视频标签：audio、video * （3）数据存储：localStorage、sessionStorage * （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议） * （5）input标签新增属性：placeholder、autocomplete、autofocus、required * （6）history API：go、forward、back、pushstate * 移除 * 纯表现的元素：basefont，big，center，font, s，strike，tt，u * 对可用性产生负面影响的元素：frame，frameset，noframes ### 行内元素有哪些？块级元素有哪些？空(void)元素有那些？ * 行内元素有：a b span img input select strong； * 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p； * 空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签： * 常见的有：`
、

、、、、`； * 鲜见的有：`、、、、、

、、、、、`。 ### 说一下 web worker * 概念 * 在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。 * 如何创建 web worker * 检测浏览器对于 web worker 的支持性。 * 创建 web worker 文件（js，回传函数等）。 * 创建 web worker 对象。 ### iframe 有那些优点和缺点？ * 优点： * 用来加载速度较慢的内容（如广告） * 可以使脚本可以并行下载 * 可以实现跨子域通信 * 缺点： * iframe 会阻塞主页面的 onload 事件 * 无法被一些搜索引擎索识别 * 会产生很多页面，不容易管理 ### 渐进增强和优雅降级之间的区别 * 渐进增强（progressive enhancement）：**主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。** * 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。 * 两者区别： * 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要； * 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带 ### 说一下 HTML5 drag API（可能会结合具体的系统设计题查考） * dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。 * darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。 * dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。 * dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。 * dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。 * drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。 * dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。 ## CSS ### CSS 选择器有哪些？ * （1）id选择器（#myid） * （2）类选择器（.myclassname） * （3）标签选择器（div,h1,p） * （4）后代选择器（h1 p） * （5）相邻后代选择器（子）选择器（ul>li） * （6）兄弟选择器（li\~a） * （7）相邻兄弟选择器（li+a） * （8）属性选择器（a\[rel="external"]） * （9）伪类选择器（a:hover,li:nth-child） * （10）伪元素选择器（::before、::after） * （11）通配符选择器（\*） ### CSS 选择器优先级 * 为了给选择器进行优先级比较，我们对每种选择器都分配了权重 * !impotant 权重为正无穷 * 行内样式权重为 1000 * ID选择器权重为 100 * 类选择器/伪类选择器/属性选择器权重为 10 * 标签选择器权重为 1 * 通配符选择器/子类选择器/兄弟选择器权重为 0 * 继承的样式没有权重 * 总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 ### display 有哪些值？说明他们的作用。 * block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 * none 元素不显示，并从文档流中移除。 * inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 * inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 * list-item 像块类型元素一样显示，并添加样式列表标记。 * table 此元素会作为块级表格来显示。 * inherit 规定应该从父元素继承display属性的值。 ### 伪类和伪元素选择器有什么区别 * 伪类，更多的定义的是状态。常见的伪类有 * :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child等等。 * 伪元素，不存在于DOM树中的虚拟元素，它们可以像正常的html元素一样定义css，但无法使用JavaScript获取。常见伪元素有 * ::before，::after，::first-letter，::first-line等等。 * CSS3明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了，所以非常容易混淆。 ### 在 a 元素中有四种伪类状态，为什么它们的使用顺序很重要 * A标签有四种状态： * 链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类 * :link、:visited、:hover、:active * 当链接未访问过时： * （1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明； * （2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。 * 当链接访问过时，情况基本同上，只不过需要将:link换成:visited。 ### 盒子模型 * 盒模型都是由四个部分组成的，分别是 margin、border、padding和content。 * 标准盒模型和IE盒模型的区别在于设置 width 和 height 时，所对应的范围不同。标准盒模型的 width 和 height 属性的范围只包含了 content，而IE盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。 * 一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。它的值可以设置如下： * content-box * border-box ### Px、em、rem、vh、vw的区别及使用场景 * 区别 * px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 * em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。 * em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。 * 使用场景 * 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可。 * 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。 ### 居中布局 * （1）我们可以利用margin:0 auto来实现元素的水平居中。 * （2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。 * （3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。 * （4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。 * （5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。 * （6）grid 布局 justify-content: center; align-content: center; * More… 对于宽高固定的元素，上面的方法均适用。对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。 ### 隐藏元素的方法有哪些 * display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。 * visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。 * opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 * position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。 * z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。 * clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。 * transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。 ### display:none 与 visibility:hidden 的区别 * 在渲染树中 * Display:none 会让元素完全从渲染树中消失，渲染时不会占据任何空间； * visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。 * 是否是继承属性 * Display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示 * visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示； * 性能相关：修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘； * 如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。 ### 两列自适应布局 * 两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式 * float+overflow:hidden * flex 布局。在右侧设置 flex:1; * grid 布局。父元素设置 grid-template-columns:auto 1fr; * [More Link](https://juejin.cn/post/6844903710070407182) ### 三列自适应布局 * Flex-box布局：这也是目前最为流行的布局，也是大部分人工作中用的最多的布局了，flex布局实现三栏布局的方法很简单，给外层盒子使用display:flex 里面的盒子左右300px，中间flex为1即可 * 圣杯布局（浮动 + 负边距）：三个元素放在同一个父级元素中，**代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度**，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。 * 双飞翼布局的实现方案：**三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%**，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开 * Grid 布局：grid-template-columns: 300px auto 300px; * Table * 浮动 + margin * [Link](https://www.cnblogs.com/spoem/p/13252609.html) 注：一些 CSS 实战布局，还是可以看牛客网中的[一个训练](https://www.nowcoder.com/exam/oj?page=1\&tab=HTML%2FCSS\&topicId=277)。其中后面就有两列布局和三列布局。 ### BFC * 块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 * 通俗解释：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 * BFC 怎么形成？ * 根元素，即HTML元素 * float的值不为none * overflow的值不为visible * display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid * position的值为absolute或fixed * BFC 应用场景？ * 可以包含浮动元素——清除内部浮动 * 分属于不同的BFC时可以阻止margin重叠。属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。 * 自适应两栏布局。我们可以通过通过给main设置overflow：hidden来触发main生成BFC，当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。从而实现自适应两栏布局。 ### 清除浮动 * 浮动解释： * 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。 * 浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。 * 此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 * 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 * 如何清除浮动：清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 * 使用clear属性清除浮动。clear: both * 使用BFC块级格式化上下文来清除浮动。给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动 * 给浮动的元素的容器添加浮动。给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用 * 使用CSS的:after伪元素。通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格，并且赋予clear属性来清除浮动 ### 了解 flex 布局么？（会结合实际布局考察） * flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。 * 一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。 * 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。 * 对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。 ### 响应式设计的概念及基本原理 * 响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。 * 关于原理：基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。 * 关于兼容：页面头部必须有mate声明的viewport。 * `` ### CSS3中有哪些新特性 * 属性选择器 * 圆角（border-radius:8px） * 颜色 * rgba()函数 * hsl()及hsla()函数 * opacity属性，用于设置透明度 * 旋转（transform）、transition、animation * 阴影和反射（Shadoweflect） * box-shadow：为元素添加阴影 * 文字特效（text-shadow） * 多列布局（multi-column layout） * 文字渲染（Text-decoration） * 线性渐变（gradient） * 增加了旋转,缩放,定位,倾斜,动画,多背景 ### link和@import的区别 * link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import属于 CSS 范畴，只能加载 CSS。 * link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。@import 会产生闪烁的问题 * link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。 * link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持。 ### 对 requestAnimationframe 的理解 * HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧 * window\.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且**要求浏览器在下次重绘之前调用指定的回调函数更新动画**。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。 * 取消动画：使用cancelAnimationFrame()来取消执行动画 * 优势： * CPU节能 * 当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的RequestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。 * 函数节流 * 在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销 * 减少DOM操作 * requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧