每日思考（2019/12/15）

Posted 2021-03-22 ericzlin

题目概览

• iframe框架都有哪些优缺点？
• 简述你对BFC规范的理解
• 统计某一字符或字符串在另一个字符串中出现的次数

题目解答

iframe框架都有哪些优缺点？

• 概念：frame是一种框架，也是一种很常见的网页嵌入方式

  <iframe id='ifr1' url='https:xxxxx' width='1080px' height='960px'></iframe>

• 优点
  • iframe能够原封不动的把嵌入的网页展现出来；可以实现异步刷新，单个 iframe 刷新不影响整体窗口的刷新（可以实现无刷新上传，在 FormData 无法使用时）
  • 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
  • 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；可以实现跨域，每个 iframe 的源都可以不相同（方便引入第三方内容）
• 缺点
  • 会产生很多页面，不容易管理；
  • iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差
  • 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化
  • 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差
  • iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。 现在基本上都是用Ajax来代替iframe

简述你对BFC规范的理解

• 概念：是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它
• 形成条件
  • float的值不是none
  • position 的值不是static或者relative
  • display的值是inline-block,table-cell,flex,table-caption或者inline-flex
  • overflow的值不是visible
• 特性
  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
• 应用场景
  • 解决浮动子元素导致父元素，高度坍塌的问题
  • 解决文字环绕在float 四周的情况
  • 解决边距重叠问题 （父子，兄弟，空元素等）

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

//方式一：while循环
function strCount(str, target) {
  let count = 0
  if (!target) return count
  while(str.match(target)) {
    str = str.replace(target, '')
    count++
  }
  return count
}
//方式二：数组split
function strCount(str, target) {
    var arr = [];
    arr = str.split(target);
    return arr.length - 1;
}
//方式三：正则匹配
function strCount(str, target) {
    let matchs = str.match(new RegExp(`(?=${target})`, 'g'))
    return matchs ? matchs.length : 0
}