2024前端面试题！（附答案及解析）（2024.10月最新版）

admin管理员组

文章数量:1608934

目录

一、HTML篇

1、HTML5 新增那些标签?

2、常见的块元素、行内元素以及行内块元素，三者有何不同？

3、HTML、XML、XHTML它们之间有什么区别？

4、DOCTYPE(⽂档类型) 的作⽤

5、localStorage、sessionStorage、cookie 三者明细区别？

6、网站TDK三大标签以及SEO优化 

7、img标签的title属性与alt属性的区别是什么？

8、src 和 href 的区别？

9、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ 

10、iframe的优点和缺点 ？

二、CSS篇

1、说一下 link 与 @import 的区别和用法？

2、rgba和opacity的透明效果有什么不同？

3、display:none与visibility:hidden的区别？

4、定位布局 position中的relative、absolute、fixed、sticky它们之间的区别？

5、如何用CSS3画一条0.5px的直线？

6、如何用CSS3画一个三角形？

7、CSS3盒子模型：标准盒模型、怪异盒模型

8、浮动（float)以及清除浮动的方法

9、Flex布局

10、CSS3中“transform”属性~平面转换

11、CSS3中 “子绝父相” 定位布局

12、盒子居中的几种方法：“子绝父相”、“Flex布局”、“transform”

13、CSS3中有哪些新特性？

14、CSS3选择器及其优先级

15、CSS3中 “transition” 过渡属性

16、结构伪类选择器&伪元素选择器

17、display的block、inline和inline-block的区别？

18、定位堆叠顺序z-index

三、HTML&&CSS混合篇

1、Localstorage、sessionStorage、cookie 的区别

2、如何实现双飞翼（圣杯）布局？ 

3、伪元素和伪类的区别和作用？

4、img 的 alt 与 title 的异同，还有实现图片懒加载的原理？

5、BFC 是什么？ 

四、JavaScript篇

1、JS基础类型和复杂类型

2、箭头函数与普通函数的区别？

3、JS中null和undefined的判断方法和区别？

4、原型链

5、v-show 与 v-if 的区别？

6、keep-alive 的作用是什么?

7、闭包的理解?

8、JS垃圾回收机制

9、nextTick的实现？

10、混入mixin的原理？

11、列举和数组操作相关的方法

12、typeof和instanceof的区别是什么？ 

13、JS中 “==“和“===“的区别详解

14、如何用原生 JS给一个按钮绑定两个 onclick 事件？

15、var、let和const的区别？

16、讲解js的call、apply和bind区别？

17、谈谈你对webpack的理解？

18、 const定义的对象属性是否可以改变？

19、栈溢出及解决方法？

20、JS如何实现多线程？

21、浅拷贝和深拷贝区别概念常见情况？

22、事件循环，Promise和async/await的详解

23、JS中数组常用方法详解 

五、Vue2篇

​1、什么是前端构建工具?比如（Vue2的webpack，Vue3的Vite）

​2、Vue 组件之间的通信方式

​3、Vuex的理解及使用场景

4、vue 的生命周期 八个阶段

5、简述Vue每个周期具体适合哪些场景？

6、简述MVVM 和MVC的原理以及区别？

7、vue常见指令

8、vue中的data为什么是一个函数？起到什么作用？ 

9、vue中ref的作用？  

10、vue中hash和history的区别 ？  

六 、Vue3篇

1、Vue2.0和Vue3.0的区别？

2、Vue3带来了什么改变？ 

3、生命周期（vue2和vue3的生命周期对比）有哪些？

4、Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？

5、vue3的常用 Composition API有哪些？

6、Vue3中的ref函数

七、React篇

1、讲讲什么是 JSX ？

2、React 的生命周期方法有哪些？

3、React的Hooks详解

4、React和Vue.js的相似性和差异性是什么？

5、React的功能是什么？ 

6、React的一些主要优点是？

7、React的局限性是什么？

8、如何理解React State不可变性的原则

9、React的特点和关键版本区别？

八、uniapp篇

1、uniapp优缺点

2、uniapp目录结构

3、跨端适配—条件编译 

4、uniapp 常用的指令语句

5、uniapp 应用的生命周期、页面的生命周期、组件的生命周期

九、Webpack篇

1、Webpack是什么？

2、Webpack的打包过程/打包原理/构建流程？ 

3、Webpack中loader的作用/ loader是什么？

4、常见的loader有哪些？

5、Plugin有什么作用？Plugin是什么？

6、常见的Plugin有哪些？

7、Webpack中Loader和Plugin的区别

8、如何利用webpack来优化前端性能？

9、Webpack如何配置压缩代码？压缩了什么？

10、如何提高webpack的构建速度？ 

十、Git/SVN篇

1、Git是什么？

2、简述Git中如何将一个新增文件添加到本地仓库？

3、Git常用命令

4、Git和SVN有什么区别?

十一、B站开源视频大汇总，前端从入门到精通

1、web 入门（HTML5+CSS3）

2、js（JavaScript+jQuery+Ajax）

3、Vue 开发（Vue2+Vue3+实战项目）

4、React &&微信小程序开发&&uniapp

5、华为鸿蒙进阶

6、ssr（Nuxt+Next.js）

7、工程化（webpack+vite）

8、可视化（echarts ）

9、源码（虚拟DOM和diff算法）

10、移动App跨端开发（Uni-App）

11、桌面应用开发（Electron）

12、网络知识（网络概述+结构算法）

13、浏览器底层原理

• 觉得有帮助的小伙伴右上角点赞收藏哦~会一直持续更新得呦~有好的建议私信我~

---

一、HTML篇

1、HTML5 新增那些标签?

（1）布局标签（语义化标签）

• <header> : 头部标签
• <nav> :       导航标签
• <article> :   内容标签
• <section> : 定义文档某个区域
• <aside> :    侧边栏标签
• <footer> :   底部标签

图形结合记忆法：

（2）视频标签(video)

（3）audio(音频)

  

（4）新的 API

• 音视频：audio 和 video 元素
• 绘图图形：canvas 元素
• 本地存储：localStorage，sessionStorage
• 多线程操作：Web Worker （Web Worker 是HTML5 新特性，允许我们在 js 主线程之外开辟新线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力 ）

更多HTML5新属性=>W3Cschool官网：开始学习HTML5_w3cschool

语义化的优点如下：

• 在没有CSS样式情况下也能够让页面呈现出清晰的结构
• 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
• 方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

2、常见的块元素、行内元素以及行内块元素，三者有何不同？

（1）块元素

（2）行内元素：a，span，em(i)，strong(b)，u

 （3）行内块元素

3、HTML、XML、XHTML它们之间有什么区别？

4、DOCTYPE(⽂档类型) 的作⽤

        Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。

浏览器渲染页面的两种模式（可通过documentpatMode获取）：

• CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
• BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

5、localStorage、sessionStorage、cookie 三者明细区别？

1. cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
2. cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
3. sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage 数据在当前浏览器窗口关闭后自动删除。
• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

6、网站TDK三大标签以及SEO优化 

TDK是网站标题（title）、描述（description）、关键词（keywords）这三者的英文首字母缩写，主要用来对当前网页进行总结和概况。

在SEO界，标题、描述、关键词通常也被称为三大标签。

7、img标签的title属性与alt属性的区别是什么？

• alt是给搜索引擎识别，在图像无法显示时的替代文本
• title属性是关于元素的注释信息，主要是给用户解读
• 在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用

注意：（IE已淘汰，仅做了解即可）

当鼠标放到文字或是图片上时有 title 文字显示。

（因为IE不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。

8、src 和 href 的区别？

src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：

• src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
• href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。

9、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ 

title与h1的区别

• 从网站角度看，title 更重于网站信息。title可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。
• 从文章角度看，h1则是用于概括文章主题。
• 一个网站可以有多个title,最好一个单页用一个title，以便突出网站页面主体信息，从seo看，title权重比h1高，适用性比h1广。
• 标记了h1的文字页面给予的权重会比页面内其他权重高很多。一个好的网站是h1和title并存，既突出h1文章主题，又突出网站主题和关键字。达到双重优化网站的效果。

b与strong 的区别

• b 是只是对文本的简单加粗， strong 是一个语义化标签，对相关文本具有强调作用
• b 标签只是侧重于字体加粗， strong标签加强字体的语气都是通过粗体来实现的，相比之下，搜索引擎更喜欢侧重于strong标签
• strong标签更注重于内容上的应用，在html中，对关键词的标明，然而还有一些网站上，也有使用strong标签登对小标题进行强调，但是在页面中，如果出现过多的strong标签，可能会对排名不利。

i 与 em 的区别

•  i(italic)是实体标签，用来使字符倾斜，em(emphasis)是逻辑标签，作用是强调文本内容
• i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
• em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。
• 建议：为了符合CSS3的规范，i 标签应尽量少用而应改用 em

10、iframe的优点和缺点 ？

iframe的缺点：

1. 页面样式调试麻烦，出现多个滚动条；
2. 浏览器的后退按钮失效；
3. 过多会增加服务器的HTTP请求；
4. 小型的移动设备无法完全显示框架；
5. 产生多个页面，不易管理；
6. 不容易打印；
7. 代码复杂，无法被一些搜索引擎解读。
8. 搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe的优点：

1. iframe能够原封不动的把嵌入的网页展现出来。
2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
5. 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)

总而言之：

• 运维性网站或继承性开发的网站，可以使用iframe;
• 销售内，官网、展示性网站等建议不使用iframe;
• 标准的网页设计是不使用iframe的。

二、CSS篇

1、说一下 link 与 @import 的区别和用法？

页面导入外部css文件的方法通常有两种，一种在网页中直接link标签加入，另一种在页面中@import引入css文件。两种引入形式如下：
link引入形式：

<link href="styles.css" type="text/css" />

@import引用形式：

<style type="text/css">
    @import url("styles.css");
</style>

1、适用范围不同
@import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。

2、功能范围不同
link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义rel连接属性，定义RSS等，@import就只能加载CSS。
3、加载顺序不同
页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）
4、兼容性
由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
5、控制样式时的差别
使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。
6、使用DOM控制样式时的差别
当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

2、rgba和opacity的透明效果有什么不同？

• opacity

opacity是一个属性。opacity属性的值，可以被其子元素继承，给父级div设置opacity属性，那么所有子元素都会继承这个属性，并且，该元素及其继承该属性的所有子元素的所有内容透明度都会改变。

• rgba（0，0，0，0.5）

rgba是一个属性值。rgba设置的元素，只对该元素的背景色有改变，并且，该元素的后代不会继承该属性。
补冲：rgba只是一个属性值，在background 里用改变背景色，在color里是改字体颜色，shadow里是改阴影色，不止是能够改元素的背景色，要看具体是在哪个属性上用

3、display:none与visibility:hidden的区别？

这两个属性都是让元素隐藏，不可见。两者区别如下：

（1）在渲染树中

• display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
• visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

（2）是否是继承属性

• display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
• visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

（3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；
（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

（5）display：none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
（6）visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

4、定位布局 position中的relative、absolute、fixed、sticky它们之间的区别？

（1）relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。

（2）absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。

（3）fixed: 生成绝对定位，相对于浏览器窗口或者frame进行定位。（老版本IE不支持）

（4）static:默认值，没有定位，元素出现在正常的文档流中。（很少用）
（5）sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。（很少用）

5、如何用CSS3画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

6、如何用CSS3画一个三角形？

<style>
.up{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-top: 100px solid red;/*红色*/
}
.down{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-bottom: 100px solid blue;/*蓝色*/
}
.left{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-left: 100px solid pink;/*黑色*/
}
.right{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-right: 100px solid pink;/*黄色*/
}
</style>

<body>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</body>

实现效果：

 

7、CSS3盒子模型：标准盒模型、怪异盒模型

盒子模型分为两种:

• 第一种是 W3C 标准的盒子模型（标准盒模型）
• 第二种 IE 标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的表现效果的区别之处：

1、标准盒模型中 width 指的是内容区域 content 的宽度

height 指的是内容区域 content 的高度

标准盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式

可以为 box-sizing 赋两个值：

1、box-sizing: content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin

2、box-sizing: border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型，总宽=width+margin

• 相邻块元素垂直外边距的合并

• 嵌套块元素垂直外边距的塌陷

8、浮动（float)以及清除浮动的方法

(1) 脱标

(2) 清除浮动

(3) 清除浮动的方法

• 清除浮动 —— 额外标签法
• 清除浮动 —— 父级添加 overflow

• 清除浮动 —— :after 伪元素法

• 清除浮动 —— 双伪元素清除浮动

9、Flex布局

1、主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

2、侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

3、换轴

使用flex-direction改变元素排列方向

4、弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

10、CSS3中“transform”属性~平面转换

（1）位移：transform: translate(水平移动距离, 垂直移动距离)

 （2）旋转

transform: rotate(角度); 注意：角度单位是deg

取值为正, 则顺时针旋转 Ø 取值为负, 则逆时针旋转

（3）缩放

• transform: scale(x轴缩放倍数, y轴缩放倍数);
• transform: scale(缩放倍数);
• scale值大于1表示放大, scale值小于1表示缩小

（4）transition的基本用法

transition：[属性名] [持续时间] [速度曲线] [延迟时间]

我们可以很方便的用这个过渡来给某一个属性加上好看的动效。

例如，高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：

transition:height 2s ease 0.5s
或者一个属性不够，想要监听所有属性。

transition: all 2s ease .5s

11、CSS3中 “子绝父相” 定位布局

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

• ① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
• ② 父盒子需要加定位限制子盒子在父盒子内显示。
• ③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

12、盒子居中的几种方法：“子绝父相”、“Flex布局”、“transform”

（1）利用定位（子绝父相）、margin-left、margin-top实现

（2）利用定位（子绝父相）、transform属性实现

（3）利用flex布局实现盒子居中

13、CSS3中有哪些新特性？

• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
• 圆角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 阴影和反射 （Shadoweflect）
• 文字特效 （text-shadow）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 增加了旋转,缩放,定位,倾斜,动画,多背景

14、CSS3选择器及其优先级

对于选择器的优先级：

• 标签选择器、伪元素选择器：1
• 类选择器、伪类选择器、属性选择器：10
• id 选择器：100
• 内联样式：1000

注意事项：

• !important声明的样式的优先级最高；
• 如果优先级相同，则最后出现的样式生效；
• 继承得到的样式的优先级最低；
• 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
• 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

15、CSS3中 “transition” 过渡属性

16、结构伪类选择器&伪元素选择器

1、结构伪类选择器：可方便的选取一个或多个特定的元素

• :first-child 选取属于其父元素的首个子元素
• :last-child 选取属于其父元素的最后一个子元素
• :nth-child(n) 选择第n个子元素

　　　    n=even / 2n ：选取偶数孩子  

　　　　n=odd / 2n+1 ：选取奇数孩子

2、伪元素选择器：

• ::first-letter / line: 文本第一个单词 / 第一行
• ::selection: 改变选中文本的样式
• ::before & ::after

这两兄弟特性一样：1.必须要带content属性（可以为空）

　　　　　　　　　2.属于行内盒子

3、属性选择器：

• div[class=xx]: 选择类名为xx的div
• div[class^=xx]: 选择以类名为xx开头的div
• div[class$=xx]: 选择类名是以xx结束的div
• div[class*=xx]: 选择类名带有xx的div

（1）结构伪类选择器

 （2）伪元素选择器

17、display的block、inline和inline-block的区别？

（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

行内元素

• 设置宽高无效；
• 可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
• 不会自动换行；

块级元素

• 可以设置宽高；
• 设置margin和padding都有效；
• 可以自动换行；
• 多个块状，默认排列从上到下。

18、定位堆叠顺序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法： 选择器 { z-index: 1; }
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

• 如果属性值相同，则按照书写顺序，后来居上

• 数字后面不能加单位

• 只有定位的盒子才有 z-index 属性

三、HTML&&CSS混合篇

1、Localstorage、sessionStorage、cookie 的区别

共同点：都是保存在浏览器端、且同源的

三者区别：

1、cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器

间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。 cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下

2、存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie、 所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存 储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

3、数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭之前有效；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭

4、作用域不同

sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；

localstorage 在所有同源窗口中都是共享的；

cookie 也是在所有同源窗口中都是共享的

5、web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

6、web Storage 的 api 接口使用更方便。

2、如何实现双飞翼（圣杯）布局？ 

 1、利用定位实现两侧固定中间自适应

        父盒子设置左右 padding 值

        给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

        中间盒子自适应

2、利用 flex 布局实现两侧固定中间自适应

        父盒子设置 display：flex

        左右盒子设置固定宽高

        中间盒子设置 flex：1 

3、伪元素和伪类的区别和作用？

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

4、img 的 alt 与 title 的异同，还有实现图片懒加载的原理？

• 异同

alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字,title

是对图片的描述与进一步说明;

这些都是表面上的区别，alt 是 img 必要的属性，而 title 不是 对于网站 seo 优化来说，title 与 alt 还有最重要的一点： 搜索引擎对图片意思的判断，主 要靠 alt 属性。所以在图片 alt 属性中以简要文字说明，同时包含关键词，也是页面优化的 一部分。条件允许的话，可以在 title 属性里，进一步对图片说明 由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以 说延迟加载几乎是标配了。

• 原理

图片懒加载的原理很简单，就是我们先设置图片的 data-set 属性（当然也可以是其他任意的， 只要不会发送 http 请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所 以不会发送 http 请求。 然后我们计算出页面 scrollTop 的高度和浏览器的高度之和， 如果 图片距离页面顶端的坐标 Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是 其他情况），这时候我们再将data-set 属性替换为 src 属性即可。

本文标签： 最新版面试题答案