2021-01-26面试题

iframe框架都有哪些优缺点?

iframe 是一种框架,也是一种常用的网页嵌入式

iframe优点

1. iframe 能够原封不动的把嵌入式网页展示出来
2.  如果多个网页引用 iframe,那么你只需要更改 iframe 的内容,就可以实现调用每一个页面内容的改变,方便快捷
3. 如果遇到加载缓慢的第三方内容如广告和图标,这些问题可以由 iframe 来解决
4. 可以使用 iframe 实现跨域请求
5. iframe是主页面是独立的,如果 iframe 内容发生改变或者重新加载 iframe 页面,不会影响到主页面

iframe缺点

  - 从网络请求方面来说:因为每个iframe对应一个页面,意味着多余的css,js文件的载入,会增加请求的开销
  - 如果iframe内部有滚动条,会严重影响用户体验
  - 多个 iframe 会产生很多页面,或者多个 iframe 页面,不容易管理
  - 现在浏览器不对 iframe 的内容进行解析,导致 iframe 不会被浏览器搜素引擎优化,不利于 SEO
  - iframe对于很多移动设备兼容性差,比如 PAD 手机无法显示框架
  • 总结:能不用 iframe 就不要用 iframe,iframe 算是 web 发展呢过程中的一个产物.

简述你对BFC规范的理解

特性
1. 计算 BFC 的高度时,浮动子元素也参与计算
2. BFC 就是页面上一个独立的容器,容器里面的子元素不会影响外面的元素,反之亦然
3.BFC 区域不会与 float 元素重叠
行程条件
1. html 根元素
2.float 的值不是 static 或者 relative
3. position的值不是 inline-block,table-cell...
4. overflow的值不是 visible
应用场景
1. 解决浮动子元素导致父元素高度坍塌的问题
2.解决文字环绕 float 四周的问题
3. 解决间距重叠问题

实例
产生 BFC

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="out">
            <div id="in"></div>
        </div>
    </body>
    <style>
        #out {
            min-height: 20px;
            border: 1px red solid;
            overflow: hidden; 
            /* 产生 bfc */
        }
        #in {
            height: 100px;
            background-color: aqua;
            float: left;
            width: 100%;
        }
    </style>
</html>

统计某一字符或字符串在另一个字符串中出现的次数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        
        const countAppears = function(params,target) {
            let count =0
            if (!target || !params){
                return count
            }
            
            const index = target.indexOf(params)
            if (index > -1){
                count = 1 +countAppears(params,target.slice(index +1))
            }
            return count
        }
        const str = "abcaaadefg2333333333334abcddddea";
        
        console.log(countAppears("2", str));
        console.log(countAppears("b", str));
        console.log(countAppears("d", str));
        console.log(countAppears("a", str));
        console.log(countAppears("f", str));
    </script>
    
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2018web前端最新面试题总结 一、Html/Css基础模块 基础部分 什么是HTML?答:​ HTML并不是...
    duans_阅读 4,689评论 3 27
  • Java面试 Java、框架、JVM Java 基础、容器、多线程、反射、对象拷贝、Java web模块、异常模块...
    别抢辅助阅读 273评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 面试题总结(概念篇) HTML [if !supportLists]1、[endif]请列举HTML5的新特性 [...
    你的Yang阅读 548评论 0 0
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,575评论 16 22