前端面试题（基础篇十五）

一、iframe有哪些缺点

iframe元素会创建一个包含另外一个文档的内联框架（即行内框架）

主要缺点:

        （1)iframe阻塞页面的onload事件。window中的onload事件需要在所有iframe加载完毕后（也包含其中的元素）才会触发，在safari和chrome中，可以通过JavaScript来动态设置inframe中的src属性来避免这种阻塞情况

        （2）搜索引擎的检索程序无法解读这种页面，不利于页面的SEO

        （3）iframe和主页面共享连接池，而浏览器对相同域的连接有限制，会影响页面的并行加载

        （4）浏览器的后退按钮会失效

        （5）对一些小型的移动设备将无法完全显示框架

资料参考:

《使用 iframe 的优缺点》https://blog.csdn.net/yintianqin/article/details/72625785

《iframe 简单探索以及 iframe 跨域处理》https://segmentfault.com/a/1190000009891683

二、label的作用是什么？如何使用？

 label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。对单选按钮而言，添加label标签可以让用户再点击文字时一样生效，属于优化的一点。

    <label for="Name">Number:</label>
    <input type=“text“ name="Name" id="Name"/>

三、HTML5 的 form 的自动完成功能是什么？

 autocomplete 属性规定输入字段是否应该启用自动完成功能。默认为启用，设置为 autocomplete=off 可以关闭该功能。

    自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

    autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

四、页面可见性（Page Visibility API） 可以有哪些用途？

这个api的意义在于，通过检测页面的可见性来预判网页的卸载，可以用来节省资源，节省电能的消耗。例如，一旦用户不看网页，下面的网页行为是可以停止的:

        (1) 对服务器的轮询

        (2) 网页动画

        (3)音视频的播放与暂停

资料参考:

《Page Visibility API 教程》http://www.ruanyifeng.com/blog/2018/10/page_visibility_api.html

五、Canvas 和 SVG 有什么区别？

Canvas是一种通过JavaScript来绘制2D图形的方法。Canvas是逐像素进行渲染的，因此我们对Canvas进行缩放时，会出现失真或出现锯齿的情况。

SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味者SVG DOM 中的每一个元素都是可以使用的，我们可以为其中的某个元素添加JavaScript事件监听函数。SVG中保存的是图形的绘制方法，对SVG图形进行放大和缩小是不会出现锯齿和或失真的情况。

资料参考:

《SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？》https://www.zhihu.com/question/19690014