前端面試筆記

時間 2019-11-30

原文原文鏈接

前端面試題目答案及總結

HTML和CSS

一、如設置div水平垂直居中？有多少種方式能夠實現？css

一、水平垂直居中（一）定位和須要定位的元素的margin減去寬高的一半
 <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>

二、定位和margin:auto;html

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
 
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

三、絕對定位和transfrom前端

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;
 
    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](4.jpg)
    </div>
</body>

二、 HTML5新增語義化如何理解？說一說有哪些標籤？vue

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。
 HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

拖拽釋放(Drag and drop) API 
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控件，calendar、date、time、email、url、search  
新的技術webworker, websocket, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

三、 CSS3和CSS有什麼新增內容，能夠講一下嗎？html5

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器  多背景 rgba 
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

四、在一個div中，如何設置一個button在div的右上角，有什麼方式能夠實現es6

一、能夠給button設置float：right；
二、父元素設置相對定位，子元素設置絕對定位，right設置爲0、top：0；

五、請問你有寫過0.5px的直線？web

六、 css設置一個動畫，從左到右滾動用到什麼屬性？面試

七、前端常說的三層架構是指哪三層ajax

八、佈局json

九、說說IE盒子和谷歌的區別

十、爲何初始化css樣式

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

    淘寶的樣式初始化： 
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

JS

一、 Settimeout和SetInterout的區別，哪個更安全？

二、 window.onload和document.ready的區別

三、 cookies和sessionstorage、session、localage的區別

四、 split和jion的區別？

五、字符串反轉

六、同步和異步的理解

七、閉包的做用、弊端、使用的場景，簡單的說一下

八、簡單說一下繼承，能夠舉例說明嗎？

九、簡單說一下事件冒泡，如何阻止事件冒泡？

十、 null和undefined的區別

undefined是一個表示"無"的原始值，轉爲數值時爲 當聲明的變量還未被初始化時，變量的默認值爲null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。 （2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。 （3）對象沒有賦值的屬性，該屬性的值爲undefined。 （4）函數沒有返回值時，默認返回undefined。 

 （1）做爲函數的參數，表示該函數的參數不是對象。 （2） 做爲對象原型鏈的終點。 

new操做符具體幹了什麼呢?
   一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
   二、屬性和方法被加入到 this 引用的對象中。
   三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

十一、 js的數據類型

十二、是否作個懶加載。

1三、跨域

jsonp、 document.domain+iframe、window.name、window.postMessage、服務器上設置代理頁面

1四、異步加載和延時加載

1.異步加載的方案： 動態插入script標籤
2.經過ajax去獲取js代碼，而後經過eval執行
3.script標籤上添加defer或者async屬性
4.建立並插入iframe，讓它異步執行js
5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。

框架

Vue

一、 vue的數據綁定，實現原理

二、 vue父子組件及傳值

三、路由傳值，有什麼方式

四、 vue的聲明週期，簡單說一下，dom是在哪一個生命週期完成渲染的

五、 vue導航鉤子有哪幾種

六、有使用過什麼框架，簡單說一下

其餘的插件

一、 jQuery

二、 ajax

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

三、 ajax的理解，及後臺返回數據如何接收？執行一個刪除事件，要如何實現

三、 ajax請求數據步驟是什麼？傳輸的數據是用明文仍是暗文？

四、 es6有了解嗎？日常有使用到哪些呢？是否能夠舉例說明。

其餘問題

一、是否有看過源碼 jQuery
二、HTTP代碼

100  Continue  繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200  OK   正常返回信息
201  Created  請求成功而且服務器建立了新的資源
202  Accepted  服務器已接受請求，但還沒有處理
301  Moved Permanently  請求的網頁已永久移動到新位置。
302 Found  臨時性重定向。
303 See Other  臨時性重定向，且老是使用 GET 請求新的 URI。
304  Not Modified  自從上次請求後，請求的網頁未修改過。

400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized  請求未受權。
403 Forbidden  禁止訪問。
404 Not Found  找不到如何與 URI 相匹配的資源。

500 Internal Server Error  最多見的服務器端錯誤。
503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

參考地址：http://www.javashuo.com/article/p-dmngwevj-g.html