KlayPeter的学习博客

1 说说你对盒子模型的理解？

# 1 说说你对盒子模型的理解？

我自己的想法：

盒子模型其实就是浏览器的渲染引擎会将所有元素表示成一个个盒子，由四个部分组成：content（内容）、padding（内边距）、border（边框）、margin（外边距）

原来在css中，盒子模型还可以分成两类

  • W3C标准盒子模型（默认情况）：

    盒子总宽度：width + padding + border + margin

    盒子总高度：height + padding + border + margin

    明显就是width/height只是内容高度不包含padding和border

  • IE怪异盒子模型

    盒子总宽度 = width + margin

    盒子总高度 = height + margin

实现怪异盒子的是用一个叫box-sizing的属性

当box-sizing: border-box的时候就是怪异盒子啦

# 2 谈谈你对BFC的理解？

介绍BFC之前，给大家介绍一下文档流

定位流、浮动流、普通流

当元素之间相互的影响的时候导致一些样式会发生意料之外的变化

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，容器里面的元素不回在布局上影响到外面的元素，并且有一套属于自己的渲染规则：

  • 里面的子元素不回影响到外面的元素
  • 里面的块级元素会垂直方向上一个接一个排列
  • 避免外边距折叠
  • 浮动盒不回和BFC重叠
  • 计算BFC高度浮动元素也会参与计算

触发BFC的条件包含但是不限于：

  • 浮动: float: left、right
  • overflow: auto、scroll、hidden
  • display: inline-block、table、inline-flex、flex、grid
  • 定位：position：absolute / fixed

只要有以上的条件之一就可以，那他有什么应用的场景呢？

  • 防止margin重叠
  • 清除内部浮动
  • 自适应多栏布局

除了BFC还有：

  • IFC（行级格式化上下文）
  • GFC（网格布局格式化上下文）
  • FFC（自适应格式化上下文）

# 3 什么是响应式设计？响应式设计的基本原理是什么？

Content is like water

根据用户行为和设备环境响应和调整

样式同时适配PC+移动+平板

导航等随设备变化而调整表现方式

视口

实现方式

基本原理就是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

实现响应式布局的方式

# 4 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

列举一下吧

  • 定位+margin:auto

  • 定位+margin负值

  • 定位+transform

  • table布局

    image-20250723163934476

  • flex布局

    image-20250723163949577

  • grid网格布局

    image-20250723164008978

  • 内联元素居中布局

    水平

    • 行内元素：text-aligin: center
    • flex布局设置父元素：display: flex

    垂直

    • 单行文本父元素确定高度：height === line-height
    • 多行文本父元素确定高度：display: table-cell; vertical-align: middle

# 5 如何试下两栏布局，右边自适应？三栏布局中间自适应？

两栏，侧边栏为次要布局

三栏像github的中间列最宽，左右两列次之

两栏怎么实现呢？

一个定宽栏和一个自适应的栏并排展示存在

  • 使用float左浮左边栏
  • 右边模块使用margin-left撑出内容快做内容展示
  • 为父级元素添加BFC，防止下方元素飞到上方内容
<style>
    .box{
        overflow: hidden 添加BFC
    }
    
    .left{
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right{
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

或者使用flex弹性布局

<style>
    .box{
        display:flex;
    }
    .left{
        width:100px;
    }
    .right {
        flex:1
    }
</style>

三栏的话思路

  • 两边float,中间使用margin

  • 两边使用absolute，中间使用margin

  • 使用display:table

  • 使用flex

  • 使用grid

# 6 css选择器

css选择器是css规则的第一部分，就是元素和其他部分组合起来告诉浏览器那个HTML元素应当是被选为应用规则中的css属性值的方式

选择器所选择的元素叫做“选择器的对象”

例子：

<div id="box">
	<div class="one">
 		<p class="one_1"></p >
 		<p class="one_1"></p >
 	</div>
 	<div class="two"></div>
 	<div class="two"></div>
 	<div class="two"></div>
</div>

常用的css属性选择器有：

  • id选择器（#box）

  • 类选择器（.one）

  • 标签选择器（div）

  • 后代选择器（#box div）,选择id为box元素内部的所有div元素

  • 子选择器（.one > one_1）,选择父元素为.one的所有.one_1的元素

  • 相邻同胞选择器（.one+.two）,选择紧接在.one之后的所有.two元素

  • 群组选择器（div, p）,选择div，p所有元素

  • 层次选择器（p-ul） 选择前面有p元素的每个ul元素

  • 伪类选择器

    image-20250724104208306

    image-20250724104356409

  • 伪元素选择器

    image-20250724104227276

  • 属性选择器

    image-20250724104238647

优先级

!import > 内联 > ID选择器 > 类选择器 > 标签选择器

继承属性

# 7 css中，有哪些方式可以隐藏页面元素？区别？

挺多方式的

  • display:none 元素在页面上将彻底消失，不可见不占据空间无法响应点击事件

  • visibility:hidden 仅仅是隐藏元素，DOM结果均会存在占据空间事件不会触发

  • opacity: 0 修改透明度完全透明就看不到了，占据着空间能触发点击事件但是被它遮挡的元素不能触发事件

  • 设置height、width 模型属性为0 这个就是完全没有了，如果还有子元素应该设置overflow:hidden来隐藏其子元素

  • position: absolute 将元素定位到老远去

  • clip-path 通过裁剪的方式

    .hide{
    clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)
}

    元素不可见，占据空间，无法点击

# 8 如何实现单行/多行文本溢出的省略样式？

一行

<style>
    p{
        overflow: hidden; /*隐藏超出内容*/
        line-height: 40px;
        width:400px;
        height: 40px;
        border:1px solid red;
        text-overflow; ellipsis; /*用省略号*/
        white-space: nowrap; /*不换行*/
    }
</style>

多行

基于高度截断

<style>
 .demo {
 	position: relative;
 	line-height: 20px;
 	height: 40px;
	overflow: hidden;
 }
 .demo::after {
 	content: "...";
 	position: absolute;
 	bottom: 0;
 	right: 0;
 	padding: 0 20px 0 10px;
 }
</style>
<body>
	<div class='demo'> </div>
</body

基于行数截断

<style>
 p {
	width: 400px;
	border-radius: 1px solid red;
    -webkit-line-clamp: 2; // 行数
    display: -webkit-box;  // 使用这个属性弹性伸缩盒子
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
 }
</style>
<p>
 
 
</p >

# 9 用css如何画一个三角形？原理是什么？

image-20250724115025425

image-20250724115042130

image-20250724115103183

那我想实现只有边框然后是空心的三角形呢？

image-20250724115154111

最直接的方法就是利用伪类新建一个小一点的三角形定位上去

image-20250724115541551

需要微调

看一下原理

image-20250724135331052

image-20250724135345661

.box{
    width:0px;
    heigth: 0px;
    /*边框大小，只设置两条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px;
    /*其他设置*/
    margin: 50px;
}

# 10 如何使用css完成视差滚动效果

我咋好像第一次听？

视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验

我们可以把网页分成：背景层、内容层、悬浮层

当滚动鼠标的时候，各个图层以不同的速度移动就会形成视觉差的效果

使用css实现的方式

  • background-attachment

    作用是设置背景图片是否固定或者随页面的其余部分滚动

    属性值有：

    • scroll: 默认值，会随着
    • fixed: 当前页面的其余部分滚动的时候背景图片不会移动
    • inherit
    section {
 height: 100vh; 
}
.g-img {
 background-image: url(...);
 background-attachment: fixed;
 background-size: cover;
 background-position: center center;
}

  • transform:translate3D

    image-20250724141556710

    image-20250724141606029

# 11 css3新增了哪些新特性

选择器

边框

背景

文字

颜色

transform

animation

渐变

# 12 css3动画

transition 实现渐变动画

记住属性基本就可以了

  • property: 填写需要变化的css属性
  • duration: 完成过渡效果需要的时间单位(s或ms)
  • timing-function: 完成效果的速度曲线
  • delay: 动画效果的延迟触发时间

image-20250725152440356

举个例子：实现鼠标移动上去发送变化的动画效果

<style>
 	.base {
 		width: 100px;
 		height: 100px;
 		display: inline-block;
 		background-color: #0EA9FF;
 		border-width: 5px;
 		border-style: solid;
 		border-color: #5daf34;
 		transition-property: width, height, 		background-color, border-width;
 		transition-duration: 2s;
 		transition-timing-function: ease-in;
 		transition-delay: 500ms;
 }
 /* */
 /*transition: all 2s ease-in 500ms;*/
 .base:hover {
 	width: 200px;
 	height: 200px;
 	background-color: #5daf34;
 	border-width: 10px;
 	border-color: #3a8ee6;
 }
</style> <div class="base"></div>

transform 转变动画

包含四个常用的功能

  • translate: 位移
  • scale: 缩放
  • rotate: 旋转
  • skew: 倾斜

一般配合transition过渡使用

举个例子：盒子发生了旋转、倾斜、平移、放大

<style>
 .base {
 width: 100px;
 height: 100px;
 display: inline-block;
 background-color: #0EA9FF;
 border-width: 5px;
 border-style: solid;
 border-color: #5daf34;
 transition-property: width, height, background-color, border-width
;
 transition-duration: 2s;
 transition-timing-function: ease-in;
 transition-delay: 500ms;
 }
 .base2 {
 transform: none;
 transition-property: transform;
 transition-delay: 5ms;
 }
 .base2:hover {
 transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px
, 25px);
 }
</style> <div class="base base2"></div>

animation 实现自定义动画

# animation是8个属性的简写

image-20250725153208206

image-20250725153220726

css动画只需要定义一些关键的帧，通过@keyframes来定义关键帧

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg)
    }
}

# 13 介绍一下grid网格布局

二维的网格布局

擅长将一个页面划分为主要的几个区域，以及定义这些区域的大小、位置、层次等关系

image-20250725155147474

使用display: grid;或者display:inline-grid 创建要给网格容器

属性：

grid-template-columns属性设置列宽

grid-template-rows属性

.wrapper {
    dispaly:grid;
    grid-template-columns: 200px 200px 200px;
    grid-gap: 5px;
    grid-template-rows: 50px 50px;
}

/*通过repeat函数简写*/
.wrapper {
    dispaly:grid;
    grid-template-columns: repeat(3,200px)
    grid-gap: 5px;
    grid-template-rows: repeat(2,50px)
}

以上表示固定列宽为200px 200px 200px 行高为50px 50px

image-20250725172913084

image-20250725172922114

image-20250725174158346

image-20250725174214828

image-20250725174330660

# 14 说说flexbox，以及适应场景？

响应式布局呗

flex: auto是什么意思：

flex: auto其实是flex: 1 1 auto; 的简写

多用于内容固定或者内容可控的布局场景

# 15 说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别

css像素

px就是一个css像素单位啦，在浏览器的渲染过程中，css像素会被换算成设备像素，然后px会受到下面的因素的影响而变化：

  • 每英寸像素（PPI）
  • 设备像素比（DPR）

在不同的dpr下，1个css像素可能对应多个设备像素

设备像素：物理像素

指设备能控制显示得最小物理单位，一个点，从屏幕设备生产得那天起，它上面的像素点就固定不变了，单位为pt

屏幕显示内容时，最终都会被映射到设备像素上

设备独立像素（DIP / DP）

与设备无关的逻辑像素，一种虚拟像素单位，和 CSS 像素几乎等价（在浏览器环境中常认为 DIP = CSS px），代表可以通过层序控制使用的虚拟的像素，是一个总体的概念，包括了css像素。设计它的目的就是为了跨设备都有一致的显示效果

不管手机屏幕多大多密集，1 个 DIP 都表示“在视觉上看起来差不多大小”

可以在 js中通过window.screen.width/ window.screen.height查看

平时说的电脑屏幕2560x1600分辨率打游戏说的就是这个

DPR（Device Pixel Ratio，设备像素比）

定义：DPR = 设备像素 / CSS 像素。

作用：告诉浏览器，1 个 CSS 像素需要用多少个物理像素来渲染。

在前端适配时，常用 window.devicePixelRatio 获取

PPI（Pixels Per Inch，像素密度）

每英寸像素，指屏幕每英寸的像素点数量，体现了屏幕的清晰度

计算公式：

PPI = √(宽² + 高²) / 对角线英寸

PI 越高，单位面积内像素点越多，画面越细腻。

前端适配场景：

  • 1px 问题（高分屏下 1px 看起来太粗，要用 transform: scale(0.5) 或 border-media query 方案解决）。
  • 响应式布局时，借助 rem/vw + DPR 来做适配。

图片适配：

  • DPR 高时要用多倍图（@2x/@3x），否则图片会模糊。

移动端优化：

  • 可以通过 viewport meta 标签控制 CSS 像素与设备像素的映射。

# 16 说说em/px/rem/vh/vw区别

css单位
相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位 cm、mm、in、px、pt、pc

这些都是长度单位，css中分相对长度单位，绝对长度单位

px

绝对单位，等于一个css像素，固定大小，不会随父元素或根元素的字体大小改变

应用场景：适用于固定宽高的元素，比如边框、图标。

em

相对单位，相对于当前元素的font-size，会继承父元素的字体大小

例子：

  • 父元素 font-size: 20px，子元素 width: 2em → 宽度 = 40px。
  • 如果子元素本身 font-size 再改了，em 的基准就会变。

应用场景：适合做和字体相关的间距（比如 padding: 0.5em）

rem

相对单位，相对于根元素（html）的 font-size。不受父元素影响

应用场景：常用于响应式布局，结合 html { font-size: calc(100vw / 10) } 动态计算，实现 1rem = 10% 屏幕宽度。

vh / vw

相对单位，基于视口（viewport）的宽高。

  • 1vh = 1% 的视口高度
  • 1vw = 1% 的视口宽度

随着浏览器窗口大小变化而变化

视口宽度 1000px → 10vw = 100px

视口高度 900px → 10vh = 90px

适合全屏布局，比如 height: 100vh 做满屏容器，或者 font-size: 5vw 实现自适应文字大小。

在移动端适配的时候，你更倾向于 rem 方案还是 vw 方案？为什么？

我两个都用过：

  1. rem 方案：配合 flexible.js 或 postcss-px-to-rem，把设计稿按比例换算到 rem，适合兼容性要求高的项目。
  2. 直接用 vw 按设计稿宽度百分比布局，不需要额外库，代码更简洁，但在一些老机型兼容性稍差

字体大小推荐用 rem，间距可以用 em，全屏用 vh/vw。

如果是新项目，主推 vw 方案，维护成本低。如果要兼容性好，团队习惯用 rem

# 17 让Chrome支持小于12px的文字方式有哪些？区别？

Chrome中文版浏览器会默认设定页面的最小字号是12px，英文版就没有限制

解决的方法有：

transform 缩放

.small-text {
  font-size: 12px;
  transform: scale(0.8);
}

/**
原理：先渲染 12px，然后通过缩放让视觉效果变小。
优点：兼容性好，常用。
缺点：缩放会影响布局，需要注意文字基线对齐。**/

-webkit-text-size-adjust:none（移动端常用）

html, body {
  -webkit-text-size-adjust: none;
}

/**
原理：阻止 WebKit 内核浏览器自动放大字体。
优点：在移动端能避免字体被强制放大。
缺点：桌面端 Chrome 限制仍然存在。**/

Zoom

zoom的字面意思是变焦，可以改变页面上元素的尺寸，属于真实尺寸

zoom: 50%; 表示缩小到原来的一半

zoom:0.5;

使用zoom来支持12px以下的字体

span{
    font-size:12px;
    zoom: 0.8;
}
有兼容性的问题

# 18 怎么理解回流和重绘？什么场景下会触发？

这两个是是浏览器渲染机制中的两个核心概念，在HTML中每个元素都可以立即成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

  • 回流（Reflow）：当元素的几何属性发生变化时（比如大小、位置、结构），浏览器需要重新计算布局，生成新的渲染树（重新排版
  • 重绘（Repaint）：当元素的几何属性没变，但样式（比如颜色、背景、阴影）发生变化时候，只需要重新填充像素，不会影响布局（重新上色）
  • 回流一定会引发重绘，重绘不一定引发回流

image-20250818115623468

如何触发？

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候就需要回流，如下面的情况：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 改变元素的几何属性（宽高、margin、padding、border、position、top/left 等）内容发生变化，比如文本变化或者图片替代
  • 页面一开始的渲染（这避免不了）
  • 浏览器的窗口尺寸变化
  • 获取某些属性（offsetHeight、scrollTop、getComputedStyle），因为浏览器要返回最新的布局结果

触发回流一定会触发重绘

改变元素的颜色（color、background-color）

改变可见性（visibility:hidden，不会触发回流；display:none 会触发回流）

改变阴影、outline 等不会影响布局的样式

那在项目里你是怎么优化回流和重绘的？

  1. 合并多次操作：避免频繁操作 DOM，如：用 classList 一次性修改多个样式
  2. 避免逐条读取布局信息：比如在循环里频繁读取 offsetHeight 再设置，会导致强制同步布局，应该先缓存再操作
  3. 使用 CSS3 动画 / transform：尽量用 transform 和 opacity 来做动画
  4. 避免频繁 resize、scroll 触发计算：这些操作可以用 debounce / throttle 优化
  5. 虚拟 DOM / requestAnimationFrame：借助框架的 diff 算法，减少真实 DOM 的更新次数

你能说下 GPU 加速（transform/opacity 动画） 为什么能减少回流吗？

浏览器渲染分为多个层：布局层 → 绘制层 → 合成层。

  • transform 和 opacity 的改变不会影响几何属性，所以不会触发回流和重绘，只会触发合成层的更新。
  • 这些操作通常由 GPU 加速，性能更高，因此推荐用 translate/scale/opacity 做动画，而不是直接改 top/left/width/height。

# 19 说说对css预编语言的理解？有哪些区别？

一种对css的扩展，提供了许多特性如：变量、函数、运算、嵌套等，让css更像一门编程语言，能提高样式的可维护性和复用性

sass/scss

Sass 最早的写法是缩进式（.sass 后缀，不写大括号和分号），现在主流用 SCSS（和 CSS 语法更接近）。

特点：

  • 变量（$color: red;）
  • 嵌套规则（结构更清晰）
  • Mixin 混入（可复用代码块）
  • Extend 继承（共享样式）
  • 强大的函数库（颜色处理、数学计算）

优点：社区大、生态成熟，现在很多前端项目默认用 SCSS。

less

  • 出现得比 Sass 晚一些，语法和 CSS 更接近。
  • 特点：
    • 变量（@color: red;）
    • 嵌套
    • Mixins
    • 支持运算（width: (100% / 3);）
  • 优点：和 CSS 兼容性好，上手简单，常用于一些老项目或 Ant Design。

stylus

语法最自由，可以不用分号、大括号甚至冒号。

特点：

  • 灵活的语法（很简洁，但也可能导致可读性差）
  • 丰富的函数库

优点：写起来很爽，但社区相对小众，现在用得不多。

特性 Sass/SCSS LESS Stylus
语法风格 严谨（接近 CSS） 接近 CSS 自由（可简洁）
变量符号 $ @ $ 或无符号
社区生态 最大，官方推荐 次之，常见于 UI 框架 小众
函数库 强大 一般 强大
学习成本 中等 低 稍高

那你在项目里具体是怎么用的？

我主要用 SCSS，因为它和 CSS 兼容性最好，而且 Vue/React 脚手架都内置支持

用 变量 管理主题色、字号、间距等，便于换肤主题等

用mixin封装响应式布局

写样式的时候使用嵌套来保持层次清晰

那 CSS 预处理和 CSS in JS 或 Tailwind 这些方案有什么区别？

  • 预处理器更偏向传统 CSS 工程化，它是编译时工具，生成的还是普通 CSS
  • CSS in JS 则是运行时方案，样式和逻辑绑定在一起，适合 React 项
  • Tailwind 这种原子化 CSS 是另一种思路，避免写自定义样式，而是用类名组合

scss和less的对比？

维度 LESS SCSS
变量符号 @ $
编译方式 JS 编译，浏览器可用 Dart-Sass 编译，性能更好
特性丰富度 基础功能为主 功能更强大（mixin、extend、function）
语法风格 简单，接近 CSS 接近 CSS，更强大
社区生态 相对小，老项目常见 主流选择，社区大

# 20 如何要做优化，css提高性能的方法有哪些？

我理解的css优化分两类：

加载性能优化（让 CSS 下载和解析更快）

  • 减少 CSS 文件体积：
    • 使用 CSS 压缩、去掉无用样式（比如 PurgeCSS / uncss）
  • 合并/拆分合理:
    • 公共样式打包成一个文件，避免重复加载
    • 按需加载组件样式，减少首屏体积
  • 使用 CDN：让静态资源分发更快
  • 避免 @import：它会阻塞加载，推荐用 <link>。
  • Critical CSS（关键渲染路径优化）：首屏关键样式内联，非关键样式延迟加载

渲染性能优化（让 CSS 执行更高效，减少回流和重绘）

  • 避免过度嵌套：选择器层级太深会增加匹配开销，比如 div ul li span，尽量用类选择器。
  • 减少通配符/低效选择器：避免 *、[attr=value]、后代选择器，大量使用会拖慢渲染。
  • 避免使用 !important 乱用，会破坏层叠计算效率
  • 减少使用昂贵属性：
    • box-shadow、border-radius、filter 在低端设备会导致卡顿；
    • 尤其是 position: fixed、will-change 滥用会触发 GPU 额外开销。
  • 避免大面积动画触发布局：
    • 优先用 transform 和 opacity 做动画，这样只会触发合成层，不会导致回流重绘。
  • 减少回流/重绘：避免频繁修改元素样式，推荐用 class 切换代替逐个样式操作

工程层面的优化

  • 使用预处理/后处理工具：比如 PostCSS 自动优化前缀、压缩。
  • 组件化/模块化样式：提高可维护性，减少全局污染。
  • 使用 Tailwind/原子化 CSS：减少 CSS 冗余，提升构建性能

# 说说你对CSS工程化的理解

行内样式等样式不能复用、权重太高、不能缓存、表现成和结构层没有分离

并且不建议使用@import ,因为加载很慢要等全部资源加载完毕之后才开始下周；并且只能放在style标签的第一行，放其他则无效

后面就出了sass/less这样的预处理器，但其实打包出来的结果还是一样的

后处理器postcss，可以称为css的babel，使用ast去分析我们的css代码

css模块化的定义：

为了class命名冲突、结构、复用

实现方式：

BEM命名规范

块、元素、修饰符

.block{
	
}

.block__element{
    
}

.block--modifider{
    
}

CSS Modules

可以像import js一样引入我们的css代码，并且css Modules在打包的时候会自动将类名转换hash，完全杜绝css类名的冲突问题

配置css-loader打包

打包出来的是一长串的hash

CSS in JS

js中编写css

# 怎么样实现样式隔离

  1. 作用域样式 Scoped Styles
  2. CSS Modules
  3. 命名约定
  4. CSS-in-JS方案

# object-fit用法

# html和css中的图片加载与渲染规则是什么？

web浏览器会解析HTML代码解析成一个DOM树，html中的每个标签都是DOM树中的一个节点，是包括dispaly: none隐藏的标签，还有js动态添加的元素等

浏览器会获取到所有的样式并将所有的样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式

浏览器将会把DOM树和样式规则组合在一起（匹配）后会合建一个渲染树，渲染树类似于DOM树，但是其实还是区别很大的：渲染树每个节点都有自己的样式，而且渲染树不包含隐藏的节点

一旦渲染树构建完毕了浏览器就可以根据渲染树来绘制页面了

后面就回流绘制了

然后关于图片加载渲染，当然可以套：

  • 解析HTML遇到img或picture标签，将会加载图片
  • 解析加载的样式遇到background-image并不会加载图片而会构建样式规则树
  • 加载js，相关的js对图片的操作也加进去
  • DOM树和样式规则匹配构建渲染树，如果匹配到backgorund-image，则会加载背景图片
  • 计算元素位置进行布局
  • 开始渲染图片，浏览器将呈现渲染出来的图片

# z-index属性在什么情况下会失效？

  • 父元素position为relative时，子元素的z-index失效
  • 元素没有设置position为非static属性
  • 设置z-index的同时还设置了float浮动

# css的优先级：

!import>内联>ID选择器>类选择器>标签选择器

权重比较

低等级的选择器再多也不能超过高等级选择器的

# 解决动画卡顿？什么是硬件加速

CPU和GPU的区别：

CPU中央处理器

GPU图像处理器，显卡

每一帧都会执行样式渲染的操作

一般浏览器的刷新率为60HZ，即1秒刷新60次

1000ms / 60HZ = 16.6 ,也就是大概每过16.6ms浏览器就会渲染一帧画面，超过这个时间，页面的渲染就会出现卡顿影响用户体验

减少或者避免layout,paint可以让页面减少卡顿，动画效果更加流畅

一个更加完整具体的渲染流程：

  • 创建布局树进行分层，并生成分层树
  • 为每个图层生成绘制列表，并将其提交到合成线程
  • 合成线程将突出分成图块，并在光栅化线程池中将图块转换成位图
  • 合成线程发送绘制图块的命名DrawQuad给浏览器进程
  • 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上

普通图层和符合图层

硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器

使用硬件加速可能会导致内存问题，还会影响字体的抗锯齿效果

所以不要大量使用复合图层

# css动画和js实现的动画分别有哪些优缺点？

css动画

优点：

  • 浏览器可以对动画进行优化
  • 代码相对简单调试方便
  • 对帧数不好的低版本浏览器会做到自动降级

缺点

  • 运行过程控制较弱
  • 代码冗长，想用css实现稍微复杂的样式会变成笨重

js动画

优点

  • 控制能力强
  • 动画效果丰富
  • js没有兼容性问题

缺点

  • 代码复杂度高于css
  • js在浏览器的主线程运行，而主线程中js脚本，可能出现阻塞出现丢帧的情况

js面试汇总