WEB前端面试题

2023-04-10 18:02:02html-css017

WEB前端面试题,第1张

第二章面试题基础篇

2.1 HTML面试题

面试题：行内元素有哪些？块级元素有哪些？空(void)元素有那些？

面试题：页面导入样式时，使用link和@import有什么区别？

面试题：title与h1的区别、b与strong的区别、i与em的区别？

面试题：img标签的title和alt有什么区别？

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

2.2 CSS面试题

面试题：css背景纹路

面试题：介绍一下CSS的盒子模型

面试题：CSS选择符有哪些？哪些属性可以继承？

面试题：CSS优先级算法如何计算？

面试题：用CSS画一个三角形

面试题：一个盒子不给宽度和高度如何水平垂直居中？

面试题：display有哪些值？说明他们的作用。

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

面试题：清除浮动有哪些方式？

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

面试题：什么是CSS reset？

面试题：css sprite是什么,有什么优缺点

面试题：display: none与visibility: hidden的区别

面试题：position有哪些值?有什么作用? 【特别多公司问】

面试题：line-height和height有什么区别？

面试题：opacity 和 rgba区别

2.3 JavaScript基础面试题

面试题：延迟加载JS有哪些方式？

面试题：JS数据类型有哪些？

面试题：null和undefined的区别

面试题：JS数据类型考题

面试题：==和===有什么不同

面试题：JS微任务和宏任务

面试题：JS作用域考题

面试题：JS对象考题

面试题：JS作用域+this指向+原型考题

面试题：JS判断变量是不是数组，你能写出哪些方法？

面试题：slice是干嘛的、splice是否会改变原数组

面试题：JS数组去重

面试题：找出多维数组最大值

面试题：给字符串新增方法实现功能

面试题：找出字符串出现最多次数的字符以及次数

2.4 真正移动端 —— H5/C3面试题

面试题：什么是语义化标签

面试题：::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

面试题：如何关闭iOS键盘首字母自动大写

面试题：怎么让Chrome支持小于12px 的文字？

面试题：rem和em有什么样区别

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题：webkit表单输入框placeholder的颜色值能改变吗？

面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

面试题：禁止ios和android用户选中文字

面试题：自适应 [淘宝无线适配]

面试题：响应式

第三章面试题进阶篇

3.1 JavaScript进阶面试题

面试题：new操作符具体做了什么

面试题：闭包【必须会】

面试题：原型链【必须会】

面试题： JS继承有哪些方式

面试题：说一下call、apply、bind区别

面试题：sort背后原理是什么？

面试题：深拷贝和浅拷贝

面试题：localstorage、sessionstorage、cookie的区别

3.2 ES6面试题

面试题：var、let、const区别

面试题：作用域考题

面试题：将下列对象进行合并

面试题：箭头函数和普通函数有什么区别？

面试题：Promise有几种状态

面试题：find和filter的区别【大厂】

面试题：some和every的区别【大厂】

3.3 webpack面试题

面试题：webpack插件

3.4 Git面试题

面试题：git常用命令

面试题：解决冲突

面试题：GitFlow

第四章面试题框架篇

4.1 区分初中高级的 —— Vue面试题

面试题：Vue2.x 生命周期有哪些？

1.系统自带八个

2.当一旦进入到某个组件会执行哪些生命周期

3.$el和$data在哪个阶段有

4.如果使用keep-alive会多俩个生命周期

5.如果加入keep-alive第一次进入组件会执行哪些生命周期

6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期

面试题：谈谈你对keep-alive的了解

面试题：v-if和v-show区别

面试题：v-if和v-for优先级 2.x

面试题：ref是什么？

面试题：nextTick是什么？

面试题：Vue中如何做样式穿透

面试题：scoped原理

面试题：Vuex是单向数据流还是双向数据流？

面试题：讲一下MVVM

面试题：双向绑定原理

面试题：什么是虚拟DOM

面试题：key是干什么？

面试题：diff算法

面试题：Vue组件传值

面试题：props和data优先级谁高？

面试题：computed、methods、watch有什么区别？

面试题：Vuex

面试题：Vue路由

面试题：Vue项目打包后出现空白页

4.2 微信小程序面试题

面试题：如何自定义头部？

面试题：如何自定义底部？

4.3 uni-app面试题

面试题：生命周期

面试题：条件编译

第五章面试题性能优化篇

方法有以下几种

1.你说的没有变化,可能是因为样式是应用表格上的缘故,如果是应用在<td class=title_main>最新文章</td>应该即可

2.单独给标题设置样式, 采用<span calss="title_1">标题</span>

CSS的样式代码如:

.title_main{font-size:12pxcolor:#f00line-height:20px}

样式解释:

font-size 表示字体大小, color 颜色, line-height表示行高,我这里设了20px, 这样就显得比较开阔,容易阅读,就和WORD 里面1.5倍行距比1倍行距容易阅读的道理一样. 因为浏览器默认字体是宋体, 所以font-family:宋体可以省略,如果是其他字体则需要这条.

如果是比较大的标题: 可以采用以下样式:

.title_main{font-size:20pxcolor:#f00line-height:30pxfont-weight:bold}

和上面的样式相比,这个字体扩大,行距加大,字体加粗.

3.给标题设置样式,其实还可以用<h1>标签

说明:

<h1>(除了<h1>,还有<h2><h3><h4><h5><h6>) 这些是专门用于设置不同大小的代码, 其中这些代码默认值都是有加粗的,字体大小由<h1>到<h6>逐渐变小,字体颜色默认为黑色,当然,大小/粗细/颜色都能修改的.

比如设置<h1>样式,css样式代码如:

h1{font-size:12pxcolor:#f00line-height:20px}

注意,h1前面没有任何标点,这样的话,整张网页里面所有用过<h1>标签的都会应用这个样式. 和 .title_main 只有加了class="title_main" 才应用样式不同.

而且和 CLASS 类相比, <h1>更加简洁,如果样式设置一样

<span calss="title_1">标题</span> 和<h1>文章标题</h1> 效果是一样的.

CSS 还有其他许多功能, 你可以在DreamWeaver里一个个添加尝试 /对比 ,很快就能基本掌握CSS 基础的设置了,当然,有些设置还是需要经验和实践才能运用的比较娴熟和简练的.

探究 CSS 解析原理

吃早饭的时候，同事随意问了一句：你知道 CSS 是怎么解析的吗？我一头雾水。对哦，作为前端，每天都在与 CSS 打交道，我竟然忽视了最基本的原理。

一、浏览器渲染

开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：

正如上图所展示的，我们浏览器渲染过程分为了两条主线：

其一，HTML Parser 生成的 DOM 树；

其二，CSS Parser 生成的 Style Rules ；

在这之后，DOM 树与 Style Rules 会生成一个新的对象，也就是我们常说的 Render Tree 渲染树，结合 Layout 绘制在屏幕上，从而展现出来。

本文的重点也就集中在第二条分支上，我们来探究一下 CSS 解析原理。

二、Webkit CSS 解析器

浏览器 CSS 模块负责 CSS 脚本解析，并为每个 Element 计算出样式。CSS 模块虽小，但是计算量大，设计不好往往成为浏览器性能的瓶颈。

CSS 模块在实现上有几个特点：CSS 对象众多(颗粒小而多)，计算频繁(为每个 Element 计算样式)。这些特性决定了 webkit 在实现 CSS 引擎上采取的设计，算法。如何高效的计算样式是浏览器内核的重点也是难点。

先来看一张图：

Webkit 使用 Flex 和 Bison 解析生成器从 CSS 语法文件中自动生成解析器。

它们都是将每个 CSS 文件解析为样式表对象，每个对象包含 CSS 规则，CSS 规则对象包含选择器和声明对象，以及其他一些符合 CSS 语法的对象，下图可能会比较明了：

Webkit 使用了自动代码生成工具生成了相应的代码，也就是说词法分析和语法分析这部分代码是自动生成的，而 Webkit 中实现的 CallBack 函数就是在 CSSParser 中。

CSS 的一些解析功能的入口也在此处，它们会调用 lex , parse 等生成代码。相对的，生成代码中需要的 CallBack 也需要在这里实现。

举例来说，现在我们来看其中一个回调函数的实现，createStyleRule(),该函数将在一般性的规则需要被建立的时候调用，代码如下：

CSSRule* CSSParser::createStyleRule(CSSSelector* selector) { CSSStyleRule* rule = 0 if (selector) { rule = new CSSStyleRule(styleElement) m_parsedStyleObjects.append(rule) rule->setSelector(sinkFloatingSelector(selector)) rule->setDeclaration(new CSSMutableStyleDeclaration(rule, parsedProperties, numParsedProperties)) } clearProperties() return rule }

从该函数的实现可以很清楚的看到，解析器达到某条件需要创建一个 CSSStyleRule 的时候将调用该函数，该函数的功能是创建一个 CSSStyleRule ，并将其添加已解析的样式对象列表 m_parsedStyleObjects 中去，这里的对象就是指的 Rule 。

那么如此一来，经过这样一番解析后，作为输入的样式表中的所有 Style Rule 将被转化为 Webkit 的内部模型对象 CSSStyleRule 对象，存储在 m_parsedStyleObjects 中，它是一个 Vector。

但是我们解析所要的结果是什么？

通过调用 CSSStyleSheet 的 parseString 函数，将上述 CSS 解析过程启动，解析完一遍后，把 Rule 都存储在对应的 CSSStyleSheet 对象中；

由于目前规则依然是不易于处理的，还需要将之转换成 CSSRuleSet。也就是将所有的纯样式规则存储在对应的集合当中，这种集合的抽象就是 CSSRuleSet；

CSSRuleSet 提供了一个 addRulesFromSheet 方法，能将 CSSStyleSheet 中的 rule 转换为 CSSRuleSet 中的 rule ；

基于这些个 CSSRuleSet 来决定每个页面中的元素的样式；

这里描述了大致过程，深入阅读可以查看如下链接：

Webkit CSS 引擎分析CSS 样式表解析过程Webkit CSS实现

三、CSS 选择器解析顺序

可能很多同学都知道排版引擎解析 CSS 选择器时是从右往左解析，这是为什么呢？

1.HTML 经过解析生成 DOM Tree（这个我们比较熟悉）；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。Render Tree 中的元素（WebKit 中称为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。

2.在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。

3.因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。

4.如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。

对于上述描述，我们先有个大概的认知。接下来我们来看这样一个例子，参考地址：

CSS 选择器：

div >div.jartto p span.yellow{ color:yellow}

对于上述例子，如果按从左到右的方式进行查找：

1.先找到所有 div 节点；

2.在 div 节点内找到所有的子 div ,并且是 class = “jartto”；

3.然后再依次匹配 p span.yellow 等情况；

4.遇到不匹配的情况，就必须回溯到一开始搜索的 div 或者 p 节点，然后去搜索下个节点，重复这样的过程。

这样的搜索过程对于一个只是匹配很少节点的选择器来说，效率是极低的，因为我们花费了大量的时间在回溯匹配不符合规则的节点。

如果换个思路，我们一开始过滤出跟目标节点最符合的集合出来，再在这个集合进行搜索，大大降低了搜索空间。来看看从右到左来解析选择器：

1.首先就查找到的元素；

2.紧接着我们判断这些节点中的前兄弟节点是否符合 P 这个规则，这样就又减少了集合的元素，只有符合当前的子规则才会匹配再上一条子规则。

结果显而易见了，众所周知，在 DOM 树中一个元素可能有若干子元素，如果每一个都去判断一下显然性能太差。而一个子元素只有一个父元素，所以找起来非常方便。

试想一下，如果采用从左至右的方式读取 CSS 规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样会做费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

浏览器 CSS 匹配核心算法的规则是以从右向左方式匹配节点的。这样做是为了减少无效匹配次数，从而匹配快、性能更优。

深入阅读，请移步：

jQuery 源码解析CSS 选择器从右向左的匹配规则CSS 选择器

四、CSS 语法解析过程

CSS 样式表解析过程中讲解的很细致，这里我们只看 CSS 语法解释器，大致过程如下：

1.先创建 CSSStyleSheet 对象。将 CSSStyleSheet 对象的指针存储到 CSSParser 对象中。

2.CSSParser 识别出一个 simple-selector ，形如 “div” 或者 “.class”。创建一个 CSSParserSelector 对象。

3.CSSParser 识别出一个关系符和另一个 simple-selecotr ，那么修改之前创建的 simple-selecotr, 创建组合关系符。

4.循环第3步直至碰到逗号或者左大括号。

5.如果碰到逗号，那么取出 CSSParser 的 reuse vector，然后将堆栈尾部的 CSSParserSelector 对象弹出存入 Vecotr 中，最后跳转至第2步。如果碰到左大括号，那么跳转至第6步。

6.识别属性名称，将属性名称的 hash 值压入解释器堆栈。

7.识别属性值，创建 CSSParserValue 对象，并将 CSSParserValue 对象存入解释器堆栈。

8.将属性名称和属性值弹出栈，创建 CSSProperty 对象。并将 CSSProperty 对象存入 CSSParser 成员变量m_parsedProperties 中。

9.如果识别处属性名称，那么转至第6步。如果识别右大括号，那么转至第10步。

10.将 reuse vector 从堆栈中弹出，并创建 CSSStyleRule 对象。CSSStyleRule 对象的选择符就是 reuse vector, 样式值就是 CSSParser 的成员变量 m_parsedProperties 。

11.把 CSSStyleRule 添加到 CSSStyleSheet 中。

12.清空 CSSParser 内部缓存结果。

13.如果没有内容了，那么结束。否则跳转值第2步。

五、内联样式如何解析？

通过上文的了解，我们知道，当 CSS Parser 解析完 CSS 脚本后，会生成 CSSStyleSheetList ，他保存在Document 对象上。为了更快的计算样式，必须对这些 CSSStyleSheetList 进行重新组织。

计算样式就是从 CSSStyleSheetList 中找出所有匹配相应元素的 property-value 对。匹配会通过CSSSelector 来验证，同时需要满足层叠规则。将所有的 declaration 中的 property 组织成一个大的数组。数组中的每一项纪录了这个 property 的selector，property 的值，权重（层叠规则）。

可能类似如下的表现：

p >a { color : red background-color:black} a { color : yellow} div { margin : 1px}

重新组织之后的数组数据为(weight我只是表示了他们之间的相对大小，并非实际值。）

selector property weight 1, a color:yellow 1 2, p >a color:red 2 3, p >a background-color:black 2 4, div margin:1px 3

好了，到这里，我们来解决上述问题：

首先，要明确，内敛样式只是 CSS 三种加载方式之一；

其次，浏览器解析分为两个分支，HTML Parser 和 CSS Parser，两个 Parser 各司其职，各尽其责；

最后，不同的 CSS 加载方式产生的 Style rule ，通过权重来确定谁覆盖谁；

到这里就不难理解了，对浏览器来说，内联样式与其他的加载样式方式唯一的区别就是权重不同。

深入了解，请阅读Webkit CSS 引擎分析

六、何谓 computedStyle ？

到这里，你以为完了？Too young too simple, sometimes naive!