前端面试题总结一

谁践踏了优雅 2022-05-18 04:49 214阅读 0赞

**1.请描述一下cookies,sessionStorage和localStorage的区别？**

cookie是网站为了标示用户身份而储存在用户本地终端(client side)上的数据（通常经过加密）  
cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器之间来回传递  
sessionStorage和localStorage不会自动把数据发给服务器，尽在本地保存  
*存储大小：*  
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大  
*有效时间：*  
localStorage存储池旧数据，浏览器关闭后数据不丢失除非主动删除数据  
sessionStorage数据在当前浏览器窗口关闭后自动删除  
cookie设置的cookie过期事件之前一直有效，即使窗口或浏览器关闭

**2.iframe有哪些缺点？**  
iframe会阻塞主页面的onload事件，搜索引擎的检索程序无法解读这种页面，不利用SEO  
iframe会和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载  
使用iframe之前需要考虑，如果需要使用iframe，最好是通过js动态给iframe添加属性src属性值

**3.如何实现浏览器内多个标签页之间的通信？**  
WebSocket,SharedWorker，也可以调用localStorage，cookie等本地存储方式  
localStorage另一个浏览上下文里被添加，修改或者删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

**4.如何在页面上实现一个圆形的可点击区域？**  
1）map + area或者svg  
2)border-radius  
3)纯js实现，需要求一个点在不在圆上的简单算法，获取鼠标坐标等

**5.介绍一下标准的css的盒子模型？低版本的IE的盒子模型有什么不同？**  
1）有两种：IE盒子模型，W3C盒子模型  
2）盒模型：内容（content），填充（padding），边界（margin），边框（border）  
3）区别：IE的content部分把border和padding计算了进去

**6.CSS的有线计算法如何计算？**  
优先级就近原则：同权重情况下样式定义最近者为准  
载入样式以最后载入的定位为准  
优先级为：!important>id>class>tag

**7.为什么要使用CSS Sprites**  
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样可以减少很多图片请求的开销，因为请求耗时比较长，请求虽然可以并发，但是如果请求太多会给服务器增加很大压力。

**8.介绍一下你对浏览器内核的理解**  
主要分成两部分：渲染引擎和JS引擎  
渲染引擎：负责取得网页的内容（HTML，XML，图像等等），整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同 ，所以渲染的效果也会不同。所有网页浏览器，电子邮件客户端以及其它需要编辑，显示网络内容的应用程序都需要内核。  
JS引擎：解析和执行JS来实现网页的动态效果。  
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

**9.H5有哪些新特性？如何处理H5新标签的浏览器兼容问题？**  
*新特性：*  
1）H5现在已经不是 SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加  
2）绘画canvas  
3）用于媒体回放的video和audio元素  
4）本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失  
5）语义化更好的内容元素，比如：article,footer,header,nav,section  
6）表单控件：calendar,date,time,email,url,search  
7）新的技术webworker,websocket,Geolocation  
*处理兼容问题：*  
IE8/IE7/IE6支持通过doocument.createElement方法产生的标签，可以利用这一特性来让这些浏览器支持H5的新标签，浏览器支持新标签后，还需要添加标签默认的样式。  
当然也可以直接使用成熟的框架，比如html5shim

**10.XHTML和HTML的区别？**  
HTML是一种基于基本的web网页设计语言，XHTML是一个基于XML的置标语言  
*不同：*  
XHTML元素必须被正确嵌套  
XHTML元素必须被关闭  
标签名必须使用小写字母  
XHTML文档必须拥有根元素