2022年前端面试宝典.docx

PAGE2/NUMPAGES2

2022年前端面试宝典

一、HTML/CSS篇

1、如果把HTML5看成一个开放平台，它的构建模块有哪些？

【仅供参考】

如果把HTML5看成一个开放平台，它的构建模块至少包括以下几个，如navheadersectionfooter。

≤nav标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确

header标签用来定义文档的页眉。

section标签用来描述文档的结构。

footer标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息

2、HTML5如何实现跨域？

【仅供参考】

在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。

response.setHeader（Access-Control-Allow-Origin，*）；

response.setHeader（Access-Control-Allow-Methods，POST）；

response.setHeader（Access-Control-Allow-Headers，x-requested-with,content-type）；

3、img的title和alt有什么区别

【仅供参考】

通常当鼠标滑动到元素上的时候显示

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

4、请描述一下sessionStorage和localStorage的区别。

【仅供参考】

sessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毀。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localstorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。

5、介绍一下你对浏览器内核的理解？

【仅供参考】

主要分成两部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后渲染到用户的屏幕上。

JS引擎则：解析和执行javascript来实现逻辑和控制DOM进行交互。

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

6、什么是文档的预解析？（浏览器解析过程）

【仅供参考】

Webkit和Firefox都做了这个优化，当执行JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变DOM树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

7、HTML5的离线储存怎么使用，工作原理能不能解释一下？

【仅供参考】

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

创建一个和html同名的manifest文件，然后在页面头部像下面一样加入一个manifest的属性。

htmllang=enmanifest=index.manifest

在如下cache.manifest文件的编写离线存储的资源。

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问