今日頭條面試題彙總
CSS
解釋 css 各類定位,absolute 相對於誰定位；
-> position: relative/absolute/fixed/static/inherit/initial/unset/sticky
-> 相對於最近一層position非static的父元素
-> relative不會脫離文檔流javascriptiframe 中的 fixed 定位和什麼有關，怎麼固定瀏覽器窗口
-> iframe窗口非瀏覽器窗口，經過postmessage通訊將top頁面的scrolltop傳遞給iframe，iframe內部經過監聽通信事件動態設置元素的定csstransfrom 的主要用法
-> transform用來向元素應用各類2D和3D轉換，該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜等操做,有translate, scale, rotate, skew,htmlflex 盒子佈局
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 面試題彙總
編程題
- 快速排序
// 時間複雜度(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;
}
promise封裝;
簡單的 Promise- 寫一個parseInt函數;
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的有哪些安全的設置；
相關文章
- 1. 今日頭條面試題
- 2. 今日頭條前端面試總結
- 3. 今日頭條Android面試
- 4. 今日頭條面試
- 5. 今日頭條筆試題
- 6. C++ 紙牌 今日頭條面試題
- 7. 今日頭條高頻面試題LRU
- 8. 今日頭條面試題與解析
- 9. 2018今日頭條春招面試題
- 10. 今日頭條筆試面試大全
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • Web 詞彙表 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • PHP Ajax 跨域問題最佳解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 今日頭條面試題
- 2. 今日頭條前端面試總結
- 3. 今日頭條Android面試
- 4. 今日頭條面試
- 5. 今日頭條筆試題
- 6. C++ 紙牌 今日頭條面試題
- 7. 今日頭條高頻面試題LRU
- 8. 今日頭條面試題與解析
- 9. 2018今日頭條春招面試題
- 10. 今日頭條筆試面試大全