css面试题

flower_tomb

已于 2023-02-09 15:47:29 修改

阅读量140

点赞数

分类专栏：刷题面试类文章标签： css 前端 javascript

于 2023-02-09 15:37:36 首次发布

本文链接：https://blog.csdn.net/qq_41539461/article/details/128932447

版权

刷题面试类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1，页面导入样式时，使用 link 和 @import 有什么区别

1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

2，浏览器的渲染原理

解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display: 将像素发送给GPU，最后通过调用操作系统Native GUI的API绘制，展示在页面上。

3，浏览器如果渲染过程中遇到JS文件怎么处理？

渲染过程中，如果遇到js就停止渲染，执行 JS 代码。因为浏览器有GUI渲染线程与JS引擎线程，为了防止渲染出现不可预期的结果，这两个线程是互斥的关系。JavaScript的加载、解析与执行会阻塞DOM的构建，也就是说，在构建DOM时，HTML解析器若遇到了JavaScript，那么它会暂停构建DOM，将控制权移交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复DOM构建。
也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer(延迟) 或者 async(异步) 属性（下文会介绍这两者的区别）

4，讲一讲回流和重绘

定义：回流就是计算元素的形状，大小，位置，重绘就会转换为屏幕上的实际像素（即一个点是显示黑色还是白色）
特点：回流倾向于结构调整，对性能影响更大，重绘倾向于样式调整，对性能影响较小。回流一定重绘，重绘不一定回流
容易引发回流的操作：
*页面一开始渲染的时候（这肯定避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
元素字体大小变化
激活CSS伪类（例如：:hover）
一些常用且会导致回流的属性和方法：

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()**

5，浏览器对回流重绘的优化机制

现代浏览器会对频繁的回流或重绘操作进行优化：
浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值时，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

当你访问以下属性或方法时，浏览器会立刻清空队列：

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
width、height
getComputedStyle()
getBoundingClientRect()

为什么？
因为队列中可能会有影响到这些属性或方法返回值的操作，以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。

6，如何减少回流与重绘

使用 transform 替代 top
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
使用cssText或者class合并对dom的修改
如果对dom循环修改或者插入的话，可以选择先将dom的display设置成none，修改好以后再显示，这样只会产生两次回流
不要把节点的属性值放在一个循环里当成循环里的变量。
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
CSS 选择符从右往左匹配查找，避免节点层级过多
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。

7，async和defer的作用是什么？有什么区别?

defer是延迟执行，即并行下载js，但是直到html解析完成以后才执行js
async是异步执行，即并行下载js，但是下载完成就执行js,执行完成后继续加载dom
在加载多个JS脚本的时候，async是无顺序的加载，而defer是有顺序的加载。

8，为什么操作 DOM 慢*

JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞，而是两个模块之间的协作。

因为 DOM 是属于渲染引擎中的东西，而 JS 又是 JS 引擎中的东西。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。这个“跨界交流”的实现并不简单，它依赖了桥接接口作为“桥梁”（如下图）。

9，简述前端性能优化

1 减少回流重绘的一些策略，
2 给js加defer属性等等
3 使用css精灵图，合并文件等方法减少http请求次数
4 减少首屏加载的资源，被动的资源尽量等用户手动请求

10，如何实现浏览器内多个标签页之间的通信？

只能实现同一浏览器相同域名、相同协议、相同端口下的多个标签页之间的通信

使用 websocket 协议，因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。
使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。其实JavaScript原生就有一个监听localStorage变化的事件——storage，使用方法如下

window.addEventListener('storage', () => {
  // callback
})

使用 ShareWorker 的方式，shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。
使用 postMessage 方法，如果我们能够获得对应标签页的引用，就可以使用postMessage 方法，进行通信。

11，什么是 webp

是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的
使用直接色的点阵图。使用 webp 格式的最大优点是是，在相同质量的文件下，它拥有更小的文件体积。

12，浏览器如何判断是否支持 webp 格式图片？

通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数，那么就说明浏览器不支持 webp格式的图片。

13，介绍下 BFC 及其应用

body根元素
设置浮动(元素的float不包括none)
设置定位(position为absoulte或者fixed)
行内块显示模式，inline-block
设置overflow，即hidden，auto，scroll
表格单元格(table-cell,table-caption
弹性布局，flex

不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响
我主要是应用于解决margin塌陷的问题和清除浮动
当浮动产生影响的时候，可以利用BFC来清除浮动的影响（当未给定高度的父盒子里面的子元素浮动，父盒子会失去原有高度，这时也可为父元素添加overflow属性）

14，怎么让一个 div 水平垂直居中？

1：div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，

　　div{
    width: 200px;
    height: 200px;
    background: green;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

2：div绝对定位水平垂直居中【margin 负间距】这或许是当前最流行的使用方法。

 div{
    width:200px;
    height: 200px;
    background:green;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}

3：div绝对定位水平垂直居中【Transforms 变形】

div{
    width: 200px;
    height: 200px;
    background: green;
    position:absolute;
    left:50%;    /* 定位父级的50% */
    top:50%;
    transform: translate(-50%,-50%); /*自己的50% */
}

4：css不定宽高水平垂直居中【弹性盒】

.box{
     height:600px;
     display:flex;
     justify-content:center;
     align-items:center;
       /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
    background: green;
    width: 200px;
    height: 200px;
}

5：将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

<p class="outerBox tableCell">
  </p><p class="ok">
    </p><p class="innerBox">tableCell</p>
  <p></p>
<p></p>
 
 
/*
table-cell实现居中
将父盒子设置为table-cell元素，设置
text-align:center,vertical-align: middle;
子盒子设置为inline-block元素
*/
.tableCell{
  display: table;
}
.tableCell .ok{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.tableCell .innerBox{
  display: inline-block;
}

6：对子盒子实现绝对定位，利用calc计算位置

<p class="outerBox calc">
    </p><p class="innerBox">calc</p>
<p></p>


/*绝对定位，clac计算位置*/
.calc{
  position: relative;
}
.calc .innerBox{
  position: absolute;
  left:-webkit-calc((500px - 200px)/2);
  top:-webkit-calc((120px - 50px)/2);
  left:-moz-calc((500px - 200px)/2);
  top:-moz-calc((120px - 50px)/2);
  left:calc((500px - 200px)/2);
  top:calc((120px - 50px)/2);
}

15，分析比较 opacity: 0、visibility: hidden、display:none 优劣和适用场景

opacity:0
这个属性是设置元素透明度用的，设置opacity:0后元素会直接变成透明，但还会占用着页面元素的位置，并且设置的事件能够触发。相当于一个透明人站在你面前，虽然看不见，但依旧能触摸到。
visibility:hidden
这个属性是设置元素是否可见的，设置visibility:hidden后元素就会被隐藏（hidden），和opacity类似，依旧占用着页面元素的位置，但却不能触发其中绑定的事件。你眼前的透明人不仅看不见，而且变成了空气，无法触摸。
display:none
这个属性是设置元素展示（display）的方式，当把元素设置为display:none后，该元素不会占用页面位置，如果周围有其他元素的话，会补上它空出来的位置，元素都不在了所以就无法触发绑定事件了。你眼前的人直接人间蒸发了。

16，简述伪类和伪元素

伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。

17，什么是盒子模型？

一个盒子我们会分成几个部分：内容区(content)、内边距(padding)、边框(border)、外边距(margin)，也就是盒模型的组成由margin，padding，boder，content组成
盒子模型分为标准盒子模型和IE盒子模型
标准盒子模型你设置的宽度实际上是内容区也就是content的宽度，怪异盒模型你设置的宽度实际上是盒子的总宽度，包括padding和border

18，HTML和HTML5有什么区别？

在文档声明上，HTML的声明代码很长很复杂，而HTML5的声明更为简单
在标签上，HTML没有结构语义化的标签，HTML5则增加了很多语义化的标签，比如：

、

19，如何理解HTML5语义化？

在没有css代码的情况下，也能很好的呈现内容结构、代码结构（让非技术员也能看懂代码），便于团队开发与维护
利于SEO。语义化能和搜索引擎建立更好的联系，优化搜索

【SEO的理解】

20，cookies、sessionStorage、localStorage的区别是什么

1、cookie
（1）本身用于客户端和服务端通信，所以要成功创建 Cookie 需要借助服务器环境
（2）但是它有本地存储的功能，于是就被“借用”
（3）document.cookie = …获取和修改即可
（4）cookie用于存储的缺点
①存储量太小，只有4kb
②所有http请求都带着，会影响获取资源的效率
③api简单，需要封装才能用document.cookie
2、localStorage,sesseionStorage
（1）html5专门为存储而设计，最大容量5M
（2）api简单易用
（3）lcoalStorage.setItem(key, value);localStorage.getItem(key);
3、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

21，常见的浏览器内核有哪些？

Trident：代表浏览器是ie浏览器，因此Trident内核又称E内核，此内核只能用于Windows平台，并且不是开源的。
Gecko内核：代表浏览器是Firefox浏览器。Gecko内核是开源的，最大优势是可以跨平台。
Webkit ：Webkit内核:代表浏览器是Safari(苹果的浏览器)以及低版本的谷歌浏览器，是开源的项目。
Presto内核：代表浏览器是Opera浏览器(中文译为“欧朋浏览器”)，Presto内核是世界公认最快的渲染速度的引擎，但是在2013年之后，Open宣布加入谷歌阵营，弃用了该内核。
Blink内核：**由谷歌和Opera开发，2013年4月发布，现在Chrome内核是Blink。

22，谈谈你对web标准以及W3C的理解？

web标准主要强调的是一个网站的结构,样式,行为。这三者在网站进行编写的时候应该尽量做的分离，从而达到结构清晰，易于阅读，易于维护的目的
结构：指我们平时在body里面写的标签，主要是由HTML标签组成
表现：指更加丰富HTML标签样式，主要由CSS样式组成
行为：指页面和用户的交互，主要由JS部分组成
W3C：
W3C对web标准提出了规范化的要求，即代码规范
对结构的要求
1、标签字母要小写
2、标签要闭合
3、标签不允许随意嵌套
对表现和行为的要求
1、建议使用外链CSS和js脚本，实现结构与表现分离、结构与行为分离，能提高页面的渲染效率，更快地显示网页内容

23，如何实现浏览器响应式布局？

使用媒体查询（@media）
使用flex弹性布局
使用百分比单位
使用rem单位
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

24，CSS选择器以及优先级的理解？

常用的CSS选择器,
ID选择器、类选择器、标签选择器、属性选择器、伪类选择器、后代选择器
权重划分，在同一层级下：
!important > 内联样式 > ID选择器 > 类选择器 > （标签选择器、伪类选择器、属性选择器）

不同层级下：
正常来说权重值越高的优先级越高，但是一直以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高

25，你对css 预处理器less和sass的了解

Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
sass经常用的有混入@mixin，@include选择器嵌套，属性嵌套（比如font的family,size,weight）,支持使用变量，支持数字的加减乘除、取整等运算，还有一些内置的函数

$var : 16px;
.fontSize {
	font-size: $var;
}

26，的 title 和 alt 有什么区别

1、title是全局属性之一，用于为元素提供附加的信息。通常当鼠标滑动到元素上的时候显示。

2、alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屛器阅读图片。可提高图片的访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析

27，表单中readonly和disabled的区别

readonly只对input和textarea有效，但是disabled对于所以的表单元素都是有效的，包括radio，checkbox等
如果表单中使用的disabled那么用户是不能选择的，也就是说这个文本框是无法获取到焦点的，而readonly是可以获取到焦点，只是不能修改，为只读
最重要的一点，在发送表单的时候，如果某个表单字段是disabeld，则该字段不会发送，也不会形成键值对，用jQuery的serializerayyay也是一样的，可以来试一下

28，浏览器中输入url到网页显示，整个过程发生了什么

域名解析
发起tcp三次握手
建立tcp连接之后发起htttp请求
服务器端响应http请求，浏览器得到html代码
浏览器器解析html代码，并请求html代码中的资源
浏览器对页面进行渲染呈现给用户

29，get请求和post请求有什么区别？【重要】

1.get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据）；post请求一般是去提交数据。
2.get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的，一般限制在 2~8K 之间，更加常见的是 1k 以内；
post请求是没有的长度限制，请求数据是放在body中；
3.get请求可以被缓存，post请求不会被缓存。
4.get请求只能进行url编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）

30，列表内容很多，加载很慢怎么办

懒加载（怎么实现）