今日頭條面試題彙總

CSS

  • 解釋 css 各類定位,absolute 相對於誰定位;
    -> position: relative/absolute/fixed/static/inherit/initial/unset/sticky
    -> 相對於最近一層position非static的父元素
    -> relative不會脫離文檔流javascript

  • iframe 中的 fixed 定位和什麼有關,怎麼固定瀏覽器窗口
    -> iframe窗口非瀏覽器窗口,經過postmessage通訊將top頁面的scrolltop傳遞給iframe,iframe內部經過監聽通信事件動態設置元素的定css

  • transfrom 的主要用法
    -> transform用來向元素應用各類2D和3D轉換,該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜等操做,有translate, scale, rotate, skew,html

  • flex 盒子佈局
    flex 佈局詳解前端

  • 不一樣高的子盒子實現頭部對齊
// 1. padding 補償
.parent {
    width: 100%;
    overflow: hidden;
}
.left, right {
    float: left;
    padding-bottom:9999px;
    margin-bottom:-9999px;
}
// 2. flex 佈局
.parent{
    display: flex;
}
  • css 盒模型;
    -> 標準盒子模型:寬度=內容的寬度(content)+ border + padding + margin -> box-sizing:content-box;
    -> 低版本IE盒子模型:寬度=內容寬度(content+border+padding)+ margin -> box-sizing:border-box;;vue

  • 重繪和迴流的區別
    -> 重繪(repaint):當render tree中的一些元素須要更新屬性,單這些屬性只會影響元素的外觀,風格,而不會影響到元素的佈局,此類的頁面渲染叫做頁面重繪。
    -> 迴流(reflow):當render tree中的一部分(或所有)由於元素的規模尺寸,佈局,隱藏等改變而引發的頁面從新渲染。
    -> 迴流必將引發重繪,而重繪不必定會引發迴流java

  • 如何解決外邊距重合問題;
    -> 外邊距重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一塊兒而造成一個單一邊界
    外層元素添加padding;
    外層元素 overflow:hidden;
    外層元素透明邊框 border:1px solid transparent;
    內層元素絕對定位 postion:absolute;
    內層元素 加float:left;或display:inline-block;node

  • 清除浮動
    一、父級div定義 overflow: auto;;
    二、.clearfixreact

  • 兩列布局(右側定寬200px,左邊隨屏幕自動填充寬度)
// 1. float+margin(一側定寬,一側自動)  
// 2. position+margin(一側定寬,一側自動)
// 3. float+負margin(一側定寬,一側自動)
.right { 
    float:left; 
    width: 100%;
}
.right .cont {
    margin-left:200px;
}
.left {
    float: left; 
    width: 200px; 
    margin-left: -100%; 
}
  • 三列布局
// 1. float+margin(兩側定寬,中間自適應)
// 2. position+margin(兩側定寬,中間自適應)
// 3. float+負margin(兩側定寬,中間自適應)
.m-box { 
    float:left; 
    width: 100%;
}
.m-box .center {
    margin:0 200px;
}
.left,.right {
    float: left; 
    width: 200px; 
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}
  • 垂直水平居中
// 一、絕對定位+margin:auto  
.box {
    margin: auto;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}

// 二、絕對定位+transform反向偏移

.box {
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

// 三、display: flex-box

.box {
    display: flex;
    align-items: center;
    justify-content: center;
}
  • css 實現4:3的塊元素
.box {
    width: 100%;
    height: 0;
    padding-top: 75%;
}
  • css寫個無限旋轉動畫
.ig{
    -webkit-animation:circle 1.5s infinite linear;
}
@-webkit-keyframes circle{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}
  • 用css畫一個三角形
.triangle{
    width: 0; height:0;
    border: 10px solid transparent;
    border-top-color: red;
}

簡答題

  • 自我介紹,項目介紹,項目中的難點以及解決方案;
  • 項目中遇到的技術問題
  • 最近在學什麼東西
  • MVC/MVVM 的理解
  • 問了h5語義化的問題
  • 爲何用來React又用jquery
  • Reat寫組件有挑戰性的東西
  • 關鍵詞標記顏色
  • amd 和 cmd 規範理解;
  • es6相比es5有沒有什麼比較好的特性
  • 箭頭函數和通常函數的區別
  • promise瞭解不
  • JS的數據類型
    -> number,boolean,string,undefined,null,object,symbol。
  • 發http請求會怎麼作
  • 常見的狀態碼
  • http緩存怎麼作到的
  • 瀏覽器緩存常見的http的頭 requestHeader
  • 性能優化的事情
  • 打包工具 Webpack 的配置,原理,webpack優化;
    -> 解析webpack配置參數,合併從shell傳入和webpack.config.js文件裏配置的參數,生產最後的配置結果。
    -> 註冊全部配置的插件,好讓插件監聽webpack構建生命週期的事件節點,以作出對應的反應。
    -> 從配置的entry入口文件開始解析文件構建AST語法樹,找出每一個文件所依賴的文件,遞歸下去。
    -> 在解析文件遞歸的過程當中根據文件類型和loader配置找出合適的loader用來對文件進行轉換。
    -> 遞歸完後獲得每一個文件的最終結果,根據entry配置生成代碼塊chunk。
    -> 輸出全部chunk到文件系統。
  • nodeJS
  • 講講同源策略
  • url構成,解析一個url,包括hash值;
  • post和get的區別
  • 事件代理是什麼事件代理中target和event細節
  • 原型鏈繼承對象、構造函數、prototype、__proto_
  • http1.0 ,1.1,2.0的區別;
  • Object.defineProperty()的缺點;
  • post content-type類型
  • 而後問了冒泡,捕獲;
  • 手寫一個閉包;
  • 考察數組斷定、
  • 一道異步代碼題,說出打印順序;
  • 三個url同時請求,要求按順序打印結果
  • http緩存優缺點
  • 單頁應用優缺點
  • 瀏覽器緩存優缺點
  • addEventListener()有幾個參數,是什麼?
  • typeof的類型(舉例說屬於什麼類型)
  • 問針對移動瀏覽器端開發頁面,不指望用戶放大屏幕,且要求「視口(viewport)」寬度等於屏幕寬度,視口高度等於設備高度,如何設置?
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, 
        maximum-scale=1, user-scalable=no">
  • == 與 === 的區別;
  • cookie是什麼,怎麼存儲。
  • cookie和session的區別;
  • 問請描述一下cookies,sessionStorage和localStorage的區別?
    答:cookie:通常由服務器生成,可設置失效時間。若是在瀏覽器端生成Cookie,默認是關閉瀏覽器後失效,也可設置過時時間,每次都會攜帶在HTTP頭中,若是使用cookie保存過多數據會帶來性能問題 sessionStorage: 僅在當前會話下有效,關閉頁面或瀏覽器後被清除 localStorage: 除非被清除,不然永久保存,僅在客戶端(即瀏覽器)中保存,不參與和服務器的通訊
  • 介紹H5的兩個瀏覽器緩存,localStorage和sessionStorage的區別。
    保存數據的生命週期不一樣。 sessionStorage只是能夠將一部分數據在當前會話中保存下來,刷新頁面數據依舊存在。但當頁面關閉後,sessionStorage 中的數據就會被清空
  • fetch和ajax的區別。
    一、fetch()返回的promise將不會拒絕http的錯誤狀態,即便響應是一個HTTP 404或者500。 服務器端返回 狀態碼 400 500的時候 不會reject Response.ok 屬性爲 true。
    二、在默認狀況下 fetch不會接受或者發送cookies ,要發送 cookies,必須設置 credentials 選項。 credentials: 'include'
  • Bom是什麼,列舉你知道的Bom對象;
  • function.prototype.bind/call/apply的用法及區別
  • 問什麼是瀏覽器的標準模式和怪異模式
    答:目前瀏覽器的排版引擎有三種模式:怪異模式(Quirks mode)、接近標準模式(Almost standards mode)、以及標準模式(Standards mode)。在怪異模式下,排版會模擬 Navigator 4 與 Internet Explorer 5 的非標準行爲。爲了支持在網絡標準被普遍採用前,就已經建好的網站,這麼作是必要的。在標準模式下,行爲即(希望如此)由 HTML 與 CSS 的規範描述的行爲。在接近標準模式下,只有少數的怪異行爲被實現。 那麼所謂標準模式,就必定都「標準」嗎?答案固然是否認的,由於各個瀏覽器廠商實現標準的階段不一樣,因此各個瀏覽器的「標準模式」之間也會有很大的不一樣。 Firefox、Safari、Chrome、Opera (自 7.5 之後)、 IE8 和 IE9 都有一個準標準模式。那麼既然標準模式都不那麼標準,準標準的模式確定就更不標準了。
  • 問解釋一下盒模型寬高值的計算方式,邊界塌陷,負值做用,box-sizing概念
    答:盒模型 a. ie678怪異模式(不添加 doctype)使用 ie 盒模型,寬度=邊框+padding+內容寬度 b. chrome, ie9+, ie678(添加 doctype) 使用標準盒模型,寬度= 內容寬度 box-sizing content-box(默認) 佈局所佔寬度Width: Width = width + padding-left + padding-right + border-left + border-right 佈局所佔高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom border-box 佈局所佔寬度Width: Width = width(包含padding-left + padding-right + border-left + border-right) 佈局所佔高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom) 邊界塌陷 同一BFC下,相鄰快級元素邊界取最大值 負值做用 display:inline-block是什麼呢?相信你們對這個屬性並不陌生,根據名字inline-block咱們就能夠大概猜出它是結合了inline和block二者的特性於一身,簡單的說:設置了inline-block屬性的元素既擁有了block元素能夠設置width和height的特性,又保持了inline元素不換行的特性。
  • window.onload和document.onload是不是同時執行,爲何;
  • JS中prototype、proto、super分別是什麼?
    答: 這個我一臉懵逼,只說了prototype是原型,_proto_是隱式原型。
  • arguments是數組嗎?怎麼實現用它調用數組方法?類數組和數組的區別是什麼?arguments有length屬性嗎? 爲何要遍歷類數組取值組成數組,還有更簡單的方法嗎?
  • for…in 和for...of的區別
    答:for of 遍歷的是值,for in 遍歷的是索引。
  • 數組中的幾個替換/遍歷方法
  • 如何理解跨域;
  • 跨域你是怎麼解決的,jsonp有什麼缺點
    -> 瀏覽器的同源策略致使了跨域,用於隔離潛在惡意文件的重要安全機制
    -> [jsonp ,容許 script加載第三方資源]https://segmentfault.com/a/1190000008445998
    -> nginx 代理轉發(nginx 服務內部配置 rewrite proxy_pass)
    -> cors 先後端協做設置請求頭部,Access-Control-Allow-Origin 等頭部信息
    -> iframe 嵌套通信,postmessage
  • cors請求和普通的http請求有什麼區別
  • 問data-xxx 屬性的做用是什麼?
    答:data- 屬性賦予咱們在全部 HTML 元素上嵌入自定義 data 屬性的能力。 存儲的(自定義)數據可以被頁面的 JavaScript 中利用,以建立更好的用戶體驗
  • promise、setTimeout、async/await的執行順序。
  • 用過NodeJS的EventEmitter模塊嗎,它是怎麼實現功能的,步驟是什麼;
  • events模塊只提供了一個對象:events.EventEmitter。EventEmitter的核心就是事件觸發和事件監聽器功能封裝。
  • 同源不一樣標籤之間的通訊
  • 同源標籤之間如何通訊;
  • hybrid 實現原理
    Hybrid App技術解析 -- 原理篇
  • hybrid 通訊方式
    -> JSBridge
    Android的WebView中有一個WebChromeClient類,這個類其實就是用來監聽一些WebView中的事件的,咱們發現其中有三個對應於js中的alert(警告框),comfirm(確認框)和prompt(提示框)方法,經過重寫WebView中WebChromeClient類的onJsPrompt()方法來進行js和java的通訊。

(1) 在js腳本中把對應的方法名,參數等寫成一個符合協議的uri,而且經過window.prompt方法發送給java層。jquery

(2) 在java層的onJsPrompt方法中接受到對應的message以後,經過JsCallJava類進行具體的解析。webpack

(3) 在JsCallJava類中,咱們解析獲得對應的方法名,參數等信息,而且在map中查找出對應的類的方法。

React

  • React16 有沒有使用過
  • react 怎樣提升性能;
    答:shouldComponentUpdate: react的每次render都是帶動整個項目一塊兒render的,渲染性能消耗很大很大。要用shouldComponentUpdate更新生命週期函數優化。 當該函數默認返回true的時候,一旦prop或者state有任何變化,都會引發從新render。 shouldComponentUpdate(object nextProps, object nextState) : -boolean 當組件決定任何改變是否要更新到DOM時被調用。做爲一個 優化 實現比較this.props 和 nextProps 、this.state 和 nextState ,若是React應該跳過更新,返回false。 當props、state發生變化時,React會根據shouldComponentUpdate方法來決定是否渲染整個組件。
  • React 的virtual dom 的瞭解和jquery的直接操做節點的渲染方式相比的優勢;
  • React 的生命週期
  • componentWillReceiveProps componentShouldUpdate 區別
  • componentShouldUpdate 會作setState操做嗎
  • React之間組件通訊的方式,兩個兄弟組件之間的通訊方式
  • mobx和redux有沒有了解過
  • redux基本組成和設計
  • 介紹堆棧和隊列,如何用堆棧實現隊列

VUE

  • VUE的原理setter和getter相關知識
  • vue項目須要注意什麼,能夠優化的地方;
  • vue的computed實現原理;
  • vue-router的原理;

es6 面試題彙總

es6 面試題彙總

編程題

  • 快速排序
// 時間複雜度(nlogn), 空間複雜度O(n)
var quickSort = function(arr) {
    if(arr.length<=1) return arr;
    var left = [], right = [], point = Math.floor(arr.length/2);
    var middle = arr.splice(point, 1)[0];
    for(var i = 0; i < arr.length; i++){
        arr[i] < middle ? left.push(arr[i]) : right.push(arr[i]) ;
    }
    return quickSort(left).concat([middle], quickSort(right));
}
  • 數組去重
a.forEach(function(value, index){
  b.indexOf(value) === -1 && b.push(value);
})

a.map(function(value, index){
  b.indexOf(value) === -1 && b.push(value);
})

var c;
c = a.filter(function(value, index, array){
  return index === array.indexOf(value);
})

function unique(arr) {
  var ret = [];
  var tmp = {};
  
  for(var i = 0, len = arr.length; i < len; i++){
    if(!tmp[typeof arr[i] + arr[i]]) {
      tmp[typeof arr[i] + arr[i]] = true;
      ret.push(arr[i]);
    }
  }
  
  return ret;
}
  • 將多維數組平鋪;
一、 var myNewArray = [].concat.apply([], myArray);
二、 var myNewArray4 = [].concat(...myArray);
三、 var myNewArray = myArray.reduce(function(prev, curr) {
        return prev.concat(curr);
    });
  • 手寫簡易 EventEmiter
// 參照 vue 源碼實現
var EventEmiter = function (){
  this._events = {};
};
EventEmiter.prototype.on = function (event, cb){
  if (Array.isArray(event)){
    for (let i = 0, l = event.length; i < l; i++){
      this.on(event[i], cb);
    }
  } else {
    (this._events[event] || (this._events[event] = [])).push(cb);
  }
  return this;
};
EventEmiter.prototype.once = function (event, cb){
  function on () {
    this.off(event, cb);
    cb.apply(this, arguments);
  }
  on.fn = cb;
  this.on(event, on);
  return this;
};
EventEmiter.prototype.off = function (event, cb){
  if (!arguments.length){
    this._events = Object.create(null);
    return this;
  }
  if (Array.isArray(event)){
    for (let i = 0, l = event.length; i < l; i++){
      this.off(event[i],cb);
    }
    return this;
  }
  if (!cb){
    this._events[event] = null;
    return this;
  }
  if (cb){
    let cbs = this._events[event];
    let i = cbs.length;
    while(i--){
      if (cb === cbs[i] || cb === cbs[i].fn){
        cbs.splice(i, 1);
        break;
      }
    }
    return this;
  }
};
EventEmiter.prototype.emit = function (event){
  let cbs = this._events[event];
  let args = Array.prototype.slice.call(arguments, 1);
  if (cbs){
    for (let i = 0, l = cbs.length; i < l; i++){
      cbs[i].apply(this,args);
    }
  }
};
  • 寫一個url解析函數,解析出查詢參數;
function parseUrl(url){
    var result = [];
    var query = url.split("?")[1];
    var queryArr = query.split("&");
    queryArr.forEach(function(item){
        var obj = {};
        var value = item.split("=")[1];
        var key = item.split("=")[0];
        obj[key] = value;
        result.push(obj);
    });
    return result;
}
  • ['1.45.0','1.5','6','3.3.3.3']要求從小到大排序,注意'1.45'比'1.5'大;
// 使用的是選擇排序
const versionSort = version => {
  const temp = version.map(v => v.split('.'));
  for (let i = 0; i < temp.length; i++) {
    let minIndex = i;
    for (let j = i; j < temp.length; j++) {
      for (let k = 0; k < temp[j].length; k++) {
        const current = +temp[j][k],
        min = +temp[minIndex][k];
        if (current < min) {
          minIndex = j;
        }
        // 只要不等,就馬上結束最內層遍歷!
        if (current !== min) {
          break
        }
      }
    }
    [temp[i], temp[minIndex]] = [temp[minIndex], temp[i]];
  }
  return temp.map(v = > v.join('.'))
};
  • 隨意給定一個無序的、不重複的數組arr,任意抽取n個數,相加和爲sum,也可能無解,請寫出該函數。

  • 節流函數怎麼寫;
function debounce(fn, interval, immediate) {
    let timer;

    return function() {
        const context = this;
        const args = arguments;
        
        timer && clearTimeout(timer);

        if(immediate) {
            var callNow = !timer;
            timer = setTimeout(function() {
                timer = null;
            }, interval);
            callNow && fn.apply(context, args);
        } else {
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, interval);
        }
    }
}
  • 手寫bind函數;
Function.prototype.bind = function(ctx) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var F = function() {};

    var fBind = function() {
        var argsBind = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof F ? this : ctx, args.concat(argsBind));
    }

    F.prototype = this.prototype;
    fBind.prototype = new F();

    return fBind;
}
function parseInt(s, radix = 10) {
    if (typeof s !== 'string') {
        return NaN;
    }
    if (typeof radix !== 'number' || radix < 2 || radix > 36) {
        return NaN;
    }
    let result = 0;
    for (let i = 0; i < s.length; i += 1) {
        let c = s.charCodeAt(i);
        // 小寫大寫字母轉換爲數字
        if (c >= 97) {
            c -= 87;    // - 'a' + 10
        } else if (c >= 65) {
            c -= 55;    // - 'A' + 10
        } else {
            c -= 48;    // - '0'
        }
        // 若是字母轉化後的值大於進制數,則跳出循環返回以前的結果
        if (c >= radix) {
            if (i === 0) {
                return NaN;
            }
            break;
        }
        // 結果累加,和進制相關
        result = (result * radix) + c;
    }

    return result;
}
  • 正則表達式實現1000000中間加',';
function comma(num) {
    var source = String(num).split(".");
        source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,"); 
    return source.join(".");
}
  • 請使用數組的reduce方法實現數組的map方法;

  • 大數相加
function sumStrings(a,b) {  
    while(a.length < b.length){  
        a = "0" + a;  
    }  
    while(b.length < a.length){  
        b = "0" + b;  
    }  
    var addOne = 0;  
    var result = [];  
    for(var i=a.length-1;i>=0;i--){  
        var c1 = a.charAt(i) - 0;  
        var c2 = b.charAt(i) - 0;  
        var sum = c1 + c2 + addOne;  
        if(sum > 9){  
            result.unshift(sum - 10);  
            addOne = 1;  
        }  
        else{  
            result.unshift(sum);  
            addOne = 0;  
        }  
    }  
    if(addOne){  
        result.unshift(addOne);  
    }  
    if(!result[0]){  
        result.splice(0,1);  
    }  
    return result.join("");  
}
  • 請用至少兩種方法判斷一個對象是不是數組,如何將非數組轉化爲數組
a instanceof Array;
a.constructor === Array;
a.__proto__ === Array.prototype;
Array.prototype.isPrototypeOf(a);  // isProtoTypeOf()
Object.getPrototypeOf(a) === Array.prototype;  // Object.getPrototypeOf()
Object.prototype.toString.call(a) === '[object Array]'; // 首推 -> 前幾種繼承會擾亂, iframe 下 instance 失效
Array.isArray() // polyfill 就是調用字符串判斷法
var argsArray = Array.prototype.slice.call(arguments);

安全

  • xss和csrf攻擊;
    -> xss 跨站腳本攻擊,主要是前端層面的,用戶在輸入層面插入攻擊腳本,改變頁面的顯示,或則竊取網站 cookie,預防方法:不相信用戶的全部操做,對用戶輸入進行一個轉義,不容許 js 對 cookie 的讀寫
    -> csrf 跨站請求僞造,以你的名義,發送惡意請求,經過 cookie 加參數等形式過濾
    咱們無法完全杜絕攻擊,只能提升攻擊門檻

  • cookie的有哪些安全的設置;

相關文章
相關標籤/搜索