前端面試集錦（2）

面試總結

一、自我介紹：姓名、學校、項目簡述、自我評價

二、從輸入URL到頁面加載發生了什麼

 　　http://www.javashuo.com/article/p-sqewywzj-b.html

　　一、瀏覽器的地址欄輸入URL並按下回車。

　　二、瀏覽器查找當前URL是否存在緩存，並比較http緩存是否過時。

　　三、DNS解析URL對應的IP。

　　四、根據IP創建TCP鏈接（三次握手）。

　　五、HTTP發起請求。

　　六、服務器處理請求，瀏覽器接收HTTP響應。

　　七、渲染頁面，構建DOM樹。

　　八、關閉TCP鏈接（四次揮手）。

三、頁面重繪和迴流以及優化

　　https://www.css88.com/archives/4996

       http://www.javashuo.com/article/p-gixdflfw-kh.html

1. 當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。
2. 每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹，完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程成爲重繪。
3. 當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。
4. 注意：迴流必將引發重繪，而重繪不必定會引發迴流。

優化：

　　1. 將屢次改變樣式屬性的操做合併成一次操做

　　2. 將須要屢次重排的元素，position屬性設爲absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其餘元素。例若有動畫效果的元素就最好設置爲絕對定位。

　　3. 在內存中屢次操做節點，完成後再添加到文檔中去。例如要異步獲取表格數據，渲染到頁面。能夠先取得數據後在內存中構建整個表格的html片斷，再一次性添加到文檔中去，而不是循環添加每一行。

　　4. 因爲display屬性爲none的元素不在渲染樹中，對隱藏的元素操做不會引起其餘元素的重排。若是要對一個元素進行復雜的操做時，能夠先隱藏它，操做完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。

　　5. 在須要常常獲取那些引發瀏覽器重排的屬性值時，要緩存到變量。

 

四、IE9兼容性

 

五、css優化

 

六、elementUI優缺點

　　Element UI 是一套採用 Vue 2.0 做爲基礎框架實現的組件庫，它面向企業級的後臺應用，可以幫助你快速地搭建網站，極大地減小研發的人力與時間成本

 　　（1）<el-input>沒法徹底兼容<input> 
　　　　場景：<el-input>和vuejs結合起來時，沒法實現輸入框中的動態更新 
　　　　解決方法：v-model要和<input/>搭配起來才能實現實時更新 

　　（2）<el-button>對disabled屬性的不支持 
　　　　應用場景：有一個輸入框，在框內沒有內容時禁用旁邊的刪除按鈕 
　　　　方法：disabled屬性

　　　　因此只能使用<button>而不是<el-button>來使用disabled屬性

 

七、修改elementUi默認樣式 （-deep）

　　https://blog.csdn.net/wangguoyu1996/article/details/81394707

　　（1）在須要更改的組件裏新增一個style標籤【重點：不要加scoped】，而後直接獲取class設置樣式

　　（2）/deep/；.resourceDig爲咱們要修改組件類名的父級組件樣式類名。

　　　　

 

八、Less和Sass使用過嗎？Less優缺點?Less中@的使用

 

九、ES6數組去重：new set()

 

十、ES6擴展運算符（...）用法

 

十一、排序算法（冒泡、快排實現代碼）

 

十二、怎麼理解模塊化

　　http://www.javashuo.com/article/p-uqptukos-dz.html

　　http://www.javashuo.com/article/p-ngitjbct-kg.html

　　http://www.javashuo.com/article/p-kwegwhtc-gx.html

　　當即執行函數： https://blog.csdn.net/csdn_yudong/article/details/77431106

 　　所謂模塊化開發，就是封裝細節，提供接口，彼此之間互不影響，每一個模塊都是實現某一特定功能。

　　模塊化開發的4點好處：

　　　　1 避免變量污染，命名衝突

　　　　2  提升代碼複用率

　　　　3 提升維護性

　　　　4 依賴關係的管理

 

 

1三、什麼狀況下使用組件，優勢

 

1四、vue父子組件之間怎麼通訊

 

1五、vue全局組件使用、import的缺點

　　https://blog.csdn.net/ywl570717586/article/details/79984909

　　vue組件分兩種： 全局組件和局部組件

　　全局組件引入寫法：在項目的main.js中

　　局部組件引入寫法：在須要使用組件的a.vue文件中

 

1六、vue生命鉤子

 

1七、vue-router源碼分析及路由實現原理

　　http://www.javashuo.com/article/p-xgymiwpz-na.html

　　https://router.vuejs.org/zh/api/#router-resolve

　　總結：

　　一、安裝插件
　　混入beforeCreate生命週期處理，初始化_routerRoot，_router，_route等數據
　　全局設置vue靜態訪問router和router和route，方便後期訪問
　　完成了router-link和 router-view 兩個組件的註冊，router-link用於觸發路由的變化，router-view做 爲功能組件，用於觸發對應路由視圖的變化

　　二、根據路由配置生成router實例
　　根據配置數組生成路由配置記錄表
　　生成監控路由變化的hsitory對象

　　三、將router實例傳入根vue實例
　　根據beforeCreate混入，爲根vue對象設置了劫持字段_route，用戶觸發router-view的變化
　　調用init()函數，完成首次路由的渲染，首次渲染的調用路徑是 調用history.transitionTo方法，根據router的match函數，生成一個新的route對象
　　接着經過confirmTransition對比一下新生成的route和當前的route對象是否改變，改變的話觸發updateRoute，更新hsitory.current屬性，觸發根組件的_route的變化,從而致使組件的調用render函數，更新router-view

　　另一種更新路由的方式是主動觸發
　　router-link綁定了click方法，觸發history.push或者history.replace,從而觸發history.transitionTo
　　同時會監控hashchange和popstate來對路由變化做對用的處理

　　　

　　

 

 

1八、nodejs主要實現什麼

 

===========================================================================================================================

一、vue生命週期

 

二、vue中修改了數據但視圖沒法更新的狀況

　　https://blog.csdn.net/qq_39985511/article/details/79778806

 

三、vue動態組件

　　https://cn.vuejs.org/v2/api/#is

　　經過 component 動態組件的方式遍歷數據
　　<component :is="item.type" :data="item" v-for="item in sourceData"></component>
　　數據必須包含一個數據的所屬組件類型

四、vue父子組件傳播

 

五、vue監聽路由

 

六、vue路由按需加載

 

七、v-if和v-show的區別

 

八、清除浮動的方法

　　https://blog.csdn.net/u013137242/article/details/83753804

　　（1）overflow:hidden;

 

<div style="overflow:hidden;zoom:1;">
    <p style="float: left;">使用overflow:hidden 清除浮動</p>
</div>

 

　　（2）clear:both;

<style>
.clearfix:after{
    /*START 真正起到清除浮動的代碼*/
    content: '';
    display: block;
    clear: both;
    /*END 真正起到清除浮動的代碼*/
    height:0;
}
.clearfix{display: inline-block;} /* for IE/Mac */
</style>
<div class="clearfix">
    <div style="float: left;">clear:both ;son div</div>
</div>

 

 

　　

九、display有幾種

 　　http://www.w3school.com.cn/cssref/pr_class_display.asp

　　none、inline、block、inline-block、table、inherit（繼承父級的display屬性）

 

十、inline-block和block的區別

　　http://www.javashuo.com/article/p-zfyowszx-hm.html

　　http://www.javashuo.com/article/p-hwbglygn-eo.html

• display:block

1. block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
2. block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
3. block元素能夠設置margin和padding屬性。

• display:inline

1. inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
2. inline元素設置width,height屬性無效。
3. inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

• display:inline-block

1. 簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。

 

十一、a標籤是行內元素嗎？能夠設置寬、高、行高嗎？

　　a標籤是內聯元素，不能夠設置寬、高，能夠設置行高、padding水平方向、margin水平方向

 

十二、css實現省略號？實現省略號的屬性是？

　　一、純css+js控制省略號

<html>
<head>

<style type="text/css">
.box{width: 100px;height: 50px;overflow: hidden;}
.wz{float: left;height: 50px;margin-right: 20px;}
.dot{float: right;width: 20px;height：50px;margin-top: -50px;}
</style>

</head>

<body>
<div class="box">
　　<div class="wz">文字內容</div>
　　<div class="dot">...</div>
</div>

</body>
</html>

 二、https://blog.csdn.net/zpcqdkf/article/details/80486086

　　width:300px;

　　white-space:nowrap;

　　overflow:hidden;

　　text-overflow:ellipsis;

 

1三、js刪除數組最後一個元素、數組去重、數組轉字符串

　　數組去重： http://www.javashuo.com/article/p-muwsyhgx-bx.html

 　　pop()刪除數組最後一個元素

　　shift()刪除數組第一個元素

　　push()數組末尾添加元素一個或多個元素

　　unshift()數組開頭添加一個或多個元素

　　reverse() 顛倒數組順序

　　splice() 數組刪除/插入元素

　　join() 數組轉字符串

　　cancat() 數組鏈接

　　indexOf() 查找是否存在某個元素，返回下標（數組去重）　

　　js中遍歷數組並不會改變原始數組的方法總共有12個:

　　ES5：
　　forEach、every 、some、 fliter、map、reduce、reduceRight、
　　ES6：
　　find、findIndex、keys、values、entries

1四、js事件委託

 

1五、map和forEach區別

 　　https://blog.csdn.net/zgrkaka/article/details/79650804　

　　共同點：

　　　　1.都是循環遍歷數組中的每一項。

　　　　2.forEach() 和 map() 裏面每一次執行匿名函數都支持3個參數：數組中的當前項item,當前項的索引index,原始數組input。

　　　　3.匿名函數中的this都是指Window。

　　　　 4.只能遍歷數組。

　　不一樣點：

　　　　1.forEach()沒有返回值。

　　　　2.map()有返回值，能夠return 出來

 

1六、promise的三個狀態

 　　padding，fulfilled，rejected

　　http://www.javashuo.com/article/p-oxymyvfu-ct.html

 

 

1七、localStorage和sessionStory區別

　　https://blog.csdn.net/u013129606/article/details/81351163

　　http://www.javashuo.com/article/p-vbjqwfmo-ke.html

 

1八、字符串截取方法

 　　Substring

 

======================================================

1九、深刻理解js的prototype以及prototype的一些應用