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

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

　　由于内容过多，为了让伙伴们更好的记忆和掌握，霸哥今天先出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篇，如有疑问，欢迎私信霸哥！

　　举报/反馈