前端面試備考（基礎題）

圖片發自簡書App

Html

1. HTML5離線存儲和本地緩存

  • 離線存儲
<html manifest="test.manifest">

test.manifest內容

CACHE MANIFEST
#上面一句必須
#v1.0.0
#需要緩存的文件
CACHE:
a.js
b.css
#不需要緩存的文件
NETWORK:
*
#無法訪問頁面
FALLBACK:
404.html

提示：在服務器上添加MIME TYPE支持：比如 Apache 中可在 .htaccess 中添加：AddType text/cache-manifest manifest
如果想更新緩存內容，只要修改下manifest文件即可，如改版本號v1.0.1

  • localStorage 和 sessionStorage方法

不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1

localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()

css

1. 清除浮動方法

<html>
<head>
<meta http-equiv="content-type"content="text/html;charset=utf-8">
<title>清除浮動</title>
<style type="text/css">
.d {
    float: left;
    height: 100px;
    width: 100px;
    background-color: red;
    border: solid #fff 2px;
}

.con{
    /*方法四*/
    /*overflow:auto;*/
    /*方法五*/
    /*overflow: hidden;*/
    /*方法六*/
    /*display:table;*/
}
</style>
</head>
<body>
<div class="con">
<div class="d1 d">
</div>
<div class="d2 d">
</div>
<!-- 方法一 -->
<!-- <div style="clear:both"></div>  -->
<!--方法二-->
<!-- <br clear="all"/> -->
</div>
</body>
</html>

2. 等高布局

最完美的解決方式：等高布局有幾種不同的方法，但目前為止我認為瀏覽器兼容最好最簡便的應該是padding補償法。首先把列的padding-bottom設為一個足夠大的值，再把列的margin-bottom設一個與前面的padding-bottom的正值相抵消的負值，父容器設置超出隱藏，這樣子父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，當它里面的任一列高度增加了，則父容器的高度被撐到它里面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因為背景是可以用在padding占用的空間里的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個障眼法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自適應布局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
    overflow:hidden; /*這個超出隱藏的聲明在IE6里不寫也是可以的*/
}
.left{ 
    float:left; 
    width:150px; 
    background:#B0B0B0;
    padding-bottom:2px;
    margin-bottom:-2px;
}
.right{ 
   float:left; 
   width:450px; 
   background:#6CC;
   padding-bottom:2px;
   margin-bottom:-2px;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">我是left</div>
    <div class="right">我是right<br><br><br>現在我的高度比left高，但left用它的padding-bottom補償了這部分高度</div>
    <div style="clear:both"></div>
</div>
</body>
</html>

3. 盒子模型

box-sizing：
content-box = width （content的寬）
border-box = width + border + padding

4. 垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脫離文檔流*/
            top: 50%; /*偏移*/
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

5. 自適應居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
 html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
   }
.c1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
}
.c2{
    width: 100%;
    height: 100px;
    background-color: green;
    float: left;
    width: 100%;
    margin-right: -200px;
}
.c3{
    float: right;
    width: 100px;
    height: 100px;
    background-color: blue;
}
       
    </style>
</head>
<body>
    <div class="c1 c"></div>
    <div class="c2 c"></div>
    <div class="c3 c"></div>
</body>
</html>

6. css3實現正方形

//方法一
.placeholder {
  width: 100%;
  background-color:red;
  overflow: hidden;
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; /* margin 百分比相對父元素寬度計算 */
}
//方法二
.placeholder {
  width: 100%;
  height:100vw;
  background-color:red;
}
//方法三
.placeholder {
  width: 100%;
  background-color:red;
  padding-bottom:100%;
  height:0;
}

7. css3新特性（舉幾個例子）

  • Text-decoration：文字和邊界可以填充顏色
Text-fill-color: 文字內部填充顏色
Text-stroke-color: 文字邊界填充顏色
Text-stroke-width: 文字邊界寬度
  • border-radius和rgba透明度支持
  • Gradient 漸變效果
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
  • 陰影（Shadow）和反射（Reflect）效果
  • flex布局
  • Transitions, Transforms 和 Animation
div{
/*用于指定過渡的性質，比如 transition-property:backgrond 就是指backgound 參與這個過渡*/
transition-property：backgrond;
/*用于指定這個過渡的持續時間*/
transition-duration：5s
/*用于制定延遲過渡的時間*/
transition-delay：5s;
/*用于指定過渡類型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier*/
transition-timing-function：linear;
}

/*Transform，其實就是指拉伸，壓縮，旋轉，偏移等等一些圖形學里面的基本變換*/
.skew { 
 -webkit-transform: skew(50deg); 
 } 

 .scale { 
 -webkit-transform: scale(2, 0.5); 
 } 

 .rotate { 
 -webkit-transform: rotate(30deg); 
 } 

 .translate { 
 -webkit-transform: translate(50px, 50px); 
 } 

 .all_in_one_transform { 
 -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); 
 }
 
/*animation 動畫*/
 @-webkit-keyframes anim1 { 
    0% { 
        Opacity: 0; 
 Font-size: 12px; 
    } 
    100% { 
        Opacity: 1; 
 Font-size: 24px; 
    } 
 } 
 .anim1Div { 
    -webkit-animation-name: anim1 ; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: 4; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: ease-in-out; 
 }

javascript

1. array的基本方法

2. 阻止冒泡

JQuery 提供了兩種方式來阻止事件冒泡。

方式一：event.stopPropagation();

    $("#div1").mousedown(function(event){
        event.stopPropagation();
    });

方式二：return false;

    $("#div1").mousedown(function(event){
        return false;
    });

3. arguments轉化為真正的數組

Array.prototype.slice.call(arguments)

4. js數組去重

  • 創建一個新的數組存放結果
  • 創建一個空對象
  • for循環時，每次取出一個元素與對象進行對比，如果這個元素不重復，則把它存放到結果數組中，同時把這個元素的內容作為對象的一個屬性，并賦值為1，存入到第2步建立的對象中。
Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());

5. 深拷貝

var clone = function(v) {
  var o = v.constructor === Array ? [] : {};
  for (var i in v) {
    o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
  }
  return o;
}

6. 閉包

閉包是指有權訪問另一個函數作用域中的變量的函數. 創建閉包常見方式,就是在一個函數內部創建另一個函數.

  • 應用場景 設置私有變量和方法
  • 不適合場景 返回閉包的函數是個非常大的函數
  • 閉包的缺點 常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。
  • 為什么會出現閉包這種東西，解決了什么問題
    受JavaScript鏈式作用域結構的影響，父級變量中無法訪問到子級的變量值，為了解決這個問題，才使用閉包這個概念。

7. 交換兩個變量的值，但不產生新的變量

var a=1;
var b=2;
a=a+b;
b=a-b;
a=a-b;

8. 函數防抖和函數節流

函數防抖 頻繁觸發的情況下，只有足夠的空閑時間，才執行代碼一次

var timer = false
document.getElementById("debounce").onScroll = function() {
        clearTimeout(timer)  
        timer = setTimeout(function(){
                console.log(‘函數防抖’) 
        }, 300)     
}

函數節流 聲明一個變量當標志位，記錄當前代碼是否在執行

var canScroll = true;
document.getElementById('throttle').onScroll = function() {
               if (!canScroll) {
                return;
               }
                canScroll = false;
                setTimeout(function(){
                   console.log('函數節流');
                   canScroll = true;
                },300)       
}

9. web worker js多線程

postMessage``onmessage``terminate

10. js繼承

理解JS的6種繼承方式

11.call 和apply

詳解call和apply

數據可視化

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 1,803評論 0贊 2
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,335評論 0贊 11
  • W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的...
    青春前行閱讀 1,433評論 0贊 5
  • 大約在20年前，有一位玲瓏少年走在玲瓏山路上，這是位意氣風發、風華正茂的少年，一個人在荒蕪的山路上渡玲瓏…… 玲瓏...
    二馬行空閱讀 735評論 1贊 3
  • 你虛懷若谷，便有 閑云朝夕來 綠樹成蔭 落日照青苔 你虛懷若谷，便有 風起綠浪 草木輕舞飛揚 一片向榮的景象 你虛...
    文山鹿閱讀 593評論 55贊 38