整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
試常見(jiàn)問(wèn)題整理
1.1.1 圖片優(yōu)化
項(xiàng)目中圖片處理相關(guān)的優(yōu)化，項(xiàng)目中用到的優(yōu)化方案，圖片大小達(dá)到多少的時(shí)候選擇處理？
1.首先了解在web開(kāi)發(fā)中常見(jiàn)的圖片有那些格式。
JPG 通常使用的背景圖片，照片圖片，商品圖片等等。這一類型的圖片都屬于大尺寸圖片或較大尺寸圖片一般使用的是這種格式。
PNG 這種格式的又分為兩種 一種PNG-8 一種 PNG-24
PNG-8格式不支持半透明，也是IE6兼容的圖片存儲(chǔ)方式。
PNG-24圖片質(zhì)量要求較高的半透明或全透明背景，保存成PNG-24更合適（為了兼容IE6可以試用js插件pngfix）一般是背景圖標(biāo)中試用的多。
GIF 這種格式顯而易見(jiàn)的是在需要gif動(dòng)畫(huà)的時(shí)候試用了。
2．優(yōu)化方案
l樣式代替圖片
例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對(duì)于那些低端瀏覽器，我們并不會(huì)完全拋棄他們，“漸進(jìn)增強(qiáng)”則是一個(gè)很好的解決方案。
l精靈圖
CSS Sprites，將同類型的圖標(biāo)或按鈕等背景圖合到一張大圖中，減少頁(yè)面請(qǐng)求。
l字體圖標(biāo)
Icon Font，將圖標(biāo)做成字體文件。優(yōu)點(diǎn)是圖標(biāo)支持多個(gè)尺寸，兼容所有瀏覽器，減少頁(yè)面請(qǐng)求等。美中不足的是只支持純色的icon。SVG，對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無(wú)需生成多套圖。現(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用！
lBase64
將圖片轉(zhuǎn)化為base64編碼格式，資源內(nèi)嵌于CSS或HTML中，不必單獨(dú)請(qǐng)求。
Base64格式
data:[][;charset=][;base64],
Base64 在CSS中的使用
.demoImg{background-image:url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....");}
Base64 在HTML中的使用
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />
l圖片響應(yīng)式
通常圖片加載都是可以通過(guò)lazy加載的形式來(lái)的，那么可以在加載的時(shí)候來(lái)判斷屏幕的尺寸來(lái)達(dá)到加載大圖還是小圖的目的來(lái)達(dá)到優(yōu)化。
1.1.2 提高網(wǎng)站的性能
你知道有哪些方法可以提高網(wǎng)站的性能？
我們從兩個(gè)方面來(lái)講：
1.資源加載
CSS頂部, JS底部
CSS JS文件壓縮
盡量使用圖片使用精靈圖，字體圖標(biāo)
圖片加載可通過(guò)懶加載的方式。
總之就是減少資源體積減少資源請(qǐng)求次數(shù)。
2.代碼性能
Css:
使用CSS縮寫(xiě)，減少代碼量；
減少查詢層級(jí)：如.header .logo要好過(guò).header .top .logo；
減少查詢范圍：如.header>li要好過(guò).header li；
避免TAG標(biāo)簽與CLASS或ID并存：如a.top、button#submit；
刪除重復(fù)的CSS；
….
Html:
減少DOM節(jié)點(diǎn)：加速頁(yè)面渲染；
正確的閉合標(biāo)簽：如避免使用<div/>，瀏覽器會(huì)多一個(gè)將它解析成<div\></div\>的過(guò)程；
減少頁(yè)面重繪。比如 給圖片加上正確的寬高值：這可以減少頁(yè)面重繪，
……
Js：
盡量少用全局變量；
使用事件代理綁定事件，如將事件綁定在body上進(jìn)行代理；
避免頻繁操作DOM節(jié)點(diǎn)；
減少對(duì)象查找，如a.b.c.d這種查找方式非常耗性能，盡可能把它定義在變量里；
….
給大家推薦一本書(shū)《高性能javascript》
1.1.3 z-index
說(shuō)說(shuō)z-index的工作原理及適用范圍?
原理：
z-index 這個(gè)屬性控制著元素在z軸上的表現(xiàn)形式。
該屬性僅適用于定位元素。即擁有 relative , absolute , fixed 屬性的position 元素。
堆疊順序（Stacking Level）
堆疊順序是當(dāng)前元素位于 z 軸上的值。數(shù)值越大表明元素的堆疊順序越高，越靠近屏幕。
未定義時(shí) 后來(lái)居上
如果未指定 z-index 的屬性，元素的堆疊順序基于它所在的文檔樹(shù)。默認(rèn)情況下，文檔中后來(lái)聲明的元素具有更高的堆疊順序
當(dāng)父元素的堆疊順序被設(shè)置的時(shí)候，這也意味著，它的子元素的堆疊順序不能高于或低于這一順序 (相對(duì)于父元素的堆疊上下文)。。
適用范圍：
1.網(wǎng)頁(yè)兩側(cè)浮動(dòng)窗口(播放器,置頂按鈕,浮動(dòng)廣告，功能按鈕等)
2.導(dǎo)航欄浮動(dòng)置頂。
3.隱藏div實(shí)現(xiàn)彈窗功能(通過(guò)設(shè)置div的定位和z-index控制div的位置和出現(xiàn)隱藏)
1.1.4 響應(yīng)式開(kāi)發(fā)
能否簡(jiǎn)述一下如何使一套設(shè)計(jì)方案，適應(yīng)不同的分辨率，有哪些方法可以實(shí)現(xiàn)？
流式布局：
使用非固定像素來(lái)定義網(wǎng)頁(yè)內(nèi)容，也就是百分比布局，通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
這樣的布局方式 就是移動(dòng)web開(kāi)發(fā)使用的常用布局方式
這樣的布局可以適配移動(dòng)端不同的分辨率設(shè)備。
響應(yīng)式開(kāi)發(fā)：
那么Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端。
越來(lái)越多的設(shè)計(jì)師也采用了這種設(shè)計(jì)。
?CSS3中的Media Query（媒介查詢）
?通過(guò)查詢screen的寬度來(lái)指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局。
?超小屏幕（移動(dòng)設(shè)備） 768px以下
?小屏設(shè)備 768px-992px
?中等屏幕 992px-1200px
?寬屏設(shè)備 1200px以上
由于響應(yīng)式開(kāi)發(fā)顯得繁瑣些，一般使用第三方響應(yīng)式框架來(lái)完成，比如bootstrap來(lái)完成一部分工作，當(dāng)然也可以自己寫(xiě)響應(yīng)式。
闡述下移動(dòng)web和響應(yīng)式的區(qū)別：
1.1.5 事件封裝和自定義
如何實(shí)現(xiàn)事件的封裝、如何實(shí)現(xiàn)自定義事件？
什么是事件：
JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面。事件是可以被 JavaScript 偵測(cè)到的行為。
網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。比方說(shuō)，我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè) onClick 事件來(lái)觸發(fā)某個(gè)函數(shù)。事件在 HTML 頁(yè)面中定義。
事件的封裝：
functionaddEvent(dom,type,callback){
if(dom.addEventListener){
dom.addEventListener(type,callback,false);
}else if(dom.attachEvent){
dom.attachEvent('on'+type,callback);
}
};
functionremoveEvent(dom,type,callback){
if(dom.removeEventListener){
dom.removeEventListener(type);
}else if(dom.detachEvent){
dom.detachEvent('on'+type);
}
};
事件封裝：
比如zepto中的touch事件都是自定義事件。
1.1.6 漸進(jìn)堅(jiān)強(qiáng)、優(yōu)雅降級(jí)
你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎？
優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)印象中是隨著css3流出來(lái)的一個(gè)概念。由于低級(jí)瀏覽器不支持css3，但css3的效果又太優(yōu)秀不忍放棄，所以在高級(jí)瀏覽中使用css3而低級(jí)瀏覽器只保證最基本的功能。咋一看兩個(gè)概念差不多，都是在關(guān)注不同瀏覽器下的不同體驗(yàn)，關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容，以及這種不同造成的工作流程的差異。
舉個(gè)例子：
a{
display: block;
width: 200px;
height: 100px;
background:aquamarine;
/*我就是要用這個(gè)新css屬性*/
transition: all1s ease0s;
/*可是發(fā)現(xiàn)了一些低版本瀏覽器不支持怎么吧*/
/*往下兼容*/
-webkit-transition:all1s ease0s;
-moz-transition:all1s ease0s;
-o-transition: all1s ease0s;
/*那么通常這樣考慮的和這樣的側(cè)重點(diǎn)出發(fā)的css就是優(yōu)雅降級(jí)*/
}
a:hover{
height: 200px;
}
/*那如果我們的產(chǎn)品要求我們要重低版本的瀏覽器兼容開(kāi)始*/
a{
/*優(yōu)先考慮低版本的*/
-webkit-transition:all1s ease0s;
-moz-transition:all1s ease0s;
-o-transition: all1s ease0s;
/*高版本的就肯定是漸進(jìn)漸強(qiáng)*/
transition: all1s ease0s;
}
“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站。
“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。
1.1.7 客戶端數(shù)據(jù)存儲(chǔ)
請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別？
cookies兼容所有的瀏覽器，Html5提供的storage存儲(chǔ)方式。
Document.cookie
Window.localstorage
Window.sessionstorage
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
1.1.8 重置瀏覽器的CSS默認(rèn)屬性
描述一個(gè)”reset”的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？
因?yàn)闉g覽器的品種很多，每個(gè)瀏覽器的默認(rèn)樣式也是不同的，比如<button>標(biāo)簽，在IE瀏覽器、Firefox瀏覽器以及Safari瀏覽器中的樣式都是不同的，所以，通過(guò)重置button標(biāo)簽的CSS屬性，然后再將它統(tǒng)一定義，就可以產(chǎn)生相同的顯示效果。
你可能會(huì)用Normalize來(lái)代替你的重置樣式文件。它沒(méi)有重置所有的樣式風(fēng)格，但僅提供了一套合理的默認(rèn)樣式值。既能讓眾多瀏覽器達(dá)到一致和合理，但又不擾亂其他的東西（如粗體的標(biāo)題）。
1.1.9 IE和DOM事件流的區(qū)別
首先我們得搞懂 IE和DOM 是指的啥？
這里主要問(wèn)的是 你IE瀏覽器和DOM兼容的瀏覽器也就是非IE瀏覽器或IE的高版本瀏覽器的事件方面的兼容性問(wèn)題。
然后要搞明白的是 什么是事件流
IE5.5順序是div --body--document.
在IE6中div-body--html--document.
mozilla的順序是div--body- -html--document--window.
在IE中只有冒泡事件類型的事件流。
而在DOM兼容的瀏覽器中還有事件捕獲
首先window--document--body--div--click.
然后click--div--body--document--window.
處理函數(shù)的區(qū)別
在IE 中,每個(gè)元素和window對(duì)象都有2個(gè)方法:attachEvent()和detachEvent();attachEvent用來(lái)給一個(gè)事件附加事件處理函數(shù).
dom中對(duì)應(yīng)的方法是addEventListener()和removeEventListener ,這兩個(gè)方法有3個(gè)參數(shù),事件名稱,要分配的函數(shù)和處理函數(shù)是用于冒泡階段還是捕獲階段.如果事件處理函數(shù)是用在捕獲階段,第三個(gè)參數(shù)為true
<div>
<ahref="javascript：;">dddd</a>
</div>
<script>
window.onload=function(){
document.getElementsByTagName('a')[0].addEventListener('click',function(e){
console.log('a');
},true);
/*處理函數(shù)在捕獲階段執(zhí)行*/
document.getElementsByTagName('div')[0].addEventListener('click',function(e){
console.log('div');
/*在捕獲的時(shí)候禁止冒泡*/
e.stopPropagation();
},true);
/*處理函數(shù)在捕獲階段執(zhí)行*/
}
</script>
1.1.10 call和apply的區(qū)別
Javascript的每個(gè)Function對(duì)象中有一個(gè)apply方法：
?
| 1 | function.apply([thisObj[,argArray]]) |
還有一個(gè)類似功能的call方法：
?
| 1 | function.call([thisObj[,arg1[, arg2[, [,.argN]]]]]) |
它們各自的定義：
apply：應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
call：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
它們的共同之處：
都“可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。”
它們的不同之處：
apply：最多只能有兩個(gè)參數(shù)——新this對(duì)象和一個(gè)數(shù)組 argArray。如果給該方法傳遞多個(gè)參數(shù)，則把參數(shù)都寫(xiě)進(jìn)這個(gè)數(shù)組里面，當(dāng)然，即使只有一個(gè)參數(shù)，也要寫(xiě)進(jìn)數(shù)組里面。如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象，那么將導(dǎo)致一個(gè) TypeError。如果沒(méi)有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對(duì)象將被用作 thisObj， 并且無(wú)法被傳遞任何參數(shù)。
call：則是直接的參數(shù)列表，主要用在js對(duì)象各方法互相調(diào)用的時(shí)候，使當(dāng)前this實(shí)例指針保持一致,或在特殊情況下需要改變this指針。如果沒(méi)有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。
更簡(jiǎn)單地說(shuō)，apply和call功能一樣，只是傳入的參數(shù)列表形式不同：如 func.call(func1,var1,var2,var3)對(duì)應(yīng)的apply寫(xiě)法為：func.apply(func1,[var1,var2,var3])
varfunc1=function(a,b,c){
this.name='func1';
//func2.call(this,a,b,c);
//func2.apply(this,arguments);
};
varfunc2=function(){
console.log(this.name);
console.log(arguments);
};
func1(1,2,3);
1.1.11 頁(yè)面緩存
HTTP協(xié)議中，header信息里面，怎么控制頁(yè)面失效時(shí)間？
在服務(wù)器端設(shè)置：這個(gè)是后臺(tái)搭建項(xiàng)目的時(shí)候web服務(wù)器做的工作。
在前端我們?cè)趺慈タ刂颇兀?/p>
網(wǎng)頁(yè)的緩存是由HTTP消息頭中的“Cache-control”來(lái)控制的，常見(jiàn)的取值有private、no-cache、max-age、must-revalidate等，默認(rèn)為private。其作用根據(jù)不同的重新瀏覽方式分為以下幾種情況：
（1） 打開(kāi)新窗口
值為private、no-cache、must-revalidate，那么打開(kāi)新窗口訪問(wèn)時(shí)都會(huì)重新訪問(wèn)服務(wù)器。
而如果指定了max-age值，那么在此值內(nèi)的時(shí)間里就不會(huì)重新訪問(wèn)服務(wù)器，例如：
Cache-control: max-age=5(表示當(dāng)訪問(wèn)此網(wǎng)頁(yè)后的5秒內(nèi)再次訪問(wèn)不會(huì)去服務(wù)器)
（2） 在地址欄回車(chē)
值為private或must-revalidate則只有第一次訪問(wèn)時(shí)會(huì)訪問(wèn)服務(wù)器，以后就不再訪問(wèn)。
值為no-cache，那么每次都會(huì)訪問(wèn)。
值為max-age，則在過(guò)期之前不會(huì)重復(fù)訪問(wèn)。
（3） 按后退按扭
值為private、must-revalidate、max-age，則不會(huì)重訪問(wèn)，
值為no-cache，則每次都重復(fù)訪問(wèn)
（4） 按刷新按扭
無(wú)論為何值，都會(huì)重復(fù)訪問(wèn)
Cache-control值為“no-cache”時(shí)，訪問(wèn)此頁(yè)面不會(huì)在Internet臨時(shí)文章夾留下頁(yè)面?zhèn)浞荨?/p>
另外，通過(guò)指定“Expires”值也會(huì)影響到緩存。例如，指定Expires值為一個(gè)早已過(guò)去的時(shí)間，那么訪問(wèn)此網(wǎng)時(shí)若重復(fù)在地址欄按回車(chē)，那么每次都會(huì)重復(fù)訪問(wèn)： Expires: Fri, 31 Dec 1999 16:00:00 GMT
應(yīng)用
通過(guò)HTTP的META設(shè)置expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
一般都會(huì)被服務(wù)器重置掉。
1.1.12 長(zhǎng)連接和短連接的區(qū)別
HTTP協(xié)議目前常用的有哪幾個(gè)？KEEPALIVE從哪個(gè)版本開(kāi)始出現(xiàn)的？
到現(xiàn)在http出現(xiàn)了 1.0和 1.1版本
Keep-Alive是從1.1默認(rèn)就支持了。
1、什么是Keep-Alive模式？
我們知道HTTP協(xié)議采用“請(qǐng)求-應(yīng)答”模式，當(dāng)使用普通模式，即非KeepAlive模式時(shí)，每個(gè)請(qǐng)求/應(yīng)答客戶和服務(wù)器都要新建一個(gè)連接，完成之后立即斷開(kāi)連接（HTTP協(xié)議為無(wú)連接的協(xié)議）；當(dāng)使用Keep-Alive模式（又稱持久連接、連接重用）時(shí)，Keep-Alive功能使客戶端到服務(wù)器端的連接持續(xù)有效，當(dāng)出現(xiàn)對(duì)服務(wù)器的后繼請(qǐng)求時(shí)，Keep-Alive功能避免了建立或者重新建立連接。
http 1.0中默認(rèn)是關(guān)閉的，需要在http頭加入"Connection: Keep-Alive"，才能啟用Keep-Alive；http 1.1中默認(rèn)啟用Keep-Alive，如果加入"Connection: close "，才關(guān)閉。目前大部分瀏覽器都是用http1.1協(xié)議，也就是說(shuō)默認(rèn)都會(huì)發(fā)起Keep-Alive的連接請(qǐng)求了，所以是否能完成一個(gè)完整的Keep-Alive連接就看服務(wù)器設(shè)置情況。
2、啟用Keep-Alive的優(yōu)點(diǎn)
從上面的分析來(lái)看，啟用Keep-Alive模式肯定更高效，性能更高。因?yàn)楸苊饬私?釋放連接的開(kāi)銷。
1.1.13 從服務(wù)器考慮提高網(wǎng)站性能
業(yè)界常用的優(yōu)化WEB頁(yè)面加載速度的方法（可以分別從頁(yè)面元素展現(xiàn)，請(qǐng)求連接，css,js,服務(wù)器等方面介紹）？
對(duì)于服務(wù)器方面前端能做的工作：
使用CDN加速，使用戶從離自己最近的服務(wù)器下載文件；
減少Cookie的大小，使用無(wú)cookie的域，客戶端請(qǐng)求靜態(tài)文件的時(shí)候，減少 Cookie 的反復(fù)傳輸對(duì)主域名的影響；
為文件頭指定Expires，使內(nèi)容具有緩存性；
前端優(yōu)化:DNS預(yù)解析提升頁(yè)面速度
<link rel="dns-prefetch" />
<link rel="dns-prefetch" />
服務(wù)器端能做的工作：
負(fù)載均衡，分布式存儲(chǔ)，提升服務(wù)器性能等等。。。
1.1.14 列舉常用的web頁(yè)面開(kāi)發(fā)，調(diào)試以及優(yōu)化工具
谷歌瀏覽器，火狐瀏覽器
1.FireBug
2012年以前，火狐貍幾乎是所有前端開(kāi)發(fā)者最喜歡的瀏覽器，基于FireFox的插件FireBug成了Web前端工程師開(kāi)發(fā)調(diào)試網(wǎng)頁(yè)的首選利器。
2.Chrome Developer Tools
自從2011年FireBug的開(kāi)發(fā)者J.Barton跳槽到Google，負(fù)責(zé)開(kāi)發(fā)Chrome Developer Tools后，Chrome Developer Tools就有了本質(zhì)性的變化。于是，Web前端開(kāi)發(fā)工程師最喜歡的瀏覽器又變成了Chrome，Chrome Developer Tools也就順理成章成為開(kāi)發(fā)調(diào)試網(wǎng)頁(yè)的不二利器了。
1.1.15 解釋什么是sql注入，xss漏洞
Sql是數(shù)據(jù)庫(kù)語(yǔ)言。
XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫(xiě)混淆，故將跨站腳本攻擊縮寫(xiě)為XSS。
1.1.16 邏輯題
有1到10w這個(gè)10w個(gè)數(shù)，去除2個(gè)并打亂次序，如何找出那兩個(gè)數(shù)？
1.1.17 對(duì)象屬性
如何獲取對(duì)象a擁有的所有屬性（可枚舉的、不可枚舉的，不包括繼承來(lái)的屬性）?
首先你們要知道什么是 可沒(méi)舉性
可枚舉性（enumerable）用來(lái)控制所描述的屬性，是否將被包括在for...in循環(huán)之中。具體來(lái)說(shuō)，如果一個(gè)屬性的enumerable為false，下面三個(gè)操作不會(huì)取到該屬性。
* for..in循環(huán)
* Object.keys方法
* JSON.stringify方法
至于for...in循環(huán)和Object.keys方法的區(qū)別，在于前者包括對(duì)象繼承自原型對(duì)象的屬性，而后者只包括對(duì)象本身的屬性。如果需要獲取對(duì)象自身的所有屬性，不管enumerable的值，可以使用Object.getOwnPropertyNames方法
Object.getOwnPropertyNames() 方法返回一個(gè)由指定對(duì)象的所有自身屬性的屬性名(包括不可枚舉屬性)組成的數(shù)組。
<script>
/*首先有個(gè)人*/
varPerson=function(){
/*對(duì)象本身?yè)碛械膶傩?/
this.name='小明';
};
Person.prototype={
/*通過(guò)原型繼承的屬性*/
age:10
};
varperson=newPerson();
/*首先我們遍歷下 student的屬性*/
varforin=[];
for(varo inperson){
forin.push(o);
}
console.log(forin);
/*這個(gè)時(shí)候我們發(fā)現(xiàn) for in 的形式拿的是 所有的屬性 包括原型繼承的*/
console.log(Object.keys(person));
/*發(fā)現(xiàn) Object.keys 拿到的是不包含 原型繼承的并且不包含非枚舉屬性*/
console.log('-------------------------------------');
/*什么是屬性枚舉性 enumerable 什么是非枚舉屬性*/
/*怎么定義非枚舉屬性 enumerable*/
Object.defineProperty(person,'sex',{value:'男',enumerable:false});
/*非枚舉屬性有什么特別*/
console.log(person.sex);
person.sex='女';
console.log(person.sex);//說(shuō)明什么？非枚舉屬性不能重新定義值
console.log('-------------------------------------');
/*那么怎么獲取枚舉屬性*/
console.log(Object.keys(person));
/*getOwnPropertyNames 獲取自身的所有屬性不包含原型繼承*/
console.log(Object.getOwnPropertyNames(person));
varfields=Object.getOwnPropertyNames(person);
/* 我們兩個(gè)比價(jià)一下就可以了 getOwnPropertyNames keys */
</script>
1.1.18 Underscore
Underscore 對(duì)哪些 JS 原生對(duì)象進(jìn)行了擴(kuò)展以及提供了哪些好用的函數(shù)方法？
參考 underscore 文檔。
集合相關(guān)的方法
數(shù)組相關(guān)的方法
函數(shù)相關(guān)的
對(duì)象相關(guān)的
工具
1.1.19 Nodejs
(如果會(huì)用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
1.1.20 前端路由
什么是“前端路由”?什么時(shí)候適合使用“前端路由”? “前端路由”有哪些優(yōu)點(diǎn)和缺點(diǎn)?
路由 Router
前端的路由都是通過(guò) hash 來(lái)實(shí)現(xiàn)的，hash 能兼容低版本的瀏覽器。
Web 服務(wù)并不會(huì)解析 hash，也就是說(shuō) # 后的內(nèi)容 Web 服務(wù)都會(huì)自動(dòng)忽略，但是 JavaScript 是可以通過(guò) window.location.hash 讀取到的，讀取到路徑加以解析之后就可以響應(yīng)不同路徑的邏輯處理。
優(yōu)點(diǎn)可以控制 業(yè)務(wù)邏輯 做無(wú)頁(yè)面刷新 體驗(yàn)更
缺點(diǎn) 頁(yè)面不刷的話無(wú)法釋放內(nèi)存，如果過(guò)多的操作會(huì)造成頁(yè)面體驗(yàn)不好。
1.1.21 This
說(shuō)說(shuō)你對(duì)this的理解？
this是一個(gè)關(guān)鍵字
它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用
1.作為純粹的函數(shù)調(diào)用 this指向全局對(duì)象
2.作為對(duì)象的方法調(diào)用 this指向調(diào)用對(duì)象
3.作為構(gòu)造函數(shù)被調(diào)用 this指向新的對(duì)象（new會(huì)改變this的指向）
4.apply調(diào)用 this指向apply方法的第一個(gè)參數(shù)
1.1.22 遞歸
談一下JS中的遞歸函數(shù)，并且用遞歸簡(jiǎn)單實(shí)現(xiàn)階乘？
//遞歸 程序調(diào)用自身的編程技巧稱為遞歸 自己調(diào)用自己
functionfactorial(num) {
return( num <=1 ) ? 1 : num * factorial(num - 1);
}
console.log(factorial(8));
1.1.23 閉包
什么是閉包（closure），為什么要用？
閉包是指在 JavaScript 中，內(nèi)部函數(shù)總是可以訪問(wèn)其所在的外部函數(shù)中聲明的參數(shù)和變量，即使在其外部函數(shù)被返回（壽命終結(jié)）了之后。
1.1.24 異步加載
異步加載的方式？
什么？的異步加載方式我猜是說(shuō)js。
方案一：<script>標(biāo)簽的async="async"屬性（詳細(xì)參見(jiàn)：script標(biāo)簽的async屬性）
HTML5中新增的屬性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，這種方法不能保證腳本按順序執(zhí)行。
方案二：<script>標(biāo)簽的defer="defer"屬性
兼容所有瀏覽器。此外，這種方法可以確保所有設(shè)置defer屬性的腳本按順序執(zhí)行。
動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽
方案四：AJAX eval（使用AJAX得到腳本內(nèi)容，然后通過(guò)eval_r(xmlhttp.responseText)來(lái)運(yùn)行腳本）
兼容所有瀏覽器。
方案五：iframe方式（這里可以參照：iframe異步加載技術(shù)及性能 中關(guān)于Meboo的部分）
兼容所有瀏覽器。
更多前端知識(shí)，請(qǐng)關(guān)注我的頭條號(hào)。
位同學(xué)大家好，開(kāi)始進(jìn)入到本節(jié)課。通過(guò)之前的課程已經(jīng)把浮動(dòng)給徹底的學(xué)完了，很多同學(xué)跟我私信、留言說(shuō)：老師，我已經(jīng)看完了，覺(jué)得好刺激，想要實(shí)戰(zhàn)，想要鍛煉自己，有這樣的感覺(jué)是好的。所以從本期開(kāi)始老師將帶領(lǐng)大家進(jìn)行實(shí)戰(zhàn)，把源碼專區(qū)的界面做出來(lái)，進(jìn)行實(shí)戰(zhàn)挑戰(zhàn)自己。
本期課首先要把導(dǎo)航界面一步步的實(shí)現(xiàn)出來(lái)。首先來(lái)實(shí)現(xiàn)logo的專區(qū)，logo可以打開(kāi)瀏覽器的f12，然后分析一下它。把鼠標(biāo)移動(dòng)上去過(guò)后可以明顯的看見(jiàn)它是一個(gè)mg標(biāo)簽，mg標(biāo)簽是圖片框標(biāo)簽，所以這個(gè)區(qū)域可以用圖片框標(biāo)簽來(lái)實(shí)現(xiàn)。
·首先把圖片進(jìn)行儲(chǔ)存，將它儲(chǔ)存到本地，然后將所儲(chǔ)存的標(biāo)簽放到原本的布局的源碼的列表里面去。可以新建文件夾叫做文件或是im、a、t、e，盡量文件夾的起名都用英文好一點(diǎn)，雖然是用中文編程，但是文件夾可以用英文或者是拼音，覺(jué)得更標(biāo)準(zhǔn)一點(diǎn)。
·然后對(duì)文件進(jìn)行引用，引用之前首先新建一個(gè)篩選器，篩選器可以把它理解為是一個(gè)分組，新建一個(gè)試點(diǎn)器，比如叫做全局文件logo，它是屬于全局文件，新建一個(gè)全局文件的文件夾。
·然后進(jìn)行引用，打開(kāi)文件，找到目錄，選擇圖像文件進(jìn)行引用。引用過(guò)后再來(lái)新建一個(gè)文件夾，這個(gè)文件夾叫做原碼專區(qū)，cs或者是原碼專區(qū)都可以，就叫做原碼專區(qū)。
·然后在原碼專區(qū)里面去新建一個(gè)文件，新建一個(gè)原碼專區(qū)的cs文件，這里點(diǎn)擊lcs，點(diǎn)擊創(chuàng)建。這里創(chuàng)建之前其實(shí)也可以再新建一個(gè)文件夾，這個(gè)文件夾就是cs文件，可以把cs文件放到cs目錄以后，需要加斯cable可以再放到加斯cable的目錄，要把這分目錄的分組做好。
·選擇目錄，將它保存在項(xiàng)目里面的，等一下找到目錄，將它保存項(xiàng)目里面的css文件夾里面，點(diǎn)擊選擇，點(diǎn)擊創(chuàng)建。
·創(chuàng)建過(guò)后打開(kāi)點(diǎn)lcs的文件，將之前所編寫(xiě)這些布局的cs文件拷貝過(guò)去，剪切一下，然后再粘貼過(guò)來(lái)。粘貼過(guò)來(lái)過(guò)后來(lái)進(jìn)行代碼格式化，整理一下，這樣看起來(lái)代碼就非常的舒服了。
·然后把標(biāo)簽、樣式標(biāo)簽就可以刪掉了，這樣原代碼可以很清晰的進(jìn)行觀看，cs可能以后會(huì)寫(xiě)很多cs，原碼主要寫(xiě)cs就寫(xiě)這里就好了，atm就寫(xiě)h n代碼，是不是非常的舒服？
·接下來(lái)還要對(duì)cs進(jìn)行引用，雖然創(chuàng)建了cs，但是cs還沒(méi)有在h s引用一下就好了，cs文件就屬于h m a的文件了。
·首先還對(duì)頁(yè)面進(jìn)行分析，可以看見(jiàn)最基礎(chǔ)布局是可以把最基礎(chǔ)布局先運(yùn)行起來(lái)，最基礎(chǔ)布局是頂部導(dǎo)航已經(jīng)把實(shí)現(xiàn)了，其實(shí)頂部的布局是居中的，內(nèi)容是居中的，是從這個(gè)位置開(kāi)始居中的，所以還要?jiǎng)?chuàng)建一個(gè)居中的盒子在頂部導(dǎo)航里面，都要進(jìn)行居中。
·接下來(lái)來(lái)實(shí)現(xiàn)這一步，在頂部導(dǎo)航區(qū)域里面新建一個(gè)區(qū)塊盒子，盒子可以在頂部導(dǎo)航這里盡量挨著它，再新建一個(gè)類名，比如叫做居中，叫導(dǎo)航頂部，導(dǎo)頂部導(dǎo)航居中盒子，頂部導(dǎo)航集中盒子更好理解一點(diǎn)。
·寬度之前分析過(guò)專區(qū)的寬度是一千一百七十px，就輸一千一百七十px就好了，一千一百七十px高度就不填高度，讓它默認(rèn)去繼承頂部盒子高度。
·改個(gè)背景顏色，方便去查看背景顏色，給它一個(gè)紅色，然后進(jìn)行設(shè)置，類名要記住經(jīng)常性的保存，不保存是不生效的。
·進(jìn)行設(shè)置，點(diǎn)擊運(yùn)行，可以看見(jiàn)運(yùn)行過(guò)后目前為止是沒(méi)有效果的，可以再次打開(kāi)代碼來(lái)看一下，寬度一千一百七十px，背景顏色為紅色，但是沒(méi)有生效，可以給它指定個(gè)高度，指定高度為五十五px，運(yùn)行起來(lái)看一下，有效果，現(xiàn)在是有效果的。
·有效果過(guò)后先讓它進(jìn)行居中，比如背景居中是外邊距，首先是零ps，自動(dòng)就居中了，運(yùn)行起來(lái)是不是居中了？
·然后就可以在盒子里面去寫(xiě)logo圖片了，首先來(lái)分析下logo圖片，用f4，打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊這里，鼠標(biāo)移動(dòng)上去，可以看見(jiàn)圖片的寬度和高度是多少，這里有顯示，圖片下面都有顯示，是八十的寬，三十的高。
·所以這個(gè)時(shí)候可以打出一個(gè)圖片框，在這里打出一個(gè)圖片框，這個(gè)圖片框的圖片地址就是logo，文件logo。
·這個(gè)時(shí)候設(shè)置一下圖片框的寬度和高度，可以這樣寫(xiě)，可以直接點(diǎn)上面盒子名稱，點(diǎn)圖片框，這么寫(xiě)的含義就是指定類名下面的圖片框。這個(gè)方式之前是沒(méi)有學(xué)習(xí)過(guò)，給大家講一下。
·通過(guò)類名，比如指定一個(gè)類名指定的盒子，盒子下面的所有的組件都可以通過(guò)類名，類名點(diǎn)某一個(gè)組件名稱來(lái)進(jìn)行指定，理解吧？比如這里是類名是這個(gè)，頂部導(dǎo)航居中盒子，類名點(diǎn)頂部導(dǎo)航居中盒子，給個(gè)空格，名稱就是組建名，圖片框的名稱，可以設(shè)置它的一些屬性了。
·比如設(shè)它的寬度為八十px，高度三十px，可以運(yùn)行起來(lái)看一下效果，點(diǎn)擊運(yùn)行，是不是有個(gè)圖片框，這就顯示到八十和三十，把紅色刪掉，紅色的背景刪掉，是不是八十、三十，看起來(lái)很舒服。
·接下來(lái)要讓它進(jìn)行居中，既然讓它進(jìn)行居中，其實(shí)也很簡(jiǎn)單，只需要設(shè)置它的外面就好了。首先要進(jìn)行分析，它的高度是三十px，而這個(gè)副組件盒子的高度是五十五px，就是五十五px，要經(jīng)常做計(jì)算，要嚴(yán)格一點(diǎn)來(lái)做計(jì)算，五十五減去三十就等于二十五px，二十五px就可以除以二。
·比如上邊距是十五點(diǎn)，十二點(diǎn)五px，下邊距是十二點(diǎn)五px，所以直接指定一個(gè)外邊距，外邊距第一個(gè)參數(shù)是上下，十二點(diǎn)五px，左右零px，這樣就好了，點(diǎn)擊運(yùn)行，可以看見(jiàn)是不是就居中了。
本節(jié)課就簡(jiǎn)單的先實(shí)現(xiàn)這樣的logo效果，下節(jié)課再來(lái)實(shí)現(xiàn)，比如像這里面的導(dǎo)航的效果，一步步來(lái)實(shí)現(xiàn)。本節(jié)課到此結(jié)束，下節(jié)課再見(jiàn)。
果PHP代碼被錯(cuò)誤地放在了HTML結(jié)構(gòu)之外，或者沒(méi)有正確地包含在PHP標(biāo)簽內(nèi)，它可能會(huì)被直接輸出到頁(yè)面上。可能是在包含或要求其他PHP文件時(shí)路徑錯(cuò)誤，導(dǎo)致文件沒(méi)有被正確包含。而有時(shí)候安裝的插件或父主題中的某些代碼可能與子主題中的代碼沖突導(dǎo)致輸出異常。
雖然這種情況較為罕見(jiàn)，但如果WordPress的核心文件被修改也可能導(dǎo)致此類問(wèn)題。
·確保所有的PHP代碼都正確地包含在標(biāo)簽內(nèi)，檢查是否有多余的PHP標(biāo)簽或未閉合的標(biāo)簽。
·仔細(xì)檢查所有相關(guān)的模板文件，看是否有PHP代碼被錯(cuò)誤地放置。
·檢查是否有文件包含語(yǔ)句指向了不存在的文件或錯(cuò)誤的路徑。
·嘗試暫時(shí)禁用所有插件，然后查看問(wèn)題是否仍然存在，這可以幫助確定問(wèn)題是否由插件引起。
·將WordPress主題切換回默認(rèn)的，以查看問(wèn)題是否由子主題或父主題引起。
·檢查WordPress的錯(cuò)誤日志和PHP的錯(cuò)誤日志，看是否有相關(guān)的錯(cuò)誤信息或警告。
·如果以上步驟都不能解決問(wèn)題，可能需要更深入地審查代碼，檢查是否有任何自定義的函數(shù)或鉤子，可能導(dǎo)致此問(wèn)題。
·如果問(wèn)題依然無(wú)法解決，可以在WordPress的官方支持論壇、Overflow等社區(qū)尋求幫助或者聯(lián)系主題開(kāi)發(fā)者。
·在編輯模板文件時(shí)，始終使用文本編輯器或IDE的語(yǔ)法高亮功能，以幫助識(shí)別未閉合的標(biāo)簽或錯(cuò)誤的代碼結(jié)構(gòu)。
·在進(jìn)行任何重大更改之前備份所有相關(guān)文件，始終確保WordPress插件和主題都更新到最新版本以減少潛在的沖突和錯(cuò)誤。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
