HTML
HTML5標(biāo)簽
媒體查詢(xún)head部分寫(xiě)法
Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分邮辽？它們有何意義?
-
<!DOCTYPE>聲明位于文檔中的最前面活喊，處于<html>標(biāo)簽之前玄捕。告知瀏覽器以何種模式來(lái)渲染文檔袍镀。 - 嚴(yán)格模式的排版和JS運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行刘莹。
- 在混雜模式中祝沸，頁(yè)面以寬松的向后兼容的方式顯示使套。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作病往。
- DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)美尸。
你知道多少種Doctype文檔類(lèi)型冤议？
該標(biāo)簽可聲明三種 DTD 類(lèi)型，分別表示嚴(yán)格版本师坎、過(guò)渡版本以及基于框架的 HTML 文檔恕酸。
- HTML 4.01 規(guī)定了三種文檔類(lèi)型：Strict、Transitional 以及 Frameset胯陋。
- XHTML 1.0 規(guī)定了三種 XML 文檔類(lèi)型：Strict蕊温、Transitional 以及 Frameset。
- Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)惶岭，而 Quirks
（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)寿弱。
HTML與XHTML，二者有什么區(qū)別
區(qū)別：
- 所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
- 所有標(biāo)簽的元素和屬性的名字都必須使用小寫(xiě)
- 所有的XML標(biāo)記都必須合理嵌套
- 所有的屬性必須用引號(hào)""括起來(lái)
- 把所有<和&特殊符號(hào)用編碼表示
- 給所有屬性賦一個(gè)值
- 不要在注釋內(nèi)容中使“--”
- 圖片必須有說(shuō)明文字
html5有哪些新特性按灶、移除了那些元素症革？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5鸯旁？
- HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集噪矛，主要是關(guān)于圖像量蕊，位置，存儲(chǔ)艇挨，多任務(wù)等功能的增加残炮。
- 新特性：
- 拖拽釋放(Drag and drop) API
- 語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
- 音頻、視頻API(audio,video)
- 畫(huà)布(Canvas) API
- 地理(Geolocation) API
- 本地離線(xiàn)存儲(chǔ)
- localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)缩滨，瀏覽器關(guān)閉后數(shù)據(jù)不丟失势就；
- sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
- 表單控件，calendar脉漏、date苞冯、time、email侧巨、url舅锄、search
- 新的技術(shù)webworker, websocket, Geolocation
- 移除的元素
- 純表現(xiàn)的元素：basefont，big司忱，center皇忿，font, s，strike坦仍，tt鳍烁，u；
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame繁扎，frameset老翘，noframes；
- 支持HTML5新標(biāo)簽：
- IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽锻离，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后墓怀，還需要添加標(biāo)簽?zāi)J(rèn)的樣式： - 當(dāng)然最好的方式是直接使用成熟的框架汽纠、使用最多的是html5shim框架
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> - IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽锻离，
iframe的優(yōu)缺點(diǎn)？
-
<iframe>優(yōu)點(diǎn)：- 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題
- Security sandbox
- 并行加載腳本
-
<iframe>的缺點(diǎn)：- iframe會(huì)阻塞主頁(yè)面的Onload事件傀履；
- 即使內(nèi)容為空虱朵，加載也需要時(shí)間
- 沒(méi)有語(yǔ)意
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
CSS
css垂直居中方法
自適應(yīng)布局
關(guān)于左右自適應(yīng)的,不低于10種解決方案,還要看dom結(jié)構(gòu)要求是并列還是嵌套,是否允許有父級(jí)元素,是否允許使用CSS3, 是否有背景色,是否要兩列等高,等等
而關(guān)于自適應(yīng)高度的解決方案就略少一些,大致也是靠,CSS3的calc屬性,內(nèi)padding,絕對(duì)定位后拉伸,動(dòng)態(tài)js計(jì)算等等解決 方案,同樣也是要看應(yīng)用場(chǎng)景能用哪個(gè)
移動(dòng)端自適應(yīng)
- rem方法
<script>
document.getElementsByTagName('html')[0].style.fontSize =
window.innerWidth/320 * 100 + 'px';
</script>
Position屬性
- position有五個(gè)屬性： static | relative | absolute | fixed | inherit
- static 和 inherit : 沒(méi)什么值得介紹的钓账。
- relative : 相對(duì)于元素自身的定位碴犬。
- absolute ：相對(duì)于包含塊的定位。
- fixed : 相對(duì)于窗口的定位梆暮。
- 包含塊就是 top | right | bottom | left 參考的元素
- absolute的包含塊指的是：最近的position屬性值不為static的祖先元素
- relative的包含塊指的是：元素自身
- top | right | bottom | left值指的是“定位父元素”border內(nèi)邊到該元素margin外邊的距離服协，“border內(nèi),margin外”。
- postion 與文檔流
- postion : absolute | relative | fixed ： 元素脫離文檔流
- relative : 原本所占的空間仍然占據(jù)文檔流
- absolute和fixed?會(huì)將元素重置為區(qū)塊元素啦粹，relative保持原來(lái)類(lèi)型偿荷。
- absolute和fixed?不能在設(shè)置float窘游，relative可以。
CSS盒模型
- 標(biāo)準(zhǔn)盒模型寬高只計(jì)算content
- IE盒模型寬高是border跳纳、padding和content的和
- 如果在頁(yè)面開(kāi)頭寫(xiě)了
<!doctype...所有瀏覽器都將使用標(biāo)準(zhǔn)盒模型,如果沒(méi)有寫(xiě),那么 在IE下就將會(huì)使用IE盒模型解析盒子,即IE的怪異模式忍饰。 - CSS3 box-sizing
- box-sizing: content-box|border-box|inherit;
- content-box: 標(biāo)準(zhǔn)盒模型
- border-box: IE盒模型
- inherit: 從父元素繼承box-sizing的值
隱藏元素的幾種方法
- display:none
元素在頁(yè)面上將徹底消失，元素本來(lái)占有的空間就會(huì)被其他元素占有寺庄，會(huì)導(dǎo)致瀏覽器的重排和重繪艾蓝。
不會(huì)觸發(fā)其點(diǎn)擊事件。 - visibility:hidden
隱藏對(duì)應(yīng)的元素斗塘，但是在文檔布局中仍保留原來(lái)的空間赢织。只會(huì)導(dǎo)致瀏覽器重繪而不會(huì)重排。不會(huì)觸發(fā)點(diǎn)擊事件逛拱。 - opacity:0
元素隱藏后依舊占據(jù)著空間敌厘，元素只是隱身了，它依舊存在頁(yè)面中朽合【懔剑可以觸發(fā)點(diǎn)擊事件。 - 設(shè)置height曹步，width等盒模型屬性為0
不常用宪彩，但是可以用來(lái)制作頁(yè)面效果，如jquery的slideUp讲婚。事件觸發(fā)開(kāi)padding尿孔、border大小。 - 設(shè)置元素的position與left筹麸，top活合，bottom，right等物赶，將元素移出至屏幕外
- 設(shè)置元素的position與z-index白指，將z-index設(shè)置成盡量小的負(fù)數(shù)
能否相應(yīng)事件看的是鼠標(biāo)是否能接觸到
對(duì)動(dòng)畫(huà)的影響：
- display:none：完全不受transition屬性的影響，元素立即消失酵紫。
- visibility：hidden：元素消失的時(shí)間跟transition屬性設(shè)置的時(shí)間一樣告嘲，但是沒(méi)有動(dòng)畫(huà)效果。
- opacity和height等屬性能夠進(jìn)行正常的動(dòng)畫(huà)效果奖地。
CSS中 link 和@import 的區(qū)別是橄唬？
- link屬于HTML標(biāo)簽，而@import是CSS提供的;
- 頁(yè)面被加載的時(shí)参歹，link會(huì)同時(shí)被加載仰楚，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
- import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無(wú)兼容問(wèn)題;
- link方式的樣式的權(quán)重 高于@import的權(quán)重.
position:absolute和float屬性的異同
- 共同點(diǎn)：
對(duì)內(nèi)聯(lián)元素設(shè)置float和absolute屬性缸血，可以讓元素脫離文檔流蜜氨，并且可以設(shè)置其寬高。 - 不同點(diǎn)：
float仍會(huì)占據(jù)位置捎泻，position會(huì)覆蓋文檔流中的其他元素飒炎。
CSS 選擇符有哪些？
- id選擇器（ # myid）
- 類(lèi)選擇器（.myclassname）
- 標(biāo)簽選擇器（div, h1, p）
- 相鄰選擇器（h1 + p）
- 子選擇器（ul > li）
- 后代選擇器（li a）
- 通配符選擇器（ * ）
- 屬性選擇器（a[rel = "external"]）
- 偽類(lèi)選擇器（a: hover, li:nth-child）
CSS樣式繼承
- 可繼承的樣式：
- font-size
- font-family
- color
- text-indent
- 不可繼承的樣式：
- border
- padding
- margin
- width
- height
CSS優(yōu)先級(jí)
!important > 內(nèi)聯(lián) > id > class > tag
CSS3新增偽類(lèi)舉例
- p:first-of-type 選擇屬于其父元素的首個(gè)
<p>元素的每個(gè)<p>元素笆豁。 - p:last-of-type 選擇屬于其父元素的最后
<p>元素的每個(gè)<p>元素郎汪。 - p:only-of-type 選擇屬于其父元素唯一的
<p>元素的每個(gè)<p>元素。 - p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)
<p>元素闯狱。 - p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)
<p>元素煞赢。 - :enabled :disabled 控制表單控件的禁用狀態(tài)。
- :checked 單選框或復(fù)選框被選中哄孤。
CSS3有哪些新特性
- CSS3實(shí)現(xiàn)圓角（border-radius）照筑，陰影（box-shadow）
- 對(duì)文字加特效（text-shadow、）瘦陈，線(xiàn)性漸變（gradient）凝危，旋轉(zhuǎn)（transform）
- transform:
- rotate(9deg) 旋轉(zhuǎn)
- scale(0.85,0.90) 縮放
- translate(0px,-30px) 定位
- skew(-9deg,0deg) 傾斜
- 增加了更多的CSS選擇器 多背景 rgba
- 在CSS3中唯一引入的偽元素是::selection.
- 媒體查詢(xún)，多欄布局
- border-image
對(duì)BFC規(guī)范的理解晨逝？
BFC蛾默，塊級(jí)格式化上下文（Block Fromatting Context）。
浮動(dòng)元素和絕對(duì)定位元素捉貌，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells,
和 table-captions）支鸡，以及overflow值不為“visiable”的塊級(jí)盒子，
都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）趁窃。
一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的牧挣，盒子里面的子元素的樣式不會(huì)影響到外面的元素。
在同一個(gè)BFC中的兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的margin會(huì)發(fā)生折疊醒陆。
（W3C CSS 2.1 規(guī)范中的一個(gè)概念浸踩，它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局，
以及與其他元素的關(guān)系和相互作用统求。）
一個(gè)HTML元素要?jiǎng)?chuàng)建BFC，則滿(mǎn)足下列的任意一個(gè)或多個(gè)條件即可：
- float的值不是none据块。
- position的值不是static或者relative码邻。
- display的值是inline-block、table-cell另假、flex像屋、table-caption或者inline-flex
- overflow的值不是visible
BFC可以做什么呢？
- 利用BFC避免外邊距折疊
- BFC包含浮動(dòng)
- 使用BFC避免文字環(huán)繞
- 在多列布局中使用BFC
margin折疊
- 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)边篮，折疊結(jié)果是它們兩者之間較大的值己莺。
- 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)奏甫，折疊結(jié)果是兩者絕對(duì)值的較大值。
- 兩個(gè)外邊距一正一負(fù)時(shí)凌受，折疊結(jié)果是兩者的相加的和阵子。
產(chǎn)生折疊的必備條件：margin必須是鄰接的!
解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧
浮動(dòng)元素脫離文檔流胜蛉，不占據(jù)空間挠进。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。
- 使用空標(biāo)簽清除浮動(dòng)誊册。
這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義cssclear:both. 弊端就是增加了無(wú)意義標(biāo)簽领突。 - 使用overflow。
給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6案怯。 - 使用after偽對(duì)象清除浮動(dòng)君旦。
該方法只適用于非IE瀏覽器。具體寫(xiě)法可參照以下示例嘲碱。.clear-fix:after{ content: "."; height: 0; visibility: hidden; clear: both; display: block; } - 浮動(dòng)外部元素
浮動(dòng)元素引起的問(wèn)題和解決辦法金砍？
- 父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素
- 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
- 若非第一個(gè)元素浮動(dòng)悍汛，則該元素之前的元素也需要浮動(dòng)捞魁，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)
JavaScript
JavaScript中的七種原始類(lèi)型
- Undefined
- Null
- Boolean
- Number
- String
- Object
- Symbols(ES6)
創(chuàng)建函數(shù)的幾種方式
- 聲明函數(shù)
function fn1(){}
- 創(chuàng)建匿名函數(shù)表達(dá)式
var fn1=function (){}
// 注意采用這種方法創(chuàng)建的函數(shù)為匿名函數(shù),即沒(méi)有函數(shù)name
getFunctionName(fn1).length;//0
- 創(chuàng)建具名函數(shù)表達(dá)式
var fn1=function xxcanghai(){};
// 具名函數(shù)表達(dá)式的函數(shù)名只能在創(chuàng)建函數(shù)內(nèi)部使用
- Function構(gòu)造函數(shù)
Function("console.log('test')")
// 這種方法創(chuàng)建的是匿名函數(shù)
- 自執(zhí)行函數(shù)
(function(){
alert(1);
})();
(function fn1(){
alert(1);
})();
- 其他創(chuàng)建函數(shù)的方法
eval , setTimeout , setInterval 等非常用方法
函數(shù)作用域鏈
測(cè)試1,對(duì)象內(nèi)部的函數(shù)表達(dá)式:
var o={
fn:function (){
console.log(fn);
}
};
o.fn();// ERROR報(bào)錯(cuò)
測(cè)試2,非對(duì)象內(nèi)部的函數(shù)表達(dá)式:
var fn = function() {
console.log(fn);
};
fn();// 正確
var fnn = function() {
console.log(fnn);
};
fnn();// 正確
兼容IE的獲取函數(shù)name方法
/**
* 獲取指定函數(shù)的函數(shù)名稱(chēng)(用于兼容IE)
* @param {Function} fun 任意函數(shù)
*/
function getFunctionName(fun) {
if (fun.name !== undefined) {
return fun.name;
}
var ret = fun.toString();
ret = ret.substr('function '.length);
ret = ret.substr(0, ret.indexOf('('));
return ret;
}
閉包的原理及應(yīng)用
使用閉包主要是為了設(shè)計(jì)私有的方法和變量。
閉包的優(yōu)點(diǎn)是可以避免全局變量的污染,
缺點(diǎn)是閉包會(huì)常駐內(nèi)存,會(huì)增大內(nèi)存使用量,使用不當(dāng)很容易造成內(nèi)存泄露离咐。
閉包有三個(gè)特性:
- 函數(shù)嵌套函數(shù)
- 函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
- 參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收
題目一
function fun(n,o) {
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?
問(wèn):三行a,b,c的輸出 分別是什么?
答案:
a: undefined,0,0,0
b: undefined,0,1,2
c: undefined,0,1,1
什么情況下會(huì)發(fā)生閉包,為什么需要閉包,什么場(chǎng)景下需要,閉包閉了誰(shuí),怎么釋放被閉包的變量?jī)?nèi)存,閉包的優(yōu)點(diǎn)是什么,缺點(diǎn)是什么等等谱俭。
手寫(xiě)bind函數(shù)
首先會(huì)要求解釋下這個(gè)函數(shù)的作用,以及在什么場(chǎng)景下需要用到它,最后手寫(xiě)一個(gè)Function.bind函數(shù)。 只要掌握核心幾點(diǎn)就沒(méi)問(wèn)題:
- Function.bind返回的也是一個(gè)函數(shù),所以注定發(fā)生了閉包,
- 在返回的這個(gè)函數(shù)中去調(diào)用一個(gè)其他的函數(shù),這其實(shí)本質(zhì)上就是函數(shù)鉤子(HOOK)
關(guān)于在JS里的函數(shù)鉤子,我認(rèn)為只需要維護(hù)以下三點(diǎn)即可:
- 保持函數(shù)的this指向
- 保持函數(shù)的所有參數(shù)都傳遞到目標(biāo)函數(shù)
- 保持函數(shù)的返回值
有了以上這幾點(diǎn),這個(gè)函數(shù)就非常好寫(xiě)了,下面是MSDN上的標(biāo)準(zhǔn)Polyfill:
if(!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if(typeof this !== "function") {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
thrownewTypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments,1),
fToBind = this,
fNOP = function(){},// 用于bind后的函數(shù)用于構(gòu)造函數(shù)時(shí)
fBound = function() {
return fToBind.apply(this instanceof fNOP ?
this : oThis || this, aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
定義提升
- 題目一：
(function(a){
console.log(a);
var a = 10;
function a(){};
}(100));
- 題目二：
function Foo() {
getName = function() {
alert (1);
};
return this;
}
Foo.getName = function() {
alert (2);
};
Foo.prototype.getName = function() {
alert (3);
};
var getName = function () {
alert(4);
};
function getName() {
alert (5);
}
請(qǐng)寫(xiě)出以下輸出結(jié)果:
Foo.getName();2
getName();5
Foo().getName();5
getName();
new Foo.getName();2
new Foo().getName();3
new new Foo().getName();3
答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3
第二問(wèn)：變量提升宵蛀。
第三問(wèn)：函數(shù)中沒(méi)有使用var昆著，因此修改了window對(duì)象。
第五問(wèn)：.的優(yōu)先級(jí)高于new的優(yōu)先級(jí)术陶，因此相當(dāng)于new (Foo.getName)();
第六問(wèn)：括號(hào)優(yōu)先級(jí)高于new凑懂，(new Foo()).getName();
第七問(wèn)：new ((new Foo()).getName)();
new過(guò)程：
- 創(chuàng)建一個(gè)空對(duì)象，其prototype是構(gòu)造函數(shù)的prototype梧宫，將構(gòu)造函數(shù)的this指向該對(duì)象
- 運(yùn)行構(gòu)造函數(shù)中的內(nèi)容
- 返回相應(yīng)值接谨。
構(gòu)造函數(shù)的返回值
- 沒(méi)有返回值則按照其他語(yǔ)言一樣返回實(shí)例化對(duì)象。
- 若有返回值則檢查其返回值是否為引用類(lèi)型塘匣。如果是非引用類(lèi)型,如基本類(lèi)型 (string,number,boolean,null,undefined)則與無(wú)返回值相同,實(shí)際返回其實(shí)例化對(duì)象脓豪。
- 若返回值是引用類(lèi)型,則實(shí)際返回值為這個(gè)引用類(lèi)型。
null和undefined的區(qū)別忌卤？
-
null是一個(gè)表示"無(wú)"的對(duì)象扫夜，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無(wú)"的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN笤闯。 - 當(dāng)聲明的變量還未被初始化時(shí)堕阔，變量的默認(rèn)值為undefined。 null用來(lái)表示尚未存在的對(duì)象颗味，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象超陆。
- undefined表示"缺少值"，就是此處應(yīng)該有一個(gè)值脱衙，但是還沒(méi)有定義侥猬。典型用法是：
- 變量被聲明了，但沒(méi)有賦值時(shí)捐韩，就等于undefined退唠。
- 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒(méi)有提供荤胁，該參數(shù)等于undefined瞧预。
- 對(duì)象沒(méi)有賦值的屬性，該屬性的值為undefined仅政。
- 函數(shù)沒(méi)有返回值時(shí)垢油，默認(rèn)返回undefined。
- null表示"沒(méi)有對(duì)象"圆丹，即該處不應(yīng)該有值滩愁。典型用法是：
- 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象辫封。
- 作為對(duì)象原型鏈的終點(diǎn)硝枉。
this
.call和.apply的區(qū)別
- apply()函數(shù)有兩個(gè)參數(shù)：第一個(gè)參數(shù)是上下文，第二個(gè)參數(shù)是參數(shù)組成的數(shù)組倦微。如果上下文是null妻味，則使用全局對(duì)象代替。例如：
function.apply(this,[1,2,3])
- call()的第一個(gè)參數(shù)是上下文欣福，后續(xù)是實(shí)例傳入的參數(shù)序列责球，例如：
function.call(this,1,2,3);
哪些操作會(huì)造成內(nèi)存泄漏？
setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話(huà)拓劝，會(huì)引發(fā)內(nèi)存泄漏雏逾。
閉包、控制臺(tái)日志郑临、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)校套，就會(huì)產(chǎn)生一個(gè)循環(huán)）
DOM操作
手寫(xiě)事件模型
事件的三個(gè)階段：捕獲、目標(biāo)牧抵、冒泡。（低版本IE不支持捕獲階段，IE<=8）
-
js中事件監(jiān)聽(tīng)方法總共有三種：
- element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
- element.attachEvent(’on’ + type, listener); // IE6~10犀变，IE11不支持
- element[’on’ + type] = function(){} // 所有瀏覽器
-
e的不同
?目標(biāo) IE 其他 ?源 srcElement target 當(dāng)前 this currentTarget
跨瀏覽器事件處理相關(guān)JS代碼
var EventUtil = {
// 事件處理程序,3個(gè)參數(shù)：要操作的元素妹孙，事件名稱(chēng)，事件處理程序函數(shù)
addHandler: function(element, type, handler) {
if(element.addEventListener){
// DOM2級(jí)事件處理程序,false表示事件冒泡階段調(diào)用事件處理程序
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
// IE事件處理程序获枝，記得加“on”
element.attachEvent("on" + type, handler);
}else {
element["on"+type] = handler;
}
},
removeHandler: function(element, type, handler) {
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on"+ type, handler);
}else{
element["on"+type] = null;
}
},
// 獲得event對(duì)象
getEvent: function(event) {
// 主要是為了IE中蠢正，當(dāng)用DOM0級(jí)方法添加事件處理程序時(shí)，
// event對(duì)象是作為windows對(duì)象的一個(gè)屬性存在
return event ? event : window.event;
},
// 獲得事件的目標(biāo)
getTarget: function(event) {
return event.target || event.srcElement;
}省店，
// 取消事件的默認(rèn)行為
preventDefault: function(event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = fasle;// IE
}
}
// 阻止事件冒泡,IE不支持事件捕獲嚣崭，所以只能取消事件冒泡
stopPropagation: function(event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
事件代理/委托
優(yōu)點(diǎn)：
- 可以大量節(jié)省內(nèi)存占用,減少事件注冊(cè)
- 可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無(wú)需再次對(duì)其綁定事件,對(duì)于動(dòng)態(tài)內(nèi)容部分尤為合適
// 事件委托
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "1":
document.title = "I change the document's title";
break;
case "2":
location.;
break;
case "3":
alert('xxx');
break;
}
});
實(shí)現(xiàn)事件模型
即寫(xiě)一個(gè)類(lèi)或是一個(gè)模塊,有兩個(gè)函數(shù),一個(gè)bind一個(gè)trigger,
分別實(shí)現(xiàn)綁定事件和觸發(fā)事件,核心需求就是可以對(duì)某一個(gè)事件名稱(chēng)綁定多個(gè)事件響應(yīng)函數(shù),
然后觸發(fā)這個(gè)事件名稱(chēng)時(shí),依次按 綁定順序觸發(fā)相應(yīng)的響應(yīng)函數(shù)。
大致實(shí)現(xiàn)思路就是創(chuàng)建一個(gè)類(lèi)或是匿名函數(shù),
在bind和trigger函數(shù)外層作用域創(chuàng)建一個(gè)字典對(duì)象,用于存儲(chǔ)注冊(cè) 的事件及響應(yīng)函數(shù)列表,
bind時(shí),如果字典沒(méi)有則創(chuàng)建一個(gè),key是事件名稱(chēng),value是數(shù)組,里面放著當(dāng)前注冊(cè)的響應(yīng)函數(shù),
如果字段中有,那么就直接push到數(shù)組即可懦傍。trigger時(shí)調(diào)出來(lái)依次觸發(fā)事件響應(yīng)函數(shù)即可雹舀。
不過(guò)還有很多細(xì)節(jié),比如觸發(fā)響應(yīng)函數(shù)時(shí)的上下文應(yīng)該是什么,觸發(fā)響應(yīng)函數(shù)的參數(shù)列表應(yīng)該是什么,
如果要求把調(diào)用trigger的參數(shù)列表都傳到響應(yīng)函數(shù)中還要考慮到吧arguments對(duì)象轉(zhuǎn)化為純數(shù)
組才行等等。
還有一些面試官會(huì)問(wèn)到事件如何派發(fā)也就是事件廣播(dispatchEvent)等等,這里不再展開(kāi)粗俱。
JS原生AJAX實(shí)現(xiàn)
// XHR(XMLHttpRequest)1級(jí)方法
/*
* 新建XHR對(duì)象的函數(shù)
* 如果只想支持IE7及更高版本,可以只用原生的XHR實(shí)現(xiàn)
* 即var xhr = new XMLHttpRequest();
*/
function creatXHR() {
if(typeof XMLHttpRequest != "undefined"){
//原生XHR對(duì)象
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp"],
i,
len;
for(i=0, len=versions.length; i < len; i++){
ersions[i];
}
}
try{
new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i];
break;
}catch(ex){
// 處理錯(cuò)誤
}
// MSXML庫(kù)中的ActiveX對(duì)象
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object availabel.")
}
}
function submitData() {
var xhr = creatXHR();//新建XHR對(duì)象
xhr.onreadystatechange = function() {
if(xhr.readystate == 4){
// 前一條件代表接收到全部相應(yīng)數(shù)據(jù),而且可以在客戶(hù)端使用了覽器中緩存的版本
// 后一條件表示請(qǐng)求的資源沒(méi)有修改,可以直接使用瀏
if ((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
alert(xhr.responseText);//處理接收到的響應(yīng)
}else{
alert("Request was unsuccessful: " + xhr.status);//請(qǐng)求不成功
}
}
}
// get方法,名稱(chēng)和值都必須使用encodeURIComponent(),true代表異步發(fā)送請(qǐng)求
xhr.open("get", "example.txt?name1=value1&name2=value2", true);
xhr.send(null);
// post方法
xhr.open("post", "postexample.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//模仿表單提交
var form = document.getElementById("user-info");
xhr.send(serialize(form));
}
// XMLHttpRequest 2級(jí)方法
var xhr = creatXHR();
xhr.onload = function() {
if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);//請(qǐng)求不成功
}
};
xhr.open("get", "altevents.php", true);
xnr.send(null);
怎樣添加说榆、移除、移動(dòng)寸认、復(fù)制签财、創(chuàng)建和查找節(jié)點(diǎn)。
- 創(chuàng)建新節(jié)點(diǎn)
- createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
- createElement() //創(chuàng)建一個(gè)具體的元素
- createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
- 添加偏塞、移除唱蒸、替換、插入
- appendChild()
- removeChild()
- replaceChild()
- insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
- 查找
- getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)
- getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)灸叼，會(huì)得到一個(gè)數(shù)組神汹，其中包括id等于name值的)
- getElementById() //通過(guò)元素Id，唯一性
- querySelector()
documen.write 和 innerHTML的區(qū)別
- document.write只能重繪整個(gè)頁(yè)面
- innerHTML可以重繪頁(yè)面的一部分
瀏覽器相關(guān)
跨域
正統(tǒng)的跨全域的解決方法大致也就三種:
- JSONP
- Access Control
- 服務(wù)器代理
其他
- document.domain+iframe
- window.name
- window.postMessage
JavaScript跨域總結(jié)與解決辦法
跨域-知識(shí)
跨域資源共享的10種方式
詳解js跨域問(wèn)題
JSONP原理
只要你聊到跨域,就必須聊到JSONP,那么就必須要講一下JSONP的實(shí)現(xiàn)原理,以及你在項(xiàng)目中那個(gè)需求使用了JSONP,這里 簡(jiǎn)單講就是HTML里面所有帶src屬性的標(biāo)簽都可以跨域,如iframe,img,script等怜姿。
所以可以把需要跨域的請(qǐng)求改成用script腳本加載即可,服務(wù)器返回執(zhí)行字符串,但是這個(gè)字符串是在window全局作用域下執(zhí)行 的,你需要把他返回到你的代碼的作用域內(nèi),這里就需要臨時(shí)創(chuàng)建一個(gè)全局的回調(diào)函數(shù),并把到傳到后臺(tái),最后再整合實(shí)際要請(qǐng) 求的數(shù)組,返回給前端,讓瀏覽器直接調(diào)用,用回調(diào)的形式回到你的原代碼流程中慎冤。
基本講到這也就沒(méi)什么要再講的了。
將url的查詢(xún)參數(shù)解析成字典對(duì)象
使用正則：
function getQueryObject(url) {
url = url == null ? window.location.href : url;
var search = url.substring(url.lastIndexOf("?") + 1);
var obj = {};
var reg = /([^?&=]+)=([^?&=]*)/g;
search.replace(reg, function(rs,$1,$2){
var name = decodeURIComponent($1);
var val = decodeURIComponent($2);
val = String(val);
obj[name]=val;
return rs;
});
return obj;
}
輸出任意格式的時(shí)間字符串
function formatDate(date, fmt) {
var o = {
"Y+": date.getFullYear(),
"M+": date.getMonth() + 1, // 月份
"d+": date.getDate(), // 日
"h+": date.getHours(), // 小時(shí)
"H+": date.getHours(), // 小時(shí)
"m+": date.getMinutes(), // 分
"s+": date.getSeconds(), // 秒
"q+": Math.floor((date.getMonth() + 3) / 3), // 季度
"S": date.getMilliseconds() // 毫秒
};
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1,
(RegExp.$1.length === 1 || RegExp.$1.length === 4) ?
(o[k]) : ("00" + o[k]).substr(-RegExp.$1.length));
}
}
return fmt;
}
time = formatDate(time, "YY-MM-dd hh:mm:ss");
函數(shù)節(jié)流
- 函數(shù)節(jié)流,就是讓一個(gè)函數(shù)無(wú)法在很短的時(shí)間間隔內(nèi)連續(xù)調(diào)用,只有當(dāng)上一次函數(shù)執(zhí)行后過(guò)了你規(guī)定的時(shí)間間隔,才能進(jìn)行下一次該函數(shù)的調(diào)用
- 原理：使用定時(shí)器沧卢，當(dāng)觸發(fā)一個(gè)事件時(shí),先setTimout讓這個(gè)事件延遲一會(huì)再執(zhí)行,如果在這個(gè)時(shí)間間隔內(nèi)又觸發(fā)了事件,那就clear掉原來(lái)的定時(shí)器,再setTimeout一個(gè)新的定時(shí)器延遲一會(huì)執(zhí)行蚁堤。
- 實(shí)現(xiàn)一:
function throttle(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
}, 100);
}
- 實(shí)現(xiàn)二:
var throttle = function(fn, delay){
var timer = null;
return function(){
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
};
Cookie的優(yōu)點(diǎn)和弊端
- 優(yōu)點(diǎn)
- 通過(guò)良好的編程,控制保存在cookie中的session對(duì)象的大小。
- 通過(guò)加密和安全傳輸技術(shù)(SSL),減少cookie被破解的可能性但狭。
- 只在cookie中存放不敏感數(shù)據(jù),即使被盜也不會(huì)有重大損失披诗。
- 控制cookie的生命期,使之不會(huì)永遠(yuǎn)有效。偷盜者很可能拿到一個(gè)過(guò)期的cookie立磁。
- 缺點(diǎn)
-
Cookie數(shù)量和長(zhǎng)度的限制呈队。
每個(gè)domain最多只能有20條cookie,每個(gè)cookie長(zhǎng)度不能超過(guò)4KB,否則會(huì)被截掉。 - 安全性問(wèn)題唱歧。
如果cookie被人攔截了,那人就可以取得所有的session信息宪摧。
即使加密也與事無(wú)補(bǔ),因?yàn)閿r截者并不需要知道cookie的意義,
他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了粒竖。 - 有些狀態(tài)不可能保存在客戶(hù)端。
例如,為了防止重復(fù)提交表單,我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器几于。
如果我們把這個(gè)計(jì)數(shù)器保存在客戶(hù)端,那么它起不到任何作用蕊苗。
-
瀏覽器本地存儲(chǔ)
在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage沿彭。
在HTML5中提供了localStorage來(lái)取代globalStorage朽砰。
html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage。
- sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(huà)（session）中的數(shù)據(jù)喉刘，
這些數(shù)據(jù)只有在同一個(gè)會(huì)話(huà)中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話(huà)結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀瞧柔。
因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話(huà)級(jí)別的存儲(chǔ)睦裳。 - localStorage用于持久化的本地存儲(chǔ)造锅，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的推沸。
web storage和cookie的區(qū)別
webstroage優(yōu)點(diǎn)：
- Web Storage是為了更大容量存儲(chǔ)設(shè)計(jì)的备绽，Cookie的大小是受限的。
- 每次請(qǐng)求一個(gè)新的頁(yè)面Cookie都會(huì)被發(fā)送過(guò)去鬓催，無(wú)形中浪費(fèi)了帶寬肺素。
- cookie需要指定作用域，不可以跨域調(diào)用宇驾。
- Web Storage擁有setItem,getItem,removeItem,clear等方法倍靡，cookie需要前端開(kāi)發(fā)者自己封裝setCookie，getCookie课舍。
cookie優(yōu)點(diǎn)：
- cookie的作用是與服務(wù)器進(jìn)行交互塌西，作為HTTP規(guī)范的一部分而存在 ，
而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
cookie 和session 的區(qū)別
- cookie數(shù)據(jù)存放在客戶(hù)的瀏覽器上筝尾，session數(shù)據(jù)放在服務(wù)器上捡需。
- cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙筹淫。
- session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上站辉。當(dāng)訪問(wèn)增多，會(huì)比較占用服務(wù)器的性能损姜。
- 單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K饰剥，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
js延遲加載的方式有哪些摧阅？
- defer和async
- 動(dòng)態(tài)創(chuàng)建DOM方式（創(chuàng)建script汰蓉，插入到DOM中，加載完畢后callBack）
- 按需異步載入js
前端性能優(yōu)化
盡量挑會(huì)的說(shuō)棒卷，看yahoo的文章
- 網(wǎng)絡(luò)性能優(yōu)化,加快訪問(wèn)速度,瀏覽器并行加載數(shù)量,怎樣實(shí)現(xiàn)原生JS異步載入,CDN加速的原理,
如何將不同靜態(tài)資源發(fā)布到多個(gè)域名服務(wù)器 上,發(fā)布后這些靜態(tài)字段的url路徑改怎么批量改寫(xiě),
用什么工具進(jìn)行項(xiàng)目打包,css打包后的相對(duì)路徑怎么轉(zhuǎn)換為絕對(duì)路徑,
用什么工具進(jìn)行項(xiàng)目模塊依賴(lài)管理,怎么進(jìn)行cookie優(yōu)化等等,
你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化顾孽？
- 文件合并
- 文件最小化/文件壓縮
- 使用 CDN 托管
- 緩存的使用（多個(gè)域名來(lái)提供緩存）
- 其他
請(qǐng)說(shuō)出三種減少頁(yè)面加載時(shí)間的方法祝钢。
- 優(yōu)化圖片
- 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對(duì)顏色要求不高的地方）
- 優(yōu)化CSS（壓縮合并css若厚，如margin-top,margin-left...)
- 網(wǎng)址后加斜杠（如www.campr.com/目錄太颤，會(huì)判斷這個(gè)“目錄是什么文件類(lèi)型，或者是目錄盹沈。）
- 標(biāo)明高度和寬度（如果瀏覽器沒(méi)有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小吃谣，如果圖片很多乞封，瀏覽器需要不斷地調(diào)整頁(yè)面。這不但影響速度岗憋，也影響瀏覽體驗(yàn)肃晚。
當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無(wú)法顯示仔戈，頁(yè)面上也會(huì)騰出圖片的空位关串，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了监徘，瀏覽體驗(yàn)也更好了晋修。） - 減少http請(qǐng)求（合并文件，合并圖片）凰盔。
你都使用哪些工具來(lái)測(cè)試代碼的性能墓卦？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
什么是 FOUC（無(wú)樣式內(nèi)容閃爍）？你如何來(lái)避免 FOUC户敬？
FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
引用CSS文件的@import是造成這個(gè)問(wèn)題的罪魁禍?zhǔn)茁浼簟E會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件尿庐，因此忠怖，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒(méi)有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速抄瑟，電腦速度都有關(guān)系凡泣。
解決方法簡(jiǎn)單的出奇，只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了锐借。
算法
快速排序
數(shù)組去重
設(shè)計(jì)模式
觀察者模式,職責(zé)鏈模式,工廠模式
計(jì)算機(jī)基礎(chǔ)
線(xiàn)程與進(jìn)程的區(qū)別
- 一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線(xiàn)程.
- 線(xiàn)程的劃分尺度小于進(jìn)程问麸，使得多線(xiàn)程程序的并發(fā)性高。
- 另外钞翔，進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元严卖，而多個(gè)線(xiàn)程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率布轿。
- 線(xiàn)程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的哮笆。每個(gè)獨(dú)立的線(xiàn)程有一個(gè)程序運(yùn)行的入口来颤、順序執(zhí)行序列和程序的出口。但是線(xiàn)程不能夠獨(dú)立執(zhí)行稠肘，必須依存在應(yīng)用程序中福铅，由應(yīng)用程序提供多個(gè)線(xiàn)程執(zhí)行控制。
- 從邏輯角度來(lái)看项阴，多線(xiàn)程的意義在于一個(gè)應(yīng)用程序中滑黔，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒(méi)有將多個(gè)線(xiàn)程看做多個(gè)獨(dú)立的應(yīng)用环揽，來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配略荡。
其他
XML和JSON的區(qū)別？
- 數(shù)據(jù)體積方面歉胶。
JSON相對(duì)于XML來(lái)講汛兜，數(shù)據(jù)的體積小，傳遞的速度更快些通今。 - 數(shù)據(jù)交互方面粥谬。
JSON與JavaScript的交互更加方便，更容易解析處理辫塌，更好的數(shù)據(jù)交互漏策。 - 數(shù)據(jù)描述方面。
JSON對(duì)數(shù)據(jù)的描述性比XML較差璃氢。 - 傳輸速度方面哟玷。
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML。
常見(jiàn)兼容性問(wèn)題一也？
- png24位的圖片在iE6瀏覽器上出現(xiàn)背景巢寡，解決方案是做成PNG8.也可以引用一段腳本處理.
- 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一椰苟。
- IE6雙邊距bug:塊屬性標(biāo)簽float后抑月，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大舆蝴。
- 浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問(wèn)題：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)洁仗，同時(shí)又設(shè)置了margin-left或margin-right层皱，margin值會(huì)加倍。）
這種情況之下IE會(huì)產(chǎn)生20px的距離怎棱，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個(gè)符號(hào)只有ie6會(huì)識(shí)別)#box{ float:left; width:10px; margin:0 0 0 100px;} - Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過(guò)加入 CSS 屬性
-webkit-text-size-adjust: none;解決.
如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中砸捏？
判斷Global和window對(duì)象谬运，如果不為window垦藏，當(dāng)前腳本沒(méi)有運(yùn)行在瀏覽器中
什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)吩谦？
- 漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能膝藕，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)咐扭。
- 優(yōu)雅降級(jí) graceful degradation：一開(kāi)始就構(gòu)建完整的功能芭挽，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
