第二次面試
HTML
-
HTML5中的新標簽，舉例一下
canvas繪畫，本地離線存儲localStorage，sessionStorage，video和audio元素，語義化元素，表單類型（date，time，email等），地理定位等
CSS
-
CSS3新的標簽
邊框：圓角border-radius，陰影box-shadow，邊框圖片border-image
背景：背景定位區域background-origin，背景大小支持百分比background-size
文字效果：文字陰影text-shadow，長單詞拆分word-wrap
2D轉換：transform:對元素進行移動translate()，縮放scale()，轉動rotate()，拉伸skew()
3D轉換：transform:對元素進行x軸旋轉rotateX()，y軸旋轉rotateY()
過渡，動畫， 多列等等 -
如何垂直居中一個浮動元素
- 父盒子有寬高
父元素相對定位，子元素絕對定位，top：50%；left：50%。margin負的左右二分之一的height，width
.content{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
float: left;
height: 100px;
background-color: #ff6700;
margin-top: -50px;
margin-left: -50px;
}- 父盒子沒有高寬
父盒子相對定位，子盒子決定定位，上下左右都為0，margin：auto；
.content{ width: 200px; height: 200px; background-color: #ff6700; float: left; margin: auto; position: absolute; left: 0; top: 0; bottom: 0; right: 0; } -
nth選擇器
CSS3 :nth-child() 選擇器
規定屬於其父元素的第二個子元素的每個 p 的背景色：
p:nth-child(2)
{
background:#ff0000;
} -
CSS外邊距(margin)重疊及防止方法
-
相鄰marign重疊的問題
1.1 示例：
<style> *{ margin:0; padding: 0; } .divout{ width: 100px; height: 100px; background: yellow; margin-bottom: 50px; border: 1px solid black; } .divout1{ width:50px; height: 50px; background: yellow; margin-top: 80px; /*float:left;*/ /*position:absolute;*/ border: 1px solid black; } </style> <body> <div class="divout"> </div> <div class="divout1"> </div> </body>1.2 外邊距重疊計算方式
-
全部都為正值，取最大者；
-
不全是正值，則都取絕對值，然后用正值的最大值減去絕對值的最大值；
-
沒有正值，則都取絕對值，然后用0減去最大值。
1.3 解決辦法
- 底部元素設置為浮動 float:left;
- 底部元素的position的值為absolute/fixed
- 在設置margin-top/bottom值時統一設置上或下
-
-
元素和父元素margin值問題
父元素無 border、padding、inline content 、 clearance時，子元素的margin-top/bottom會與父元素的margin產生重疊問題。示例
<style> *{ margin:0; padding: 0; color: black; } #parrent{ width:300px; height:150px; margin-top: 20px; background:teal; } #box1{ width:100px; height:100px; background:aqua; margin:100px 0; }<body> <div id="parrent"> <div id="box1"> 我是box1 </div> 我是內容 </div> </body>2.1 解決辦法
外層元素添加padding
外層元素 overflow:hidden;
外層元素透明邊框 border:1px solid transparent;
內層元素絕對定位 postion:absolute:
內層元素 加float:left;或display:inline-block;
-
-
說一下flex彈性布局的屬性
justify-content： //子元素水平排列的方式 center //居中 space-between //兩端對齊 space-around // 子元素拉手分布 flex-start // 居左 flex-end //居右 align-items ： // 子元素的垂直居中的排列方式 enter // 居中 flex-end //底部 flex-start //開始 align-content : //多行的時候，子元素的垂直排列方式 center //居中 flex-end //底部 flex-start //開始 flx-direction： // 排列方式row 橫向排列 row-reverse //橫向反向排列 flex-wrap ： //子元素是否在一行顯示 no-wrap //不換行 wrap //換行 -
說你對rem的理解
- 相對長度單位，相對於根元素(即html元素)font-size計算值的倍數。簡單來說，就是一個相對單位，相對根元素子體大小的倍數。
- 例如：html的font-size:12px；那么使用rem作為單位的，1rem等價於12px，2rem等價於24px；
- 按定高寬設計出來頁面，然后轉換為rem單位，配合js查詢屏幕大小來改變html的font-size，完美自適應大屏小屏。
-
px、rem和em的區別
px：相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。特點：
- IE無法調整那些使用px作為單位的字體大小；
- 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字體單位；
- Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。
- em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前未設置，則相對於瀏覽器的默認字體尺寸。特點：
- em的值並不是固定的；
- em會繼承父級元素的字體大小；
- rem：相對長度單位，相對於根元素(即html元素)font-size計算值的倍數。
JavaScript
-
JavaScript的數據類型
值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。
引用數據類型：對象(Object)、數組(Array)、函數(Function)。
注：Symbol 是 ES6 引入了一種新的原始數據類型，表示獨一無二的值。
-
深拷貝和淺拷貝的區別
1.淺拷貝： 將原對象或原數組的引用直接賦給新對象，新數組，新對象／數組只是原對象的一個引用
2.深拷貝： 創建一個新的對象和數組，將原對象的各項屬性的“值”（數組的所有元素）拷貝過來，是“值”而不是“引用”
-
深拷貝 JS 實現
-
原型和原型鏈
原型：
JavaScript 規定，每一個構造函數都有一個 prototype 屬性，指向另一個對象。我們可以把所有對象實例需要共享的屬性和方法直接定義在 prototype 對象上。這個對象的所有屬性和方法，都會被構造函數的所擁有。
Prototype作為對象的內部屬性，是不能被直接訪問的，我們一般通過__proto__這個屬性進行訪問。
在原型對象中還有一個屬性constructor，這個屬性對應創建所有指向該原型的實例的構造函數
原型對象就相當於一個公共的區域，所有同一個類的實例都可以訪問到這個原型對象，我們可以將對象中共有的內容，統一設置到原型對象中。
原型鏈：
在JavaScript中萬物都是對象，對象和對象之間也有關系，並不是孤立存在的。對象之間的繼承關系，在JavaScript中是通過prototype對象指向父類對象，直到指向Object對象為止，這樣就形成了一個原型指向的鏈條
當我們訪問對象的一個屬性或方法時，它會先在對象自身中尋找，如果有則直接使用，如果沒有則會去原型對象中尋找，如果找到則直接使用。如果沒有則去原型的原型中尋找,直到找到Object對象的原型，Object對象的原型沒有原型，如果在Object原型中依然沒有找到，則返回undefined。
-
事件機制和事件委托
事件流的三個階段:
- 事件捕獲
- 處於目標階段
- 事件冒泡
事件委托:
- 事件委托是利用了事件的冒泡原理實現的,子元素的事件通過冒泡形式委托父元素執行
-
數組的去重
-
一、利用ES6 Set去重（ES6中最常用）
function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr)) //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}] -
二、利用for嵌套for，然后splice去重（ES5中最常用）
function unique(arr){ for(var i=0; i<arr.length; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ //第一個等同於第二個，splice方法刪除第二個 arr.splice(j,1); j--; } } } return arr; } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr)) //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}沒有去重，兩個null直接消失了 -
三、利用indexOf去重
function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array = []; for (var i = 0; i < arr.length; i++) { if (array .indexOf(arr[i]) === -1) { array .push(arr[i]) } } return array; } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr)) // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}沒有去重 -
四、利用sort()
-
五、利用對象的屬性不能相同的特點進行去重（這種數組去重的方法有問題，不建議用，有待改進）
-
六、利用includes
-
七、利用hasOwnProperty
-
八、利用filter
-
九、利用遞歸去重
-
十、利用Map數據結構去重
-
十一、利用reduce+includes
-
十二、[...new Set(arr)]
[...new Set(arr)]
//代碼就是這么少----（其實，嚴格來說並不算是一種，相對於第一種方法來說只是簡化了代碼）
-
-
數組怎么拼接
var a = [1,2,3]; var b = [4,5,6];1、concat
js的Array對象提供了一個叫concat()方法，連接兩個或更多的數組，並返回結果。
var c = a.concat(b);//c=[1,2,3,4,5,6]
這里有一個問題，concat方法連接a、b兩個數組后，a、b兩個數組的數據不變，同時會返回一個新的數組。這樣當我們需要進行多次的數組合並時，會造成很大的內存浪費，所以這個方法肯定不是最好的。
2、for循環
大概的思路是：遍歷其中一個數組，把該數組中的所有元素依次添加到另外一個數組中。直接上代碼：
for(var i in b){
a.push(b[i]);
}
這樣的寫法可以解決第一種方案中對內存的浪費，但是會有另一個問題：丑！這么說不是沒有道理，如果能只用一行代碼就搞定，豈不快哉~
3、apply
函數的apply方法有一個特性，那就是func.apply(obj,argv)，argv是一個數組。所以我們可以利用這點，直接上代碼：
a.push.apply(a,b);
調用a.push這個函數實例的apply方法，同時把，b當作參數傳入，這樣a.push這個方法就會遍歷b數組的所有元素，達到合並的效果。
這里可能有點繞，我們可以把b看成[4,5,6]，變成這樣：
a.push.apply(a,[4,5,6]);
然后上面的操作就等同於：
a.push(4,5,6);
這樣就很清楚了！
另外，還要注意**兩個小問題**：
1）以上3種合並方法並沒有考慮過a、b兩個數組誰的長度更小。
所以好的做法是預先判斷a、b兩個數組哪個更大，然后使用大數組合並小數組，這樣就減少了數組元素操作的次數！
2）有時候我們不希望原數組（a、b）改變，這時就只能使用concat了。
JQuery
-
Jquery的美元符號$有什么作用
jQuery中就是通過這個美元符號來實現各種靈活的DOM元素選擇的，例如$(“#main”)即選中id為main的元素。
-
Jquery中有哪幾種類型的選擇器？
從我自己的角度來講，可以有3種類型的選擇器，如下：
-
1、基本選擇器：直接根據id、css類名、元素名返回匹配的dom元素。
-
2、層次選擇器：也叫做路徑選擇器，可以根據路徑層次來選擇相應的DOM元素。
-
3、過濾選擇器：在前面的基礎上過濾相關條件，得到匹配的dom元素。
-
4、請使用jQuery將頁面上的所有元素邊框設置為2px寬的虛線？
-
ES6
-
es6的箭頭函數和普通函數有什么區別
let f = function(v) { return v; }; let f = v => v; -
promise
Promise 是異步編程的一種解決方案.簡單說就是一個容器，里面保存着某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，可以從改對象獲取異步操作的消息。
// 1. 創建promise實例,在實例中執行異步操作(比如發送網絡請求) // 2. 異步操作成功時,調用reslove函數傳遞數據 // 3. 異步操作失敗時,調用reject函數傳遞錯誤信息 const promise = new Promise(function(resolve, reject) { // 異步操作 if (/* 異步操作成功 */){ resolve(value); } else { reject(error); } }); // 使用promise實例then方法接收reslove或reject返回的數據 promise.then(function(value) { // 此處數據即為reslove回來的數據 // success }, function(error) { // 此處數據即為reject回來的數據 // failure }); -
字符串擴展
- includes斷字符串中是否包含子字符串,第一個參數表示要測試的子字符串,第二個參數表示從那個位置開始查找,不傳默認從索引0開始。
- startsWith判斷字符串是否以特定的字符串開始
- endsWith判斷字符串是否以特定的字符串結束
- 字符串填充:padStart()和padEnd()可以對字符串進行填充
-
擴展運算符-合並數組
let arr2 = [4,5,6]; let arr3 = [...arr1,...arr2]; console.log(arr3); // [1,2,3,4,5,6]
Vue
-
MVVM
- MVVM是一種分層次開發思想,它是CommonJS規范的實現
- M代表module模型層
- V代碼view視圖層
- VM模型層和視圖層之間沒有任何的聯系,而VM會充當一個調度者,將他們聯系起來,實現雙向數據綁定
-
vue-router路由模式有幾種,原理分別是什么?
vue-router路由庫是用哪種技術實現的,總共有兩種,分別叫hash模式和history模式,默認是hash模式
- hash模式:地址上帶有#號;url地址可以放在任意標簽中打開;可以兼容低版本的瀏覽器
hash模式原理:監聽hashchange事件,可以調用window.location.hash獲取到錨點值,和路由規則進行匹配,匹配到之后將路由規則中定義的組件渲染到頁面
history模式:地址上沒有#號,更加符合URL形式;url地址不能重復打開;
- history模式原理:利用HTML5新提供的history.pushState API 來完成 URL 跳轉而無須重新加載頁面
history模式需要后台進行相關配置:要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面
-
Vuex怎么用,它相對與localstorage有什么優點和缺點
vuex的核心是：state,getter,actions,mutations
-
state用來定義存放公共數據
this.$store.state.msg -
mutations定義方法
this.$store.commit('change','我是被修改的數據') -
getters用於獲取數據 進行一些操作 類似於Vue實例中的過濾器和計算屬性
this.$store.getters.fixmsg -
actionactions和mutations都是定義對數據進行操作的方法,mutations中都是同步方法,mutations中定義異步方法
this.$store.dispatch('asyncchange','我是被異步修改的數據')
區別
localstorage無法實現雙向數據綁定,模型層的數據改變視圖中數據不會發生改變,vuex數據不能持久化,需要結合localstorage使用,比較臃腫,小型項目不建議使用
-
-
axios 是什么？怎么使用？描述使用它實現登錄功能的流程
axios 是請求后台資源的模塊。 npm i axios -S
如果發送的是跨域請求，需在配置文件中 config/index.js 進行配置
-
vue常用的指令
v-text v-bind v-for v-if v-on
-
說一下單向數據流
組件之間的傳值,數據從父級組件傳遞給子組件，只能單向綁定。
父組件向子組件傳值
在父組件中定義數據,通過屬性綁定的形式綁定到子組件上,在子組件中定義props接收傳遞過來的變量
子組件向父組件傳值
在子組件中使用this.$emit觸發一個自定義的方法名,然后傳遞數據第一個參數就是自定義的方法名,第二個參數就是需要傳遞給父組件的數據
this.$emit('func',this.msg)在父組件中使用子組件時,綁定一個事件,事件名稱和子組件觸發的方法名同名
<div id='app'> <son @func = 'getmsg'></son> </div> -
雙向綁定和原理
v-model指令、數據視圖同步更新、使用的是ES5提供的Object.defineProperty()這個方法實現數據劫持
數據如何從模型同步到視圖?當模型中數據發生變化時會觸發Object.defineProperty的set方法,在這個方法內部能夠劫持到數據的改變,然后就可以在該方法內部通知視圖更新
視圖中的數據如何同步到模型中?(v-model指令是怎么實現改變了元素中的數據同步到模型中)監聽表單元素的change事件,在change事件中可以拿到用戶輸入的數據,然后給模型中的數據賦值
瀏覽器
-
SEO優化
詳解：https://segmentfault.com/a/1190000002994538
SEO：搜索引擎優化.
白帽SEO：改良和規范網站設計，使之對搜索引擎和用戶更加友好，是一種搜索引擎推薦的做法。
黑帽SEO：利用或者放大搜索引擎的缺陷，使用不正當競爭獲取更多的訪問量。（例如最近花千骨電視劇熱播，馬上有一些網站使用這個標題標題，但是內容卻是推銷廣告的，給廣大網名造成很大困擾）。
SEO的主要方面：
- 網站標題、關鍵字、描述
- 網站內容優化
- 合理設置Robot.txt文件
- 生成對搜索引擎友好的網站地圖
- 增加外鏈引用
- 其中最重要的是以下2個方面：
- 網站結構布局優化
- 網頁代碼優化
Tips:
- 將重要html代碼放在最前面，廣告等不重要的部分放在整個文檔的最后，然后利用CSS樣式控制廣告div左右浮動。
- 重要內容不要使用js輸出。
- 盡量少使用iframe框架。
- 對於暫時不需要顯示的元素應該使用z-index屬性而不是display:none;這樣的代碼，因為Spider會過濾display屬性為none的內容。
- 盡量精簡代碼。
-
cookies , sessionStorage和localStorage區別
- cookies：數據大小不超過4k，cookies過期之前一直有效，會自動傳遞到服務器
- sessionStorage：存儲大小相對cookies大得多（5M或更大），關閉瀏覽器窗口后自動刪除，僅存本地
- localStorage：存儲大小相對cookies大得多（5M或更大），除非手動刪除，關瀏覽器后不會刪除，僅存本地
-
瀏覽器緩存機制
從緩存位置上來說分為四種，並且各自有優先級，當依次查找緩存且都沒有命中的時候，才會去請求網絡。
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
-
網頁性能
- 減少http請求：圖片地圖，CSS Sprites（精靈圖）。
- 使用CDN：內容發布網絡（CDN）是一組分布在不同地理位置的Web服務器，用於更加有效的向用戶發布內容。
- 添加Expires頭：告訴客戶端可以使用一個組件的當前副本，直到指定時間為止。
- 壓縮組件，代理緩存
- 樣式防頭部，腳本放底部
- 避免CSS表達式
- 使用外部的js和css
- 減少DNS查找
- 精簡javascript
- 避免重定向
- 刪除重復腳本
- 配置ETag
- 使Ajax緩存
-
跨域問題如何解決
- 1、 通過jsonp跨域
- 2、 postMessage跨域
- 3、 跨域資源共享（CORS）
- 普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無須設置，若要帶cookie請求：前后端都需要設置。
- 4、 nginx代理跨域：nginx配置解決iconfont跨域 ，nginx反向代理接口跨域
- 5、 nodejs中間件代理跨域： vue框架的跨域webpack.config.js部分配置
- 6、 WebSocket協議跨域
-
優雅降級和漸進增強
優雅降級：一開始就構建站點的完整功能，然后 針對瀏覽器測試和修復 。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽
漸進增強：一開始就針對低版本瀏覽器進行構建頁面，完成基本功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
項目打包
-
webpack
webpack是一個模塊打包工具，可以使用它管理項目中的模塊依賴，並編譯輸出模塊所需的靜態文件。它可以很好地管理、打包開發中所用到的HTML,CSS,JavaScript和靜態文件（圖片，字體）等，讓開發更高效。對於不同類型的依賴，webpack有對應的模塊加載器，而且會分析模塊間的依賴關系，最后合並生成優化的靜態資源。
寫在最后
如果有什么錯誤,還請各位大佬指出在評論留言,弟弟會更改。