整理下我在面試的時候所遇到的一些問題,想到哪里就更新到哪里.(ps:不定期更新~)
Q1.請說出css選擇器ul>li+li表示的含義,并寫出選擇前5個li
表示選擇除了第一個li的所有li
ul>li:not(:nth-of-type(n+5))
Q2.請說出html5的常用標簽,分別應用于什么情景
header(頁眉),footer(頁尾),nav(導航),article(獨立的文章內容),section(章節,對頁面的內容進行分塊,模塊),aside(側邊欄,廣告),hgroup(標題或標語的組合),address(地址),menu(菜單)
Q3. 請說下CSS3里transitions, transforms和animation的區別
Transitions作用:平滑的改變CSS的值.無論是點擊事件，焦點事件，還是鼠標hover，只要值改變了，就是平滑的，就是動畫 eg: transition: background-color 0.3s ease;
transitions屬性: transition-property ://指定過渡的性質，比如transition-property:backgrond 就是指backgound參與這個過渡 transition-duration://指定這個過渡的持續時間
transition-delay: //延遲過渡時間
transition-timing-function:*//指定過渡類型，有ease(越來越慢) | linear(勻速運動) | ease-in(先慢后快) | ease-out (先快后慢)| ease-in-out(先慢后快再慢) | cubic-bezier(貝塞爾曲線)
transform 變換，使用過photoshop的人應該知道里面的Ctrl+T自由變換。transform就是指的這個東西，拉伸(skew deg)，壓縮(scale %)，旋轉(rotate deg)，偏移(translate px) eg:.trans_skew { transform: skew(35deg); }
animation 動畫 @keyframes name{不同時間段樣式規則 0-100%} ,animation:名字, 播放時間,效果,開始時間
Q4. 行內元素,塊狀元素,都有哪些?
行內元素:a,abbr,b,br,em,font,i,img,input,s,select,span,strong,sub,sup,tr,u,textarea
塊狀元素:address,div,center,dl,form,h1-h6,hr,menu,ol,p,pre,table,ul
Q5. 說下div的盒模型
標準盒子所占位置：border+padding+margin+width
IE盒子的大小：border+padding+width
IE盒子所占位置：margin+width
標準盒子的大小 ：width
改變盒模型用 box-sizing:border-box/content-box/padding-box
border-box border+padding+width
content-box: width
padding-box:padding+width
Q6. img的格式有哪些,
gif格式 : 支持256種顏色，支持文件背景透明，支持動畫 ；一般文件小下載快
jpg格式 : 不支持文件透明，不支持動畫效果，有損壓縮格式，但圖像顏色品質高（精度高），一般用于數碼相片。位圖（由一個一個像素像素點組成）；一般文件大、下載快
png格式：無損壓縮格式.矢量圖，支持文件背景透明（png8 - 256色,適合單一顏色的logo icon. png24 - 顏色更豐富,色彩更鮮艷）
gif, svg,webp(谷歌開發的一種旨在加快圖片加載速度的圖片格式,體積只有jpeg的2/3)
Q7. 垂直居中都有哪些辦法
- 利用position 和 負邊距(transform:translateY(-50%) )
- display:tabel-cell; vertaical-align:middle
- display:flex; justify-content:center; aligin-items:center
- line-height ,height
Q8, 用css寫出: 2個div并列并且全屏,已知左側固定寬度,右邊自適應寬度,有幾種解決辦法
- 父級display:flex, 子級:flex:200px;flex:1
- 第一個div左側定位,第二個div padding-left:200px;
- float:left; 第二個div float:left; width:calc(100%-200px)
- 最外層div display:table.border-collapse:separate(邊框獨立) 中間層div display: table-row, 最里面的div display:table-cell (讓div以單元格顯示)
Q9. xhtml html 和 xml 的區別
HTML，超文本標記語言，是語法較為松散的、不嚴格的Web語言；
XML，可擴展標記語言，主要用于存儲數據和結構，可擴展；
XHTML，可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更嚴格。
Q10.談下你對表現與數據分離的看法
注意標簽的使用,多用語義化的標簽,結構清晰,表現應該由CSS來控制，結構應該由html來控制,javascript控制數據填充 . 數據的獲取與數據的顯示分離
Q11.談談你是如何對css 和 js 進行優化的
- 減少http請求, 把多個JS請求合并為一個JS請求，把多個CSS請求合并為一個CSS請求。從而減少從客戶端向服務器端的請求數。
- 壓縮組件,不使用@import,會影響文件加載速度
- 將樣式表放在頂部 ,將腳本放在底部,
- 移除重復腳本與css,正確使用css樣式
- 遵守盒模型規則
Q12. href 和 src 的區別
href 表示超文本引用,在link 和 a等元素上使用,是引用.
src 表示 來源地址,在 img,script,iframe 等元素上使用,是引入,
Q13.css都有哪些選擇器?
基礎: (通用選擇器) E(標簽選擇器) .(class) #(id)
組合: E,F //同時匹配 , E F //后代選擇器 , E>F //匹配所有E的子元素F , E+F //匹配所有緊隨E元素之后的同級元素F , E~F //匹配任何在E元素之后的同級F元素
屬性選擇器 :
E[att] //匹配所有具有att屬性的E元素
E[att="val"] //匹配所有具有val屬性的E元素
E[att~="val"] //匹配所有att屬性具有多個空格分隔的值,其中一個值等于val
E[att|="val"] //匹配所有att屬性具有多個連字號分隔符的值,其中一個值以val 開頭的E元素
E[attr^="val"] //以val開頭的元素
E[att$="val"] //以val 結尾的元素
E[att="val"] //包含val的元素
偽類 E:first-child //第一個子元素 , E:focus //獲取當前焦點 , E:lang(c) //匹配屬性等于c的
偽元素: E:first-line //第一行 , E:first-letter //第一個字母 , E:before //之前生成的 , E:after //之后生成的
與用戶界面相關的偽類E:enabled //匹配表單中激活的元素 , E:disabled //匹配禁用的元素 , E:checked //被選中的元素 , E:selection //當前選中的元素
結構偽類 E:root //匹配文檔的根元素 , E:nth-child(n) //第n個 , E:nth-last-child(n) //匹配倒數第n個 , E:nth-of-type(n) //同類標簽 , E:only-child //僅有的一個子元素 , E:empty //不包含任何子元素的元素 , E:only-of-type //使用同一個標簽的唯一一個子元素 , E:not(s) //匹配不符合當前選擇器的任何元素 , E:target //匹配文檔中特定id點擊后的效果
Q14. display:none與visibility:hidden的區別是什么？
display : 隱藏對應的元素但不擠占該元素原來的空間。HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”
visibility: 隱藏對應的元素并且擠占該元素原來的空間。HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。
Q15. sass.less 的區別
動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
變量符不一樣，less是@，而Sass是$;
Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持;
Sass是基于Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器
Q16. js操作數組有哪些方法
方法: 轉換方法: toLocaleString(),toString(),valueOf()
添加 ,arr.push(val) // 將val 追加到數組的最后一項,length自動加1 ,
arr.join(',') //將數組中的各項以逗號拼接成一個字符串返回
arr.unshift(val) // 個或多個新元素添加到數組的開始,數組中的元素自動后移
刪除 : arr.pop() //刪除數組中的最后一項,length自動減1. arr.shift() //移除最前一個元素,病返回該元素的值,
操作數組 arr.concat(ar1,ar2,...arn) //將arr1數組與arr數組合并成一個新的數組返回,原數組不變
位置.indexOf() //從數組的開頭向后查找, lastIndexOf() 從數組的末尾開始向前查找
arr.slice() //基于當前數組中的一或多個項創建的一個新數組(一個參數時,返回從該參數指定位置開始到當前數組末尾的所有項,2個參數時,返回起始和結束位置之間的項,但不包括結束位置的項)
arr.splice() //a 刪除,可以刪除任意數量的項,需指定兩個參數,即(要刪除的第一項的位置,要刪除的項數) b 插入,(起始位置,要刪除的個數,要插入的項) c 替換 (起始位置,要刪除的個數,要插入的數量)
Q17.數組去重怎么寫
var arr=[3,3,3,4,4,true,false,'3', '22'];
function noRepeat(arr){
var resArr = [] ;
var obj = {};
for(var i=0; i< arr.length; i++){
if(!(obj[arr] ){
resArr.push(arr[i]);
obj[ arr[i] + typeof arr[i] ] =1;
}
}
return resArr;
}
var res = noRepeat(arr);
Q18.字符串去掉前后空格怎么寫?
string.prototype.trim = function(){
var reg = /^\s + |\s+S/g;
return this.replace(reg,'');
}
Q19. 一個數組如{abcdefg} 如何變成 {ab_cd_efg}
var str= str+'';
for(var i=1; i<re(str).length,i++){
tmp += re(res)[i-1];
if(i%2 ==0 && i!re(str).length)
{ tmp+='_'}
}
Q20.ajax是什么? ajax的交互模型?
ajax全稱是asychronous javascript and xml，可以說是已有技術的組合，主要用來實現客戶端與服務器端的異步通信效果，實現頁面的局部刷新.
基于web標準（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（DocumentObject Model）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操作；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript將所有的東西綁定在一起。
ajax的交互模型: 同步 阻塞的 瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等著（頁面白屏），直到服務器返回數據，瀏覽器才能顯示 (整個頁面都刷新)
異步 非阻塞的 瀏覽器向服務器請求數據，服務器比較忙，瀏覽器可以自如的干原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，只刷新ajax部分
Q21. ajax跨域的方法
Q23. json 和 jsonp的區別
json 是一種輕量級的數據交互格式,可讀性強
jsonp 是用來解決跨域獲取數據的一種解決方案ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標簽來調用服務器提供的js腳本。
Q24. 什么是閉包,什么是作用域
function(){} 和 fn(), fn函數在執行的時候會產生一個封閉的作用域, 這個封閉的作用域就是閉包.能夠讀取其他函數內部變量的函數。
;(function(){})(); 是閉包的一種應用.好處是避免變量沖突,
缺點:如果閉包中有引用類型的數據被占用,那么閉包無法釋放,占用內存.
作用域:指對某一變量和方法具有訪問權限的代碼空間
Q25.cookie的機制有哪兩種
1關閉瀏覽器消失,2,定時
Q26.session 和 cookie的區別
cookie機制采用的是在客戶端保持狀態的方案， 數據存放在客戶的瀏覽器上, 單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。其他信息如果需要保留，可以放在COOKIE中
session機制采用的是在服務器端保持狀態的方案。數據存放在服務器上, 更安全些,將登陸信息等重要信息存放為SESSION
Q27. 希望獲取到頁面中所有的checkbox,用js怎么實現?
var oput = document.getElementsByTagName('input');
var len = oput.length;
var checkBoxList =[];
for(var i=0; i<len; i++){
if(oput[i].type == 'checkbox'){
checkBoxList.push(oput[i]);
}
}
alert(checkBoxList.length);
Q28. 將字符串"<tr><td>{$id}</td><td>{$name}</td></tr>" 中的{$id}體會成10,{$name}替換成tony,(請使用正則表達式)
'<tr><td>{$id}</td><td>{$name}</td></tr>'.replace(/{$id}/g,'10').replace(/{$name}/g,'tony');
Q29. 原聲js的window.onload 和 jquery的$(document).ready(function(){}) 有什么不同?
window.onload()方法是必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢。
Q30. innerHTML 和 innerText 的區別
ans: innerHTML 設置或獲取位于對象起始和結束標簽內的 HTML
outerHTML 設置或獲取對象及其內容的 HTML 形式
innerText 設置或獲取位于對象起始和結束標簽內的文本
outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本
Q31.輸出今天的日期，以YYYY-MM-DD的方式
function convertDate(date, formate) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return formate
.replace(/Y+/, year)
.replace(/M+/, month)
.replace(/D+/, day)
.replace(/h+/, hour)
.replace(/m+/, minute)
.replace(/s+/, second);
}
調用：convertDate(this.state.time,'yyyy-mm-did')
Q32. 給你一個數組，找出最大值和最小值的位置
Math.max.apply(null,str)
Math.min.apply(null,str)
Q33. js中typeof返回的類型有哪些？
string,null,undefined,object,Boolean, number
Q34. 事件綁定和普通綁定的區別？
普通綁定的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定（addEventListener）方式添加事件可以添加多個。
Q35. 列舉3種強制類型轉換和2種隱式類型轉換
強制類型轉換 : toString() , Number() , JSON.parse() , parseInt()
隱式類型轉換 !!abc , +ture
Q36. 如何阻止事件冒泡和默認事件
e.stopPropagation();
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
Q37. 添加 刪除 替換 插入節點的方法
添加: appendChild 刪除: removeChild 替換:replaceChild 插入:insertBefore
Q38. IE和DOM事件流的區別
IE是冒泡流，DOM事件流是捕獲流,
Q39. ajax請求的時候post和get的區別
1.get請求需注意緩存問題,post請求不需擔心這個問題
2.post請求必須設置Content-Type值為application/x-form-www-urlencoded
3.發送請求時,因為get請求的參數都在url里,所以send函數發送的參數為null,而post請求在使用send方法時,卻需賦予其參數
Q40.如何添加html元素的事件,有幾種方法?
通過HTML元素屬性, 通過對象屬性, 通過W3C監聽方式（標準方式）或者IE專屬的中間模型添加事件
Q41. 寫一個獲取非行間樣式的函數
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
};
};
Q42. js 斐波那契數列實現
function fib(n){
if(n==1||n==2){
return 1;
}
return fbnq(n-1)+fbnq(n-2);
}
Q43. js如何實現面向對象中的繼承實現?
Q44. split（）和join（）的區別
join 將數組中所有原有元素按照某個字符連接成一個字符串。把數組拼接為字符串。
split 將一個字符串按照某個字符拆分為數組。將字符串按某個字符或者其他分割。返回數組
Q45. 解釋jsonp的原理，以及為什么不是真正的ajax
動態創建script標簽,回調函數
ajax是頁面無刷新請求數據操作
Q46. ajax請求時，如何解釋json數據
使用eval parse鑒于安全性考慮,使用parse更靠譜
Q47. prototype 和_proto_的關系
對象有屬性_proto_ , 指向該對象的構造函數的原型對象。 創建這個對象的函數 隱式原型
prototype指向該方法的原型對象。顯式原型
Q48. setTimeout()和setInterval()方法的區別
setTimeout(表達式,延時時間)在執行時,是在載入后延遲指定時間后,去執行一次表達式,記住,次數是一次
setInterval(表達式,交互時間)則不一樣,它從載入后,每隔指定的時間就執行一次表達式
Q49.call和apply的區別
obj.call(this,obj1,obj2,obj3)
obj.apply(this,arguments)
Q50. "==" 和"==="的區別
== 會自動轉換類型, === 不會,恒等
Q51.清除浮動的幾種方式
1.使用空標簽清除浮動,clear:both (能清除任何標簽,增加無意義的標簽)
- 使用after偽元素,(用于非ie)
雜七雜八的問題
Q1.談談你對node.js 的理解
node 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統
Q2.談談你對vue.js 的理解
vue 漸進式JavaScript框架,易用,靈活(簡單小巧的核心,漸進式技術棧,),高效(16kbmin+gzip的運行大小,超快虛擬DOM,最省心的優化)
Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。
Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Q3. 談談你對SEO的理解
Meta標簽優化 主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）
Q4.http常見的狀態碼有那些？分別代表是什么意思？
200 - 請求成功
301 - 資源（網頁等）被永久轉移到其它URL
400 - 客戶端請求有語法錯誤
403 - 服務器收到請求,但是拒絕提供服務
404 - 請求的資源（網頁等）不存在
500 - 內部服務器發生不可預期的錯誤
503 - 服務器當前不能處理客戶端請求
Q5. 模塊開發怎么做?
ans: 模塊化開發模式：瀏覽器端requirejs，seajs；服務器端nodejs；ES6模塊化；fis、webpack等前端整體模塊化解決方案；grunt、gulp等前端工作流的使用
