目录
1. iframe框架都有哪些优缺点
优点:
- 可以实现异步刷新,单个
iframe
刷新不影响整体窗口的刷新(可以实现无刷新上传,在FormData
无法使用时) - 可以实现跨域,每个
iframe
的源都可以不相同(方便引入第三方内容) - 多页面应用时,对于共同的
header
,footer
可以使用iframe
加载,拆分代码(导航栏的应用)
缺点:
- 每一个
iframe
都对应着一个页面,也就意味着多余的css
,js
文件的载入,会增加请求的开销 - 如果
iframe
内还有滚动条,会严重影响用户体验 window.onload
事件会在所有iframe
加载完成后才触发,因此会造成页面阻塞
2. 简述你对BFC规范的理解
介绍:
- BFC是CSS中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外界的元素互不干扰。它不会影响外部的布局,外部的布局也不会影响到它。
形成条件(任意一条)
- html 根元素
- float的值不是none
- position 的值不是static或者relative
- display的值是inline-block,table-cell,flex,table-caption或者inline-flex
- overflow的值不是visible
特性
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。
- 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时,浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
应用场景
- 解决浮动子元素导致父元素,高度坍塌的问题
- 解决文字环绕在float 四周的情况
- 解决边距重叠问题 (父子,兄弟,空元素等)
3. 统计某一字符或字符串在另一个字符串中出现的次数
方法一:
var parent = 'aaasdsd'
var childInNums = parent.split('a').length - 1
console.log(childInNums);
方法二:
function strCount(str, target) {
let count = 0
if (!target) return count
while (str.match(target)) {
str = str.replace(target, '')
count++
}
return count
}
console.log(strCount('abcdef abcdef a', 'abc'))
4. 简述下html5的离线储存原理,同时说明如何使用?
原理:
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如何使用:
① 页面头部像下面一样加入一个manifest的属性。
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
② 在cache.manifest文件的编写离线存储的资源。
CACHE MANIFEST
#v0.1
CACHE:
js/index.js
css/index.css
NETWORK:
images/logo.png
FALLBACK:
*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/
以#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更新manifest以实现浏览器重新下载新的文件,可以是版本号,时间戳或md5码等。
离线存储的manifest一般由三个部分组成:
① CACHE:必选,表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
② NETWORK:可选,可以使用通配符,表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。
③ FALLBACK:可选,表示如果访问第一个资源失败,那么就使用第二个资源来替换他,如/html/ /404.html表示用 “404.html” 替代 /