2021-01-26面试题

2021-01-26  本文已影响0人  Viewwei

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 手机无法显示框架

简述你对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>
上一篇下一篇

猜你喜欢

热点阅读