肝了一晚上整理出来的前端面试题，2024年前端面试心得

dns 缓存， cdn 缓存，浏览器缓存，服务器缓存

14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些

图片的加载，给用户更好的体验

1 ）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与

页面的距离，如果前者小于后者，优先加载。

2 ）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3 ）如果图片为 css 图片，可以使用 CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技术。

4 ）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用

户体验。

5 ）如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩

后大小与展示一致

15. 你如何理解 HTML 结构的语义化

1 ）更符合 W3C 统一的规范标准，是技术趋势。

2 ）没有样式时浏览器的默认样式也能让页面结构很清晰。

3 ）对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来 “ 读 ” 你的网页。

4 ）对其他非主流终端设备友好。例如机顶盒、 PDA 、各种移动终端。

5 ）对 SEO 友好。

16. 谈谈以前端角度出发做好 SEO 需要考虑什么

搜索引擎主要以 :

外链数量和质量 , 网页内容和结构等来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况：

1 ） Meta 标签优化：主要包括主题（ Title) ，网站描述 (Description) 。还有一些其它的隐藏文字比如

Author （作者）， Category （目录）， Language （编码语种）等，符合 W3C 规范的语义性标签的使用

2 ）如何选取关键词并在网页中放置关键词：搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作

之一。首先要给网站确定主关键词（一般在 5 个上下），然后针对这些关键词进行优化，包括关键词密度

（ Density ），相关度（ Relavancy ），突出性（ Prominency ）等等。

17.html5 有哪些新特性、移除了那些元素

新特性：

1 ）拖拽释放 (Drag and drop) API

2 ）语义化更好的内容标签（ header,nav,footer,aside,article,section ）

3 ）音频、视频 API(audio,video)

4 ） 画布 (Canvas) API

5 ）地理 (Geolocation) API

6 ） 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7 ） sessionStorage 的数据在浏览器关闭后自动删除

8 ）表单控件， calendar 、 date 、 time 、 email 、 url 、 search

9 ）新的技术 webworker, websocket, Geolocation

移除的元素：

1 ）纯表现的元素： basefont ， big ， center ， font, s ， strike ， tt ， u ；

2 ）对可用性产生负面影响的元素： frame ， frameset ， noframes ；

18. 如何处理 HTML5 新标签的浏览器兼容问题

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持

HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的

框架、使用最多的是 html5shim 框架）：

**19.** **如何区分** **HTML** **和** **HTML5** **？**

DOCTYPE 声明新增的结构元素、功能元素

20.HTML5 Canvas 元素有什么用

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作

21. 如何在 HTML5 页面中嵌入音频

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3 、 Wav 和 Ogg ：

22. 如何在 HTML5 页面中嵌入视频

和音频一样， HTML5 定义了嵌入视频的标准方法，支持的格式包括： MP4 、 WebM 和 Ogg ：

23.HTML5 引入什么新的表单属性

datalist datetime output keygen date month week time number range emailurl

24. 语义化的理解

用正确的标签做正确的事情！

html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO 。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

Your browser does’nt support audio embedding feature.

Your browser does’nt support video embedding feature.

25. 介绍一下你对浏览器内核的理解

主要分成两部分：渲染引擎 (layout engineer 或 Rendering Engine) 和 JS 引擎

渲染引擎：负责取得网页的内容（ HTML 、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算

网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，

所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用

程序都需要内核

JS 引擎则：解析和执行 javascript 来实现网页的动态效果

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎

26. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问

app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过

app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的

manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么

就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源

27. 请描述一下 cookies ， sessionStorage 和 localStorage 的区别

cookie 是网站为了标示用户身份而储存在用户本地终端（ Client Side ）上的数据（通常经过加密）

cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递

sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie 数据大小不能超过 4k

sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

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

28.css sprite 是什么 , 有什么优缺点

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图

案。

优点：

减少 HTTP 请求数，极大地提高页面加载速度

增加图片信息重复度，提高压缩比，减少图片大小

更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现 缺点：

图片合并麻烦

维护麻烦，修改一个图片可能需要从新布局整个图片，样式

29.canvas 如何绘制一个三角形 | 正方形

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。

这两个函数加起来就是画一条直线。 画线要用 “ 笔 ” ，那么 MoveTo() 把笔要画的起始位置固定了（ x,y ）然

后要固定终止位置要用到 LineTo 函数确定终止位置（ xend,yend ） , 这样一条线就画出来了。 每次与前面

一个坐标相连 。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

30. 弹性盒子模型 ? flex|box 区别 ?

1 ）引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配

空白空间。

即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器

会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺

寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止

超出容器的范围。弹性盒布局是与方向无关的。

在传统的布局方式中， block 布局是把块在垂直方向从上到下依次排列的；

而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操

作。

<canvas id=“myCanvas” width=“200” height=“100” style="border:1px solid

#c3c3c3;">

Your browser does not support the canvas element.

2 ） flex 和 box 的区别 : display ： box 是老规范，要兼顾古董机子就加上它； 父级元素有 display:box; 属性

之后。他的子元素里面加上 box-flex 属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。

flex 是最新的，董机老机子不支持的；

父元素设置 display:flex 后，子元素宽度会随父元素宽度的改变而改变，而 display:box 不会。 Android

UC 浏览器只支持 display: box 语法；而 iOS UC 浏览器则支持两种方式。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

讲解视频，并且后续会持续更新**

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-EC5HNqXW-1712961508272)]

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-n6lqM0Ty-1712961508273)]