前端开发经典面试题及答案——HTML篇

前端的面试题相对较多，霸哥结合网上的面试经验，整理了一份前端高频面试题，猩码学苑的学员也在用，欢迎伙伴们收藏观看。

由于内容过多，为了让伙伴们更好的记忆和掌握，霸哥今天先出HTML部分内容，后续每天会发一篇，直至发完。

前端开发经典面试题及答案——HTML篇

一、cookie和WebStorage的区别与联系？

二、link和@import的区别

link和@import是外部引入CSS的两种方式。

结论：慎用@import方式。使用@import需要注意很多语法规则、引入顺序、资源文件下载引起的http请求过多。

区别：

HTNL中CSS有四种引入方式：

三、浏览器如何实现不同标签页的通信？

浏览器内多个标签页之间通信，简言之，浏览器中开了多个窗口，其中一个窗口产生行为其他窗口不用刷新也有相关表现。

1、cookie+setInterval方式

将要发送的信息写入cookie：

在另一个页面读取cookie：

2、websocket协议

新建webSocket文件夹，在该目录下打开终端 → 运行npm init （npm安装及配置步骤） → 初始化node项目（因为需要引入ws包） → 回车到结束 → 安装ws包 → 依旧在当前目录下终端运行npm i -save ws → 在webSocket目录下新建sever.js、send.html、reveive.html文件

四、iframe的优缺点

优点：

1、能够把嵌入的网页原封不动的展示出来；

2、多个网页调用iframe，只需要修改iframe的内容，就能实现所有引用页面的修改，方便快捷；

3、提升代码的复用性；

4、可解决页面加载缓慢的问题。

缺点：

1、不易管理；

2、链接书写失误会导致链接死循环

4、部分移动设备无法完全显示，设备兼容性差。

5、增加服务器的http请求，对大型网站不友好。

五、canvas

1、canvas是什么？

是html5新标签，属于h5新特性。canvas标签是一个图形的容器，可以在上形状，画logo，通过javascript绘制。

2、canvas用于什么？

①制作web网页游戏

②数据可视化（echarts就是基于canvas）

③广告banner的动态效果

④内嵌网页

六、做项目用到哪些h5新特性？

七、localstorage和sessionStorage可以写什么？

1、sessionStorage可用于写临时交流的留言板或是交流记录

2、localStorage可用于写记住用户名和密码的功能

八、如何解决页面内容加载缓慢的问题？

1、优化图片大小、格式

2、图片懒加载

3、优化CSS

4、网址后加/

5、标明宽度和高度

6、减少http请求

九、对H5新增的语义化标签的理解？

为什么要用语义化标签：

①使布局更加清晰，有利于浏览器对页面的读取

②用户体验良好

③有利于团队开发和维护

④可读性更强，减少差异化

十、页面渲染过程

1、解析HMTML标签，构建DOM树

2、解析CSS，构建CSSOM树

3、把DOM和CSSOM组合成渲染树（render tree）

4.在渲染树的基础上进行布局，计算每个节点的几何结构

5、把每个节点绘制到屏幕上（painting）

十一、网页上哪里可以看到请求的所有信息

此处霸哥以谷歌浏览器为例，打开控制台，点击netWork，参照下图：

十二、如何在浏览器查看和清除localstrorage保存的数据？

打开控制台 → 切换到 Application → 点击Localstrorage即可查看

十三、页面之间是怎么传参数的？

以上就是霸哥今日整理的前端经典面试题及答案HTML篇，如有疑问，欢迎私信霸哥！