A while ago, I summarized the knowledge related to front-end interviews, including stereotyped essays and algorithms. Share it with everyone! You can also pay attention to the column, and related articles will be published one after another!
Note: Most of the summaries come from Internet information, because I didn’t pay attention to the source when summarizing, if there is any infringement, please contact me!
HTML
What's the difference between HTML, XML, and XHTML?
- HTML (HyperText Markup Language) is a hypertext markup language, mainly used to specify how to display web pages.
- XML (Extensible Markup Language) is an extensible markup language and is the development direction of the future web language. The biggest difference between XML and HTML is that XML tags can be created by yourself, and the number is unlimited, while HTML tags are fixed and the number limited.
- XHTML (Extensible Hypertext Markup Language) is also a markup language used by almost all web pages now. In fact, it has no essential difference from HTML. The tags are the same and the usage is the same. It is stricter than HTML. For example, tags must be in lowercase , tags must have a closing tag, etc.
The role of DOCTYPE (document type)
<!DOCTYPE>The declaration is generally located on the first line of the document, and its main function is to tell the browser what mode to use to parse the document.- Generally, after specifying, the document will be parsed in standard mode, otherwise it will be parsed in compatibility mode.
- In the standard mode, the parsing rules of the browser are all parsed according to the latest standards.
- In compatibility mode, the browser will simulate the behavior of old browsers in a backward compatible way to ensure the correct access to some old websites.
What is the difference between Standards Mode and Compatibility Mode?
- The rendering method of the standard mode and the parsing method of the JS engine are both run at the highest standard supported by the browser.
- In compatibility mode, pages are displayed in a relaxed backwards-compatible manner, simulating the behavior of older browsers to prevent sites from breaking.
- For specific differences, you can give an example: box model
- In strict mode: width is the content width content = width;
- IE box model in compatibility mode: content is = width + padding + border
Understanding of HTML Semantics
- 语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
- 优点
- 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
- 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
- 常见的语义化标签
<header></header> 头部 <nav></nav> 导航栏<section></section> 区块（有语义化的div） <main></main> 主要区域 <article></article> 主要内容 <aside></aside> 侧边栏 <footer></footer> 底部
JavaScript脚本延迟加载的方式有哪些？
- js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。
- 方法：
- 第一种方式是我们一般采用的是将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。
- 第二种方式是给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
- 第三种方式是给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
- 第四种方式是动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。
常⽤的meta标签有哪些
-
<meta>元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。 -
总而言之, meta 标签是用来让机器识别的，同时它对 SEO 起着重要的作用。
-
详细
-
charset。指定了html文档的编码格式，常用的是utf-8(Unicode的字符编码)
-
name & content。指定元数据的名称和内容。
<meta name="author" content="Tony">- …（可举更多例子）
-
在 meta 中设置 viewport 是什么意思？（一般会结合移动端布局进行考察）
- Viewport，适配移动端，可以控制视口的大小和比例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- 其中，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元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
- 常见的有：
<br>、<hr>、<img>、<input>、<link>、<meta>； - 鲜见的有：
<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
- 常见的有：
说一下 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
三列自适应布局
- Flex-box布局：这也是目前最为流行的布局，也是大部分人工作中用的最多的布局了，flex布局实现三栏布局的方法很简单，给外层盒子使用display:flex 里面的盒子左右300px，中间flex为1即可
- 圣杯布局（浮动 + 负边距 ）：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。
- 双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
- Grid 布局：grid-template-columns: 300px auto 300px;
- Table
- 浮动 + margin
- Link
注：一些 CSS 实战布局，还是可以看牛客网中的一个训练。其中后面就有两列布局和三列布局。
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。
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no"/>
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帧