-
简述 html5 离线储存的原理,同时说明如何使用
原理 :
HTML5 的离线缓存储存是基于一个.appcache 文件的缓存机制(不是储存技术),通过这个文件上的解析清单离线储存资源,这些资源就会像 cookie一样被储存下来.这样当网络处于离线状态下的时候,浏览器会通过被离线储存下来的数据展现页面.
更新缓存
一旦应用被缓存,他会保持缓存直到发生下列情况
1 用户清空浏览器缓存
2 manifest 文件被修改
3 由程序来更改缓存如何使用
-
页面头部像下面一样加入一个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 也可*/以 # 开头的是注释, 一般会在第二行写个版本号,用来在缓存的文件更新的时候,更新 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属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了.
解决办法- 给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离
缺点 :可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。 - 在外部盒子内最下方添上带clear属性的空盒子
可以是 div 也可以是其他块级元素;把 <div style="clear:both;"></div>放在盒内底部,用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点 :引入多余元素 - 用overflow:hidden清除浮动
给外部盒子添加这个属性即可;
缺点 :有可能造成溢出元素不可见,影响展示效果 -
用after伪元素清除浮动
给外部元素的 after 伪元素设置 clear 属性,然后再隐藏;此方法原理跟2 的在外部盒子最下方添加带上 clear 的盒子一样.只是这样是一种纯 css 的方法,避免了多余元素.clearfix::after{ content:''; display:block; height:0; line-height:0; clear:both; }
- 给外部盒子也添加浮动
-
写一个加密字符串的方法
这里如果只是简单的方法其实有现成的 就是字符串的charCodeAt和charAt(). 然后还可以使用encodeURIComponent()和decodeURIComponent.
先贴一个答案吧 这个答案有些地方我还没搞懂, 先贴出来大家看看,如果有人知道为啥的话希望可以给我讲解讲解里面的+padding 是有什么用 是用来干嘛的 感谢
// 利用 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。