2022年前端面试宝典.pdfVIP

2022年前端面试宝典

一一、、HTML/CSS篇篇

1、HTML5应用程序缓存为应用带来什么优势？

【【供供参参考考】】

应用程序缓存为应用带来3个优势。

（1）离线浏览，让用户可在应用离线时（网络不可用时）使用它们。

（2）速度，让已缓存资源加载得更快。

（3）减少服务器负载，让浏览器将只下载服务器更新过的资源。

2、如何进行网站性能优化

【【供供参参考考】】

content方面

1、减少HTTP请求：合并文件、CSS精灵、inlineImage

2、减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名

3、减少DOM元素数量

Server方面

1、使用CDN

2、配置ETag

3、对组件使用Gzip压缩

Cookie方面

1、减小cookie大小

css方面

1、将样式表放到页面顶部

2、不使用CSS表达式

3、使用link不使用@import

Javascript方面

1、将脚本放到页面底部

2、将javascript和css从外部引入

3、压缩javascript和css

4、删除不需要的脚本

5、减少DOM访问

图片方面

1、优化图片：根据实际颜色需要选择色深、压缩

2、优化css精灵

3、不要在HTML中拉伸图片

3、Canvas和SvG的区别是什么？

【【供供参参考考】】第1/29页

【【供供参参考考】】

两者的区别如下：

（1）一旦Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操

作，可以被浏览器再次显示。

（2）Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。

（3）因为不需要记住以后事情，所以Canvas运行更快；因为为了之后的操作，SVG需要记录坐

标，所以运行比较缓慢。

（4）在Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。

（5）Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因此与分辨率无

关。

4、如何在HTML5页面中嵌入视频？

【【供供参参考考】】

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

嵌入方式如下。

videowidth=”450”height=”340”contro1s

sourcesrc=icketang.mp4type=video/mp4

Yourbrowserdoesntsupportvideoembeddingfeature.

/video

5、HTML5为浏览器提供了哪些数据存储方案？

【【供供参参考考】】

在较高版本的浏览器中，提供了sessionStorage：和globalStorage。在HTML5规范中，用

localStorage取代globalStorage。

HTML5中的WebStorage包括两种存储方式，分别是sessionStorage和localStorage。

sessionStorage用于在本地存储一个会话（session）中的数据，这些数据只有同一个会话中

的页面才能访问，当会话结来后，数据也随之销毀。因此sessionStorage不是一种持久化的本

地存储，是会话级别的存储。

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

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和

removeltem等

6、应用缓存中网络命令的作用是什么？

【【供供参参考考】】

网络命令描述不需要缓存的文件，例如以下代码中“login.php”始终都不应该缓存或者离线

访问。

NETWORK

login.php

7、如何在页面上实现一个圆形的可点击区域

【【供供参参考考】】

第2/29页

【【供供参参考考】】

1、map+area或者svg

2、border-radius

3、纯js实现，一个点不在圆上的算法

8、HTML5为什么只需要