面试要点 html/css篇

html篇

1.dom操作是否会带来性能问题？

答：会，dom操作会很耗浏览器的性能。
原因：它导致了浏览器的重绘（repaint）和重排（reflow）。

• 首先要明白dom实现和js实现是两个独立的模块，DOM是由 js 实现的，也就相当于两个独立的模块发生了交互，但 js 又是单线程，也就是说，只有在等 js 代码跑完了之后，浏览器才会开始响应这段代码所带来的 js 操作。
• 这些操作扎堆在一起等浏览器来响应。浏览器的响应又是同步的，所以它只能一次一次去执行重排计算，渲染，再计算，再渲染。。。 这样就非常耗费性能

拓展知识：
在这里就不得不说一下浏览器的渲染过程了

浏览器下载完页面所有的资源（html，js，css，图片等），就会发生一下6步过程：

①解析html，构建DOM树 DOMTree
②解析css ，生成css规则树（CSSOM Tree）
③合并DOM树和CSS规则树，生成渲染树（render tree）
④布局render树，根据生成的render树来对各元素尺寸，位置进行计算，得到每个节点的集合信息（重排）
⑤绘制render树，绘制页面像素信息，根据render树上的每个节点的几何信息，得到每个节点的像素数（重绘）
⑥浏览器会将各层节点的像素信息发送给GPU，GPU将各层合成、绘制展示到页面上

值得注意的是：
不可见节点，不会渲染输出
例如：meta，link，script，设置了display：none的元素等
但是visibility和opacity设置的不可见会被绘制出来

重排：当我们对DOM修改引发了DOM几何尺寸、位置的变化（例如外边距、内边距、边框厚度、宽高的修改、隐藏元素、添加或删除可见的DOM元素等），浏览器需要重新计算几何属性，然后再将计算结果绘制出来，这个过程就叫重排（回流）。
重排一定会引起重绘

重绘：对DOM的修改导致了样式的变化，但不影响集合属性（例如颜色、背景色的修改等），浏览器不需要重新计算几何属性，直接为该元素绘制新的样式，这个过程就叫重绘。

打断浏览器优化，强迫触发重排的属性：
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()

如果有小伙伴想要去检查一下是否发生重绘重排，可以通过控制台来查看，具体操作看图

控制台检查页面重绘重排， 根据突出显示页面中需要重新绘制的区域为绿色的时候就发生了重绘重排。

2.平时工作中，你怎么优化自己应用的性能？

a. 减少DOM操作的次数 （用事件委托来减少事件处理器的数量。） （克隆DOM元素到内存中，对克隆元素进行dom操作，再替换到原元素上）
b. 减少网络请求
c. 压缩、合并静态资源文件（css、js、img等）
d. 小图片文件base64化处理
e. js少用全局变量
f.ssr服务器渲染
…
在此推荐一个免费压缩图片的网站

3.页面需要渲染或者操作一万个dom元素，如何提升页面性能？

答:首先想到的应该是分批处理以及结合文档片段DocumentFragment。
有兴趣的可以看看这篇文章页面需要渲染10万条数据，应该怎么实现？

4.事件委托到父节点上或者document中，哪个更好？？

委托到document更好
原因：通过冒泡机制在document监听可以减少对单个事件的监听

5.DOM 的事件机制，怎么阻止事件捕获

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

在DOM兼容浏览器中，事件流分为3个阶段：

****捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

目标阶段：真正的目标节点正在处理事件的阶段；

冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。

①阻止冒泡: 在 W3c 中，使用 stopPropagation() 方法；或者在函数里面直接return false;
在 IE 下设置 cancelBubble = true,stopPropagation()也可以用来阻止事件捕获

②阻止捕获: DOM3 级新增事件 stopImmediatePropagation()方法来阻止事件捕获，另外此方法还可以阻止事件冒泡
这两者的差别是：
stopPropagation 只会阻止冒泡或者是捕获。
stopImmediatePropagation 除此之外还会阻止该元素的其他事件发生，但是 stopPropagation 就不会阻止其他事件的发生

Css篇

1.css有哪些标签选择器

标签选择器（div、p）、类选择器（class=“container”）、id选择器（id=“header”）、全局选择器（*）、伪类选择器（:after、:before）、继承选择器（div> p）、后代选择器（A>B）、任意选择器（A、B）

2.我们常说的盒模型是指什么

盒模型有两种
IE盒模型： 宽/高=content
标准盒模型：宽/高=border+content+padding

3.什么是文档流

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。
也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。
影响文档流元素位置的方法：
①显示类型：inline，block
②float
③定位

4.BFC

BFC 即 Block Formatting Contexts (块级格式化上下文)
特性的元素可以看作是隔离了的独立容器。外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素，
并且 BFC具有普通容器所没有的一些特性。
a. 同一个 BFC 下外边距会发生折叠
b.可以清除浮动
c.以阻止元素被浮动元素覆盖

如何触发BFC
①body 根元素
②浮动元素：float 除 none 以外的值
③绝对定位元素：position(absolute、fixed)
④display 为 inline-block、table-cells、flex
⑤overflow 除了visible 以外的值 (hidden、auto、scroll)

5.浮动元素为什么无法撑开父元素，如何解决

因为浮动的元素已经是脱离文档流了
解决方法：
①额外标签法，

,可是会增加额外的标签使HTML结构看起来不够简洁。
②使用after伪元素
::after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
③浮动外部元素
④设置 overflow 为 hidden 或者 auto

6.元素居中布局的几种方法

水平居中

①行内元素: text-align：center;
②块级元素：margin：0 auto;
③若子元素包含 float:left属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置: .parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto; }
④flex布局： justify-content: center;
⑤CSS3中新增的transform属性 ：
position:absolute;
left:50%;
transform:translate(-50%,0);
⑥绝对定位
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;
或
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;

垂直居中

①单行文本：设置line-height
② 绝对定位
position:absolute;
width:固定;
top:50%;
margin-top:-0.5宽度;
③CSS3中新增的transform属性 ：
position:absolute;
top:50%;
transform:translate(0,-50%);
④flex布局：
display:flex;
align-items:center;

7.对flex布局和Grid布局方式的理解

flex布局
建议去看阮一峰的这篇文章阮一峰的flex布局教程

①flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-direction: row | row-reverse
| column | column-reverse; ②flex-wrap属性定义，如果一条轴线排不下，如何换行。 flex-wrap:
nowrap | wrap | wrap-reverse;
③flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: || ;
④justify-content属性定义了项目在主轴上的对齐方式。 justify-content: flex-start |
flex-end | center | space-between | space-around;
⑤align-items属性定义项目在交叉轴上如何对齐。 align-items: flex-start | flex-end |
center | baseline | stretch; baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
⑥align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 align-content:
flex-start | flex-end | center | space-between | space-around |stretch;
⑦order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 order: ;
⑧flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 flex-grow: ; /*
default 0 /
即如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
⑨flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（负值对该属性无效。）
flex-shrink: ; / default 1 */
⑩align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

grid布局
grid布局详解

8.双飞翼布局/圣杯布局

双飞翼布局/圣杯布局其实就要实现两边固定，中间自适应
①margin负值法：左右两栏浮动，且采用负的margin值，中间栏被宽度为100%的浮动元素包起来
②自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
③绝对定位法：左右两栏采用绝对定位，分别固定于页面的两边，中间主体栏用左右margin值隔开
④flex布局：两边固定宽，中间flex:1

9.css动画和javascript动画相比，有什么优缺点？

javascript动画
缺点:
①在浏览器的主线程运行，，由于主线程有其他需要运行的javascript脚本，样式计算等，可能会导致阻塞，出现丢帧的情况
②代码复杂度比css的高
优点：
a.动画控制能力强，可以在动画播放的过程中对动画进行控制
b.动画效果比css的丰富
③css3有兼容问题，js大多时候没有

css动画
缺点：
①运行过程中控制较弱，无法附件事件绑定回掉函数
②代码冗长。对于实现复杂的动画，css代码往往复杂
优点：
①浏览器可以对动画进行优化
原因：
a.浏览器使用与requestAnimationFrame类似的机制
b.requestAnimationFrame会把所有的dom操作集合起来，再一次的重绘或回流中完成。
c.隐藏和不可见的元素，requestAnimationFrame不会重绘或回流，这样就更少使用cpu

10.移动端适配方案, rem 和 em 的区别

rem 和 em 单位是由浏览器基于设计中的字体大小计算得到的像素值。

em 单位基于使用当前元素的字体大小。

rem 单位基于 html 元素的字体大小。

em 单位可能受任何继承的父元素字体大小影响

rem 单位可以从浏览器字体设置中继承字体大小。

不要在多列布局中使用 em 或 rem -改用 %。

11.css性能优化

①合并css文件
②减少css的嵌套，最好不要超过3层
③不要在ID选择器前面进行嵌套，ID本来就是唯一且权限值大，嵌套就是浪费性能
④建立公共样式，相同的样式抽离出来
⑤运用css的继承特点，父节点定义了，子节点就不要定义了
⑥大项目可以将大部分公共样式提取出来，单独一个css文件
⑦减少通配符以及属性选择器
⑧css压缩
⑨GZIP压缩
⑩避免使用@import，因为它是等待页面所有资源下载完毕，才下载的，其次，多个@import会导致下载顺序紊乱，
11.避免过多的重绘重排