每日五道前端面试题--day14_iframe面试题-CSDN博客

本文链接：https://blog.csdn.net/Likestarr/article/details/134380945

如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

第14天要刷的面试题如下：

回答思路：先说iframe是什么，再说它的优点和缺点。

iframe标签是用来创建一个文档的内联框架，即行内框架
优点：
- 灵活性：使用iframe可以将不同域名或者服务器上额内容嵌入到同一个页面中去，实现内容的灵活组合。
- 代码复用：将可重用的内容放在单独的文档中并使用iframe嵌入，可以减少重复代码的编写，提高开发的效率。
- 并行加载：浏览器可以并行加载主页和嵌入的iframe的内容，从宏观上加快了整个页面的加载速度
- 独立性：iframe内部的内容和主页面相互隔离，因此不会发生样式和脚本之间的相互影响，双方都可以保持良好的独立性。
缺点：
- SEO问题：搜索引擎无法正确和索引iframe中的内容，影响了网站的搜索引擎优化
- 安全问题：跨域的iframe存在安全风险，比如点击劫持
- 页面性能：过多加载iframe会增加页面复杂性和加载时间，进而阻塞onload时间
- 可访问性：屏幕阅读器等辅助技术可能无法识别和导航iframe中的内容

1. 使用jsonp：后端返回的script源码中包含了对约定函数的调用，并通过此约定函数传递服务器的数据
1. CORS: 是利用浏览器实现的机制，在服务器的返回报文中增加Access-Control-Allow-Origin或者Access-Control-Allow-Method之类的响应头信息即可
1. 代理服务器：跨域问题只在浏览器和服务器之间产生，不存在于服务器和服务器之间；因此只需在原来的服务器A和浏览器B之间加入一个代理服务器S，然后保证S和B之间的通信不存在跨域问题即可。这样S就可以将B对数据的请求转发给A或者将A中的数据转发给B，因此可以分成正向和反向代理两种方式。
1. websocket: 建立在单个TCP上的跨文档消息传递机制，不受同源策略的限制。
1. Post Message Api:postMessage是h5引入的一种跨文档的消息传递机制。它允许在不同的窗口之间发送消息。这样iframe获取到的相对于主窗口是跨域的数据就可以通过此api传递给主窗口了，从而实现了数据的跨域通信。除此之外，在主窗口中可以使用document.getElementById('iframe').contentDocument的方式拿到iframe中标签对象，进而获取其中的信息！

作用：是用来解决表单控件之间的关系的。当用户点击label的时候就可以自动聚焦到该label所关联的表单空间上去。
方式1：使用label包裹目标控件：<label><input /></label>
方式2：使用for-id的搭配绑定两者的关系：<label for="exp">exp</label> <input id="exp" value ="123" />

回答思路：先说是什么，再说特点

1. svg: svg是可缩放的矢量图形，是基于可扩展的标记语言（XML）描述的2D图形语言；Svg基于XML意味着Svg DOM中的每一个元素都可以增加js的时间处理器。在Svg中，每一个被绘制额图形都被视为对象，当对象的属性发生变化的时候，浏览器就会重新绘制图形。
- 矢量性：图形不依赖于设备的分辨率
- 支持事件处理
- 适合带有大型渲染区域的应用程序，例如谷歌地图
- 渲染速度：会随着XML的复杂性增加而极具下降，因此做不了变化频繁的应用，例如游戏
1. Canvas：其语义是指画布，通过js来绘制2D图形，是互隔像素渲染的
- 图形质量依赖于分辨率
- 不支持事件处理
- 对文本的渲染能力弱
- 可以保存为png或者jpg，因此可以实现前端对图片的处理
- 适合处理变化频繁的场景：例如做游戏