前端面试题(七)

时间 2019-12-20

标签端面试题繁體版

原文原文链接

简述 html5 离线储存的原理,同时说明如何使用

原理 :css

HTML5 的离线缓存储存是基于一个.appcache 文件的缓存机制(不是储存技术),经过这个文件上的解析清单离线储存资源,这些资源就会像 cookie同样被储存下来.这样当网络处于离线状态下的时候,浏览器会经过被离线储存下来的数据展示页面.

更新缓存html

一旦应用被缓存,他会保持缓存直到发生下列状况
1 用户清空浏览器缓存
2 manifest 文件被修改
3 由程序来更改缓存

如何使用html5
1. 页面头部像下面同样加入一个manifest的属性git
```
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
    ...
</html>
```
2. 在cache.manifest 文件编写离线储存的资源github
```
CACHE MANIFEST
#v0.1
CACHE:
    js/index.js
    css/index.css
NETWORK:
    images/logo.png
FALLBACK:
    *.html /404.html /* / /404.html 或 /html/ /404.html 也可*/
```
  以 # 开头的是注释, 通常会在第二行写个版本号,用来在缓存的文件更新的时候,更新 mainfest 以实现浏览器从新下载新的文件,能够是版本号,时间戳, md5 码等等
  
  离线存储的manifest通常由三个部分组成:面试
  - CACHE: 必选; 表示须要离线储存的资源列表,因为包含 mainfest 文件的页面会被自动离线缓存,因此不用吧自身页面也列出来
  - NETWORK: 可选; 可使用通配符,表示在他下面列出来的资源只有在在线的状况下才能访问,他们不会被离线缓存,因此在离线状态下没法使用这些资源.不过若是有资源在 CACHE 和 NETWORK 中同时存在,该资源仍是会被缓存,也就是说 CACHE 优先级高于 NETWORK
  - FALLBACK: 可选; 表示若是第一个资源访问不到,那么就使用第二个资源来替换他; 例如:/html//404.html. 表示用"404.html"代替/html/中的全部文件; //404.html 表示用"404.html"代替当前目录中的全部文件; *.html/404.html 表示用 "404html"代替全部.html 文件

清除浮动的方法有哪些,以及其优缺点

首先说明, 确实是如今用浮动的不多了.基本上 flex 和基本的定位布局都能知足需求了;
浮动带来的问题是盒子塌陷问题.清除浮动就是为了解决这个问题的

什么是盒子塌陷
外部盒子本应该包住内部的浮动盒子,结果却没有
出现问题的缘由
父元素只包含浮动元素,那么他的高度就会塌陷为 0;前提是没有设置高度,或者设置为 auto 就会出现这种状况.若是父元素不包含任何可见元素,这个问题就很难被注意到.由于子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，由于内部没有其它盒子了，因此外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了.
解决办法浏览器
1. 给外部盒子也添加浮动
  把外部盒子也从标准文档流中抽离
  缺点 : 可读性差，不易于维护（别人很难理解为何要给父元素也添上float），并且可能须要调整整个页面布局。
2. 在外部盒子内最下方添上带clear属性的空盒子
  能够是 div 也能够是其余块级元素;把 <div style="clear:both;"></div>放在盒内底部,用最下面的空盒子清除浮动，把盒子从新撑起来。
  缺点 : 引入多余元素
3. 用overflow:hidden清除浮动
  给外部盒子添加这个属性便可;
  缺点 : 有可能形成溢出元素不可见,影响展现效果
4. 用after伪元素清除浮动
  给外部元素的 after 伪元素设置 clear 属性,而后再隐藏;此方法原理跟2 的在外部盒子最下方添加带上 clear 的盒子同样.只是这样是一种纯 css 的方法,避免了多余元素缓存
```
.clearfix::after{
    content:'';
    display:block;
    height:0;
    line-height:0;
    clear:both;
}
```

写一个加密字符串的方法

这里若是只是简单的方法其实有现成的就是字符串的charCodeAt和charAt(). 而后还可使用encodeURIComponent()和decodeURIComponent.

先贴一个答案吧这个答案有些地方我还没搞懂, 先贴出来你们看看,若是有人知道为啥的话但愿能够给我讲解讲解里面的+padding 是有什么用是用来干吗的感谢cookie

// 利用 base64, 浏览器环境自带 btoa / atob 方法
// Node.js 须要引入相关库
const str = "abcdefg";

console.log(btoa(str));
console.log(atob(btoa(str)));

// 凯撒密码
const encodeCaesar = ({str = "", padding = 3}) =>
  !str
    ? str
    : str
        .split("")
        .map((s) => String.fromCharCode(s.charCodeAt() + padding))
        .join("");

const decodeCaesar = ({str = "", padding = 3}) =>
  !str
    ? str
    : str
        .split("")
        .map((s) => String.fromCharCode(s.charCodeAt() - padding))
        .join("");

console.log(encodeCaesar({str: "hello world"}));
console.log(decodeCaesar({str: "khoor#zruog"}));

面试题摘自 Github网络

前端面试题(七)

简述 html5 离线储存的原理,同时说明如何使用

清除浮动的方法有哪些,以及其优缺点

写一个加密字符串的方法