前端面試題精選

時間 2019-11-21

標籤端面試題精選简体版

原文原文鏈接

javascript

有一個全局變量 a，有一個全局函數 b，實現一個方法bindData，執行後，a的任何賦值都會觸發b的執行。javascript

vue簡單的雙向綁定原理css

function bindData(target, event){
	for(var key in target) {
		if(target.hasOwnProperty(key)) {
			(function(){
				var v = target[key];
				Object.defineProperty(target, key, {
					get: function() {
						return v;
					},
					set: function(_value) {
						v = _value;
						event.call(this)
					}
				})
			})()
		}
	}
}
複製代碼

將數字轉換成中文大寫的表示，處理到萬級別，例如 12345 -> 一萬二千三百四十五 CodePenhtml
react生命週期參考答案前端
閉包vue
v8引擎區別瀏覽器作的優化java
編譯型和解釋型語言的區別node
跟緩存相關的配置react
如何提升webpack打包的速度webpack
nginx 轉發的配置css3
node 的一些特色
node對於字節流的控制
如何處理js的錯誤:eslint。
node垃圾回收
js內存溢出
if([]) 是true，可是[]==false,由於任何類型跟bool比較都會先轉化爲數值型。[]是object ,if的時候不是false。
()=>{} 箭頭函數的區別
- 更短的語法糖
- 不綁定this，沒有本身的this
- 沒有arguments
- 不能夠做爲構造函數，不能用new
- 沒有prototype
實現一個function 輸入字符串，驗證其字符串是合法的html標籤，只要開閉合理就能夠。使用棧來解決。
setTimeout(function(){},0)和process.nextTick()的區別
紅黑樹
promise，原生寫一個
取得body下全部元素的tagname，並去重輸出。
前端國際化
react組件，如何更換主題
setImmediate
flex佈局 ie10 11不支持
css選擇器優先級：developer.mozilla.org/zh-CN/docs/…
事件驅動
viewport有幾種
prerender
[]==[] false 基本數據類型是值的比較，引用類型是地址的比較。

__proto__和prototype

Object.prototype.__proto__=null  
Object.__proto__=== Function.prototype 
Function.__proto__===Function.prototype 
Function.__proto__.__proto__=== Object.prototype 
複製代碼

事件過程事件捕獲-》目標-》事件冒泡

阻止冒泡方法

// 阻止冒泡
stopPropagation() //chrome
event.cancelBubble() //IE
// 阻止默認事件
preventDefault() //chrome 
event.returnValue() //IE

//JQuery 提供了兩種方式來阻止事件冒泡。
$("#div1").mousedown(function(event){
    event.stopPropagation();
});
$("#div1").mousedown(function(event){
    return false;
});
複製代碼

斷點續傳，斷點下載
array的基本方法
arguments轉化爲真正的數組Array.prototype.slice.call(arguments)

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());
複製代碼

深拷貝 CodePen

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;
}
複製代碼

閉包

閉包是指有權訪問另外一個函數做用域中的變量的函數. 建立閉包常見方式,就是在一個函數內部建立另外一個函數.
- 應用場景 設置私有變量和方法
- 不適合場景 返回閉包的函數是個很是大的函數
- 閉包的缺點 常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。
爲何會出現閉包這種東西，解決了什麼問題

受JavaScript鏈式做用域結構的影響，父級變量中沒法訪問到子級的變量值，爲了解決這個問題，才使用閉包這個概念。

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

var a=1;
var b=2;
a=a+b;
b=a-b;
a=a-b;
複製代碼

函數防抖和函數節流

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

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)       
}
複製代碼

js繼承理解JS的6種繼承方式
call 和apply 詳解call和apply

node延遲函數執行順序是什麼？

setTimeout(()=>{
console.log(3)
},0);
setImmediate(()=>{
console.log(2)
});
process.nextTick(()=>{
console.log(4)
})

// 4 2 3

以上代碼的執行順序爲：
 
1. process.nextTick
2. setImmediate
3. setTimeout
複製代碼

嚴格模式: "use strict"
數據類型: 6種，Undefined,Null,Boolean,Number,String,Object.注意數據不是哈，數組被歸於object
使用typeof操做符，可能返回如下六種結果:undefined,boolean,string,number,object,function.
typeof null=object
函數不是一種數據類型。
雖然null==undefined ，但null指的是一個空的對象引用。undefined 代表變量沒有被賦值或者未定義。
永遠不要測試某個特定的浮點數
NaN是一種數值，NaN與任何數都不等，包括他自己。
Number() 能夠轉換任何數據類型，parseInt()和parseFloat()只能字符串轉數值
Number(true)=1,Number(false)=0,Number(null)=0,Number("")=0
其餘類型轉化爲字符串，.toString()方法，String(),區別在於null和undefined沒有toSting()方法，必需要用String()
判斷一個值是哪一種基本類型使用typeof ,是哪一種引用類型用instanceof
讓js啓動變量的回收，var a=121,a=null

JavaScript的新標準

await
symbol
async
reflect
proxy

webpack

webpack babel配置中的stage-0是什麼意思？
webpack 打包構建速度優化
- 縮小文件的搜索範圍
- 私用DllPlugin減小基礎模塊的編譯次數
- 使用happyPack開啓多進程Loader轉換
- 使用ParallelUglifyPlugin開啓多進程壓縮JS 文件
webpack 開發體驗優化
- 監聽文件修改並自動刷新
- 開啓模塊熱替換HMR
優化輸出質量，減少輸出代碼體積
- 區分環境，減少生產環境代碼體積
- 壓縮JS ES CSS
- 使用Tree Shaking 踢出JS死代碼
優化輸出質量，加速網絡請求
- CDN加速
- HTTP2
- 公共代碼提取
- 按需加載
提高代碼運行效率
- 使用Prepack提早求值
- 使用Scope Hoisting，做用域提高
使用輸出分析工具
- 官方工具Webpack Analyse
- webpack-bundle-analyzer
其餘TIPs
- use: ['babel-loader?cacheDirectory']，緩存babel編譯結果結果。
- profile:true 展現webpack構建性能信息
- cache:true 經過緩存提高構建速度
- 使用url-loader將小圖片用base64加到css或者js中。
- 經過imagemin-webpack-plugin壓縮圖片，經過webpack-spritesmith製做雪碧圖
- 開發環境下將devtool設置爲cheap-module-eval-source-map，由於生成這種source map的速度最快，能加速構建。在生產環境下將devtool設置爲hidden-source-map

模塊化

AMD requirejs 依賴前置
CMD seajs 就近依賴
commonjs node
ES6模塊化：export import

前端安全

XSS（跨站腳本攻擊）
CSRF跨站請求僞造

僞形成合法用戶發起請求。一個網站中有一個a標籤href是刪除用戶信息的url，若是是post能夠模擬表單提交。
HTTP劫持，
界面操做劫持，
錯誤的內容推斷（使用X-Content-Type-OptionsHTTP:nosniff）
保護cookies httpOnly爲true，阻止js調用該cookies屬性。

vue

vue 更新機制，雙向綁定。
react 更新機制，diff算法。
事件機制 emit和 on實現。

React

React高階組件

HTML5離線存儲和本地緩存

離線存儲

localStorage 和 sessionStorage方法 不一樣域下就算key相同取不到的值也不一樣，如localhost和127.0.0.1

localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
複製代碼

css

實現圖片邊框和漸變邊框

border-image:url()   linear-gradient(red, yellow) 10;
複製代碼

多背景設置

background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
url(https://mdn.mozillademos.org/files/11307/bubbles.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
複製代碼

文字省略樣式：

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
複製代碼

文字波浪下劃線

text-decoration:green wavy underline
複製代碼

清除浮動方法 CodePen
等高佈局 CodePen
- 最完美的解決方式：等高佈局有幾種不一樣的方法，但目前爲止我認爲瀏覽器兼容最好最簡便的應該是padding補償法。首先把列的padding-bottom設爲一個足夠大的值，再把列的margin-bottom設一個與前面的padding-bottom的正值相抵消的負值，父容器設置超出隱藏，這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度，當它裏面的任一列高度增長了，則父容器的高度被撐到它裏面最高那列的高度，其餘比這列矮的列則會用它們的padding-bottom來補償這部分高度差。由於背景是能夠用在padding佔用的空間裏的，並且邊框也是跟隨padding變化的，因此就成功的完成了一個障眼法。

盒子模型 box-sizing

content-box = width （content的寬）
border-box = width + border + padding 
複製代碼

垂直水平居中 CodePen
自適應居中 CodePen
css3實現正方形

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 CodenPen
css 預編譯
- less
- stylus
- post css
- css module

正則表達式

寫一個簡單的模板引擎（字符串和正則）

var tem="我愛你，${0},${1}"
var a="小吳"
var b="小劉"
function tempFunc(template){
var reps=template.match(/\${[\d]+}/g)
for(let i=0;i<reps.length;i++){
	var ar=arguments[i+1]
	if(ar){
		template=template.replace(reps[i],ar)	 
	}else{
		template=template.replace(reps[i],"")
	}
}
	return template
}

var t=tempFunc(tem,a,b)
複製代碼

12345678.22 轉化爲 12,345,678.22

'1234567891'.replace(/(\d+?)(?=(\d{3})+$)/g, '$1,')
複製代碼

12,345,678.20 轉化爲 12345678.20

new Number(string.replace(/[^0-9.]/g,''))
複製代碼

網絡

DNS
- dig www.baidu.com 能夠查看DNS解析過程
- 域名總長度則不能超過253個字符
- ICANN 管理 WHOIS 數據庫
http1和http2區別
- 新的二進制格式
- 多路複用
- header壓縮
- 服務端推送：server push
https 的過程和服務器搭建
http 的無狀態

web 新技術

Web Assembly
PWA
Houdini：自定義css屬性
web socket
service work

項目經驗

選擇你最引覺得傲的項目，細細聊。

歡迎訪問個人我的網站:yondu.vip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。