每日五道前端面试题--day14

以下题目来自掘金等其它博客,但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础,不妨和我一起参与到每日刷题的过程中来,如何?

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

  1. iframe有什么优点和缺点?
  2. 解决跨域通信的方法以及使用iframe跨域通信的原理
  3. label标签的作用和使用方法
  4. 对比Svg标签和Canvas标签
  5. 说一说head标签的作用以及head标签的子标签

1. iframe有什么优点和缺点?

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

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

2. 解决跨域通信的方法以及使用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中标签对象,进而获取其中的信息!

3. label标签的作用和使用方法

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

4. 对比Svg和Canvas的区别

回答思路:先说是什么,再说特点

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

5. 说一说head标签的作用以及head标签的子标签

  • head标签用来定义文档的头部,是所有头部子标签的容器。
  • head中的标签大多是不可见的。
  • 这些标签包括:style meta link style script title
  • 其中只有title标签是必须的
相关推荐
涵信7 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安7 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板13 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩14 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真19 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
丘山子37 分钟前
如何在 1000 亿级数据规模下实现高效的去重统计?
后端·面试·架构
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
uhakadotcom1 小时前
Lovable:用AI轻松打造完整应用,零基础也能快速开发
后端·面试·架构
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器