前端面試題(七)

時間 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網絡