前段時(shí)間在github上看到一篇沒有答案面試題的文章厦取，小丸子經(jīng)過(guò)多方的看書查資料，總結(jié)了一些問題的答案出來(lái)蘸拔，希望能給大家?guī)?lái)幫助，有問題的地方环葵，歡迎指正歡迎交流调窍，前端面試題會(huì)持續(xù)更新，歡迎關(guān)注张遭。
HTML&CSS
title與h1的區(qū)別邓萨、b與strong的區(qū)別、i與em的區(qū)別菊卷？
title與h1的區(qū)別
定義：title是網(wǎng)站標(biāo)題缔恳，h1是文章主題
作用：title概括網(wǎng)站信息，可以直接告訴搜索引擎和用戶這個(gè)網(wǎng)站是關(guān)于什么主題和內(nèi)容的洁闰，是顯示在網(wǎng)頁(yè)Tab欄里的歉甚；h1突出文章主題，面對(duì)用戶扑眉，更突出其視覺效果纸泄，指向頁(yè)面主體信息，是顯示在網(wǎng)頁(yè)中的腰素。
b與strong的區(qū)別
定義：b(bold)是實(shí)體標(biāo)簽聘裁，用來(lái)給文字加粗，而strong是邏輯標(biāo)簽弓千，作用是加強(qiáng)字符語(yǔ)氣衡便。
區(qū)別：b標(biāo)簽只是加粗的樣式，沒有實(shí)際含義洋访，常用來(lái)表達(dá)無(wú)強(qiáng)調(diào)或著重意味的粗體文字镣陕，比如文章摘要中的關(guān)鍵詞、評(píng)測(cè)文章中的產(chǎn)品名稱姻政、文章的導(dǎo)言呆抑； 而strong表示標(biāo)簽內(nèi)字符重要，用以強(qiáng)調(diào)扶歪，其默認(rèn)格式是加粗理肺，但是可以通過(guò)CSS添加樣式，使用別的樣式強(qiáng)調(diào)善镰。
建議：為了符合CSS3的規(guī)范妹萨，b應(yīng)盡量少用而改用strong
i與em的區(qū)別
定義：i(italic)是實(shí)體標(biāo)簽，用來(lái)使字符傾斜炫欺，而em(emphasis)是邏輯標(biāo)簽乎完，作用是強(qiáng)調(diào)文本內(nèi)容
區(qū)別：i標(biāo)簽只是斜體的樣式，沒有實(shí)際含義品洛，常用來(lái)表達(dá)無(wú)強(qiáng)調(diào)或著重意味的斜體树姨，比如生物學(xué)名摩桶、術(shù)語(yǔ)、外來(lái)語(yǔ)帽揪；而em表示標(biāo)簽內(nèi)字符重要硝清，用以強(qiáng)調(diào)，其默認(rèn)格式是斜體转晰，但是可以通過(guò)CSS添加樣式芦拿。
建議：為了符合CSS3的規(guī)范，i應(yīng)盡量少用而改用em
實(shí)現(xiàn)不使用 border 畫出1px高的線查邢，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果蔗崎。
<div style="height:1px;overflow:hidden;background:red"></div>
請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型），以及適用場(chǎng)景
一個(gè)用于頁(yè)面布局的全新CSS3功能扰藕，F(xiàn)lexbox可以把列表放在同一個(gè)方向（從上到下排列缓苛，從左到右），并讓列表能延伸到占用可用的空間邓深。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向未桥，而Flex布局是基于flex-flow流可以很方便的用來(lái)做局中，能對(duì)不同屏幕大小自適應(yīng)庐完。在布局上有了比以前更加靈活的空間钢属。
Flexbox——快速布局神器
用純CSS創(chuàng)建一個(gè)三角形的原理是什么徘熔？
把上门躯、左、右三條邊隱藏掉（顏色設(shè)為 transparent）
demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一個(gè)滿屏品字布局如何設(shè)計(jì)
簡(jiǎn)單的方式：
上面的div寬100%酷师，
下面的兩個(gè)div分別寬50%讶凉，
然后用float或者inline使其不換行即可
瀏覽器是怎樣解析CSS選擇器的？
樣式系統(tǒng)從關(guān)鍵選擇器開始匹配山孔，然后從右左移查找規(guī)則選擇器的祖先元素懂讯。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過(guò)濾掉一些無(wú)關(guān)的樣式規(guī)則和元素。Firefox 稱這種查找方式為 keyselector(關(guān)鍵字查詢)台颠，所謂的關(guān)鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則褐望。只要選擇器的子樹一直在工作，樣式系統(tǒng)就會(huì)持續(xù)左移绞绒，直到和規(guī)則匹配涨颜，或者是因?yàn)椴黄ヅ涠艞壴撘?guī)則肿轨。
::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用谨读。
單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素坛吁。（偽元素由雙冒號(hào)和偽元素名稱組成）
雙冒號(hào)是在當(dāng)前規(guī)范中引入的劳殖，用于區(qū)分偽類和偽元素铐尚。不過(guò)瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫法，比如:first-line哆姻、:first-letter宣增、:before、:after等矛缨，而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號(hào)的寫法统舀。
想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before劳景，否者誉简，使用::after
在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后盟广。
如果按堆棧視角闷串，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上
如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久筋量，為什么烹吵？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次桨武，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
li與li之間有看不見的空白間隔是什么原因引起的肋拔？有什么解決辦法？
行框的排列會(huì)受到中間空白（回車\空格）等的影響呀酸，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式凉蜂，占據(jù)空間，所以會(huì)有間隔性誉，把字符大小設(shè)為0窿吩，就沒有空格了。
absolute的containing block計(jì)算方式跟正常流有什么不同错览？
無(wú)論屬于哪種纫雁，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
1倾哺、若此元素為 inline 元素轧邪，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；
2羞海、否則,則由這個(gè)祖先元素的 padding box 構(gòu)成忌愚。如果都找不到，則為 initial containing block扣猫。
補(bǔ)充：
① static(默認(rèn)的)/relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分）
②absolute: 向上找最近的定位為absolute/relative的元素
③fixed: 它的containing block一律為根元素(html/body)菜循，根元素也是initial containing block
CSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的？在不同瀏覽器下以后有什么區(qū)別？
當(dāng)在表格元素中使用時(shí)癌幕，此值可刪除一行或一列衙耕，但是它不會(huì)影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用勺远。如果此值被用在其他的元素上橙喘，會(huì)呈現(xiàn)為 “hidden”。
在谷歌瀏覽器里胶逢，使用collapse值和使用hidden值沒有什么區(qū)別厅瞎。
在火狐瀏覽器、Opera和IE11里初坠，使用collapse值的效果就如它的字面意思：table的行會(huì)消失和簸，它的下面一行會(huì)補(bǔ)充它的位置。
position跟display碟刺、margin锁保、collapse、overflow半沽、float這些特性相互疊加之后會(huì)怎么樣爽柒？
1、如果元素的display: none者填，那么position浩村，float不起作用。
2占哟、如果元素?fù)碛衟osition: absolute或position: fixed屬性心墅，那么float不起作用。
3重挑、如果元素的float屬性值不是none嗓化，元素會(huì)脫離文檔流棠涮，根據(jù)float屬性值來(lái)顯示谬哀。
4、設(shè)置了float严肪、position: absolute史煎、display: inline-block屬性的元素，margin不會(huì)和垂直方向上的其他元素的margin發(fā)生外邊距合并驳糯。
5篇梭、設(shè)置了overflow: hidden屬性的元素，不和它的子元素發(fā)生margin合并酝枢。
position跟display恬偷、margin、collapse帘睦、overflow袍患、float這些特性相互疊加之后會(huì)怎么樣坦康？
移動(dòng)端的布局用過(guò)媒體查詢嗎？
通過(guò)媒體查詢可以為不同大小和尺寸的媒體定義不同的css诡延，適合相應(yīng)的設(shè)備顯示滞欠；即響應(yīng)式布局
@media screen and (min-width: 400px) and (max-width: 700px) { … }
上面這段CSS代碼意思是：當(dāng)頁(yè)面小于700px大于400px的時(shí)候執(zhí)行它下面括號(hào)中的CSS.這個(gè)應(yīng)該沒有太大疑問。
CSS優(yōu)化肆良，提高性能的方法有哪些筛璧？
1，首推的是合并css文件惹恃，如果頁(yè)面加載10個(gè)css文件夭谤，每個(gè)文件1k，那么也要比只加載一個(gè)100k的css文件慢巫糙。
2沮翔，減少css嵌套，最好不要套三層以上曲秉。
3采蚀，不要在ID選擇器前面進(jìn)行嵌套，ID本來(lái)就是唯一的而且人家權(quán)值那么大承二，嵌套完全是浪費(fèi)性能榆鼠。
4，建立公共樣式類亥鸠，把相同樣式提取出來(lái)作為公共類使用妆够，比如我們常用的清除浮動(dòng)等。
5负蚊，減少通配符*或者類似[hidden="true"]這類選擇器的使用神妹，挨個(gè)查找所有...這性能能好嗎？當(dāng)然重置樣式這些必須的東西是不能少的家妆。
7鸵荠，巧妙運(yùn)用css的繼承機(jī)制，如果父節(jié)點(diǎn)定義了伤极，子節(jié)點(diǎn)就無(wú)需定義蛹找。
8，拆分出公共css文件哨坪，對(duì)于比較大的項(xiàng)目我們可以將大部分頁(yè)面的公共結(jié)構(gòu)的樣式提取出來(lái)放到單獨(dú)css文件里庸疾，這樣一次下載后就放到緩存里，當(dāng)然這種做法會(huì)增加請(qǐng)求当编，具體做法應(yīng)以實(shí)際情況而定届慈。
9，不用css表達(dá)式，表達(dá)式只是讓你的代碼顯得更加炫酷金顿，但是他對(duì)性能的浪費(fèi)可能是超乎你的想象的词渤。
10，少用css rest串绩，可能你會(huì)覺得重置樣式是規(guī)范缺虐，但是其實(shí)其中有很多的操作是不必要不友好的，有需求有興趣的朋友可以選擇normolize.css
11礁凡，cssSprite高氮，合成所有icon圖片，用寬高加上bacgroud-position的背景圖方式顯現(xiàn)出我們要的icon圖顷牌，這是一種十分實(shí)用的技巧剪芍，極大減少了http請(qǐng)求。
當(dāng)然我們還需要一些善后工作窟蓝，CSS壓縮(這里提供一個(gè)在線壓縮 YUI Compressor 罪裹，當(dāng)然你會(huì)用其他工具來(lái)壓縮是十分好的)，GZIP壓縮运挫，Gzip是一種流行的文件壓縮算法状共，詳細(xì)做法可以谷歌或者百度。
詳細(xì)文章：CSS提高性能的方法
頁(yè)面可見性（Page Visibility）API 可以有哪些用途谁帕？
當(dāng)可見性發(fā)生了改變的時(shí)候峡继，會(huì)觸發(fā) visibilityState事件，通過(guò)給事件注冊(cè)一個(gè)監(jiān)聽函數(shù)匈挖，那么就可以進(jìn)行一些操作：即能夠在頁(yè)面切換到不可見狀態(tài)時(shí)暫停執(zhí)行一些不必要的操作碾牌，以減少資源的浪費(fèi)。
比如當(dāng)前頁(yè)面在播放動(dòng)畫儡循，檢測(cè)到用戶切換了或者最小化了該窗口舶吗，則自動(dòng)停止；
有的程序會(huì)及時(shí)刷新訪問界面（比如籃球比賽時(shí)的比分更新）择膝，若窗口關(guān)閉誓琼，他也會(huì)停止刷新；
元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎调榄？
對(duì)于一些表示豎向距離的屬性踊赠，例如padding-top,padding-bottom,margin-top,margin-bottom等，當(dāng)按百分比設(shè)定它們時(shí)每庆，依據(jù)的是父容器的寬度，而不是高度,請(qǐng)自行驗(yàn)證今穿。
全屏滾動(dòng)的原理是什么缤灵？用到了CSS的哪些屬性？
圖片輪播原理，只不過(guò)圖片寬高100%腮出、超出隱藏帖鸦、調(diào)整比例適應(yīng)屏幕大小。
什么是響應(yīng)式設(shè)計(jì)胚嘲？響應(yīng)式設(shè)計(jì)的基本原理是什么作儿？如何兼容低版本的IE？
響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：集中創(chuàng)建頁(yè)面的圖片排版大小馋劈，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺(tái)攻锰、屏幕尺寸、屏幕定向等）進(jìn)行相對(duì)應(yīng)的布局妓雾，無(wú)論用戶正在使用筆記本還是iPad娶吞，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等械姻，以適應(yīng)不同設(shè)備妒蛇。
響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對(duì)于設(shè)計(jì)的全新思維模式,如我們需要兼容不同屏幕分辨率楷拳、清晰度以及屏幕定向方式豎屏(portrait)绣夺、橫屏(landscape)，怎樣才能做到讓一種設(shè)計(jì)方案滿足所有情況欢揖？
基本原理: 媒體查詢 @media
兼容IE可以使用JS輔助一下來(lái)解決
網(wǎng)頁(yè)驗(yàn)證碼是干嘛的乐导，是為了解決什么安全問題?
區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序〗牵可以防止：惡意破解密碼物臂、刷票、論壇灌水产上；
有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試棵磷；
視差滾動(dòng)效果，如何給每頁(yè)做不同的動(dòng)畫晋涣？
視差滾動(dòng)效果原理解析與功能實(shí)現(xiàn)
如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景仪媒？
可以通過(guò)input : -webkit-autofill來(lái)進(jìn)行修改！
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
你對(duì)line-height是怎樣理解的谢鹊？
css中起高度作用的是height以及l(fā)ine-height了吧算吩！line-height是行高，height就是高佃扼，通常height是對(duì)于某個(gè)框架或者圖片來(lái)說(shuō)偎巢，line-height用于文字，如果一個(gè)標(biāo)簽沒有定義height屬性(包括百分比高度)兼耀，那么其最終表現(xiàn)的高度一定是由line-height起作用压昼，利用行高還可以實(shí)現(xiàn)單行或多行或圖片垂直居中實(shí)現(xiàn)上的應(yīng)用求冷。
CSS行高的一些深入理解和應(yīng)用
設(shè)置元素浮動(dòng)后，該元素的display值是多少?
無(wú)論行內(nèi)元素還是塊元素窍霞，被設(shè)置浮動(dòng)之后匠题，display屬性值都變?yōu)閎lock。
怎么讓Chrome支持小于12px 的文字但金？
1韭山、用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片冷溃，這樣不影響兼容也不影響美觀钱磅。
2、使用12px及12px以上字體大型核小：為了兼容各大主流瀏覽器续搀，建議設(shè)計(jì)美工圖時(shí)候設(shè)置大于或等于12px的字體大小，如果是接單的這個(gè)時(shí)候就需要給客戶講解小于12px瀏覽器不兼容等事宜菠净。
3禁舷、繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容，同時(shí)在設(shè)置小于12px對(duì)象設(shè)置-webkit-text-size-adjust:none毅往，做到最大兼容考慮牵咙。
4、可以使用到 css3里的一個(gè)屬性：transform:scale()
CSS3 transform 屬性介紹
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style>
<p><span>測(cè)試10px</span></p>
讓頁(yè)面的里的字體變清晰攀唯，變細(xì)用CSS怎么做洁桌？
CSS3里面加入了一個(gè)“-webkit-font-smoothing”屬性。這個(gè)屬性可以使頁(yè)面上的字體抗鋸齒,使用后字體看起來(lái)會(huì)更清晰舒服侯嘀。
webkit-font-smoothing:antialiased
font-style屬性可以給它賦值為oblique,oblique是什么意思另凌？
可以理解為Oblique是讓沒有斜體屬性的文字傾斜。
italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字戒幔，而Oblique是傾斜的文字吠谢，對(duì)于沒有斜體的字體應(yīng)該使用Oblique屬性值來(lái)實(shí)現(xiàn)傾斜的文字效果。
position:fixed在安卓下無(wú)效怎么處理诗茎？
在head頭中加入下面的代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
display:inline-block什么時(shí)候會(huì)顯示間隙工坊？（攜程）
移除空格、使用margin負(fù)值敢订、使用font-size:0王污、letter-spacing、word-spacing
有一個(gè)高度自適應(yīng)的div楚午，里面有兩個(gè)div昭齐，一個(gè)的高度是100px，希望另一個(gè)填滿剩下的高度醒叁。
box-sizing方案 和 absolute position方案
有一個(gè)高度自適應(yīng)的div司浪，里面有兩個(gè)div泊业，一個(gè)高度100px把沼，希望另一個(gè)填滿剩下的高度啊易。
png/jpg/gif這些圖片格式解釋一下，分別什么時(shí)候用饮睬，有沒有了解過(guò)webp?
PNG：這是三種中質(zhì)量最好的一種租谈，保存圖像是靜態(tài)圖，可以保留32位色捆愁，也能保留透明與半透明區(qū)域割去，但是很多網(wǎng)站不支持PNG上傳
JPG：這是目前使用最廣泛的格式之一，因?yàn)槠涓哔|(zhì)量的壓縮率導(dǎo)致的圖片大小減少昼丑，而且也支持32位色彩呻逆，因此被廣泛使用，一般情況下菩帝，任何支持圖片的地方都支持jpg咖城，也為靜態(tài)圖，但缺點(diǎn)是不支持透明區(qū)域
GIF：這也是目前使用最廣泛的格式之一呼奢，和jpg相比宜雀，有以下不同：顏色數(shù)只支持256色，支持透明區(qū)域握础，不支持半透明區(qū)域辐董，可以保存為動(dòng)態(tài)圖
webp是谷歌開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3禀综，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間简烘。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測(cè)試并使用WebP格式。
但WebP是一種有損壓縮定枷。相較編碼JPEG文件孤澎，編碼同樣質(zhì)量的WebP文件需要占用更多的計(jì)算資源。
style標(biāo)簽寫在body后與body前有什么區(qū)別依鸥？
寫在head標(biāo)簽中利于瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）
寫在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)html文檔進(jìn)行解析亥至，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染贱迟，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問題）
Javascript
介紹js有哪些內(nèi)置對(duì)象姐扮？
Object 是 JavaScript 中所有對(duì)象的父對(duì)象
數(shù)據(jù)封裝類對(duì)象：Object、Array衣吠、Boolean茶敏、Number 和 String
其他對(duì)象：Function、Arguments缚俏、Math惊搏、Date贮乳、RegExp、Error
說(shuō)出一些寫Javascript的基本規(guī)范
1.不要在同一行聲明多個(gè)變量恬惯。
2.請(qǐng)使用 ===/!==來(lái)比較true/false或者數(shù)值
3.使用對(duì)象字面量替代new Array這種形式
4.不要使用全局函數(shù)向拆。
5.Switch語(yǔ)句必須帶有default分支
6.函數(shù)不應(yīng)該有時(shí)候有返回值，有時(shí)候沒有返回值酪耳。
7.For循環(huán)必須使用大括號(hào)
8.If語(yǔ)句必須使用大括號(hào)
9.for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域浓恳，從而避免作用域污染。
10.命名規(guī)則中構(gòu)造器函數(shù)首字母大寫碗暗，如function Person(){}
11.寫注釋颈将。
Javascript有幾種類型的值？你能畫一下他們的內(nèi)存圖嗎言疗？
數(shù)據(jù)類型分為兩大類：堆和棧
棧：原始數(shù)據(jù)類型（Undefined晴圾，Null，Boolean噪奄，Number死姚、String）
堆：引用數(shù)據(jù)類型（對(duì)象、數(shù)組和函數(shù)）
兩種類型的區(qū)別是：存儲(chǔ)位置不同梗醇；原始數(shù)據(jù)類型直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段知允，占據(jù)空間小、大小固定叙谨，屬于被頻繁使用數(shù)據(jù)温鸽，所以放入棧中存儲(chǔ)；引用數(shù)據(jù)類型存儲(chǔ)在堆(heap)中的對(duì)象,占據(jù)空間大手负、大小不固定,如果存儲(chǔ)在棧中涤垫，將會(huì)影響程序運(yùn)行的性能；
引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針竟终，該指針指向堆中該實(shí)體的起始地址蝠猬。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址统捶，取得地址后從堆中獲得實(shí)體榆芦。
JavaScript創(chuàng)建對(duì)象的幾種方式？
1.對(duì)象字面量的方式p＝｛｝喘鸟；
2.用function來(lái)模擬無(wú)參的構(gòu)造函數(shù)匆绣，再定義屬性；
3.用function模擬構(gòu)造函數(shù)什黑，利用this崎淳；
4.利用工廠方式（內(nèi)置對(duì)象Object）；
5.利用原型方式來(lái)創(chuàng)建愕把；
6.混合方式來(lái)創(chuàng)建拣凹。
JavaScript作用鏈域
當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)森爽，會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈。如果是個(gè)函數(shù)嚣镜，則將其活動(dòng)對(duì)象作為變量對(duì)象爬迟。活動(dòng)對(duì)象在最開始只包含一個(gè)arguments對(duì)象祈惶。而下一個(gè)變量對(duì)象則來(lái)自下一個(gè)包含環(huán)境雕旨。如此一直延續(xù)到全局執(zhí)行環(huán)境扮匠，這種組織形式即為作用域鏈捧请。內(nèi)部函數(shù)可訪問外部變量，外部變量無(wú)法訪問內(nèi)部函數(shù)棒搜。注意：js沒有塊級(jí)作用域疹蛉，若要形成塊級(jí)作用域，可通過(guò)（function（）｛｝）（）力麸；立即執(zhí)行的形式實(shí)現(xiàn)可款。
JavaScript 開發(fā)進(jìn)階：理解 JavaScript 作用域和作用域鏈
["1","2","3"].map（parseint）答案是多少？
[1, NaN, NaN]
parseInt() 函數(shù)可解析一個(gè)字符串克蚂，并返回一個(gè)整數(shù)闺鲸。需要兩個(gè)參數(shù) (val, radix)，
其中 radix 表示解析時(shí)用的基數(shù)埃叭。
map 傳了 3 個(gè) (element, index, array)摸恍，對(duì)應(yīng)的 radix 不合法導(dǎo)致解析失敗。
["1","2","3"].map（parseint）
算出字符串中出現(xiàn)次數(shù)最多的字符是什么赤屋，出現(xiàn)了多少次
var str = "adadfdfseffserfefsefseeffffftsdg";
var maxLength = 0;
var result = "";
while(str != ''){
oldStr = str;
str = str.replace(new RegExp(str.charAt(0),"g"),"");
if( oldStr.length-str.length > maxLength){
maxLength = oldStr.length-str.length;
result = getStr + "=" + maxLength;
}
}
alert(result);
編寫一個(gè)方法 求一個(gè)字符串的字節(jié)長(zhǎng)度
<script language=”javascript”type=”text/javascript”>
new function(s) // s指最后括號(hào)中的參數(shù)
{
if(!arguments.length||!s)
//arguments指最下面括號(hào)中的參數(shù)集立镶， .length指此集合的參數(shù)個(gè)數(shù)
//如果最下面括號(hào)中是("你好abc","哈哈"),
那么arguments={"你好abc","哈哈"}, .length=2
//!s 表示參數(shù)是否非空
return null;
if(""==s)
return 0;
var l=0;
for(var i=0;i<s.length;i++)
//中文的值都是大于255的，所以“你好”為4個(gè)字節(jié)类早，
//可以測(cè)試：alert(s.charCodeAt(i));
{
if(s.charCodeAt(i)>255) l+=2; else l++;
}
alert(l);
}
("hello你好媚媒，我好,大家好！world!");
</script>
JavaScript中有一個(gè)函數(shù)涩僻，執(zhí)行對(duì)象查找的時(shí)候缭召，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是逆日？
Object.hasOwnProperty(proName)
其中參數(shù)object是必選項(xiàng)嵌巷，一個(gè)對(duì)象的實(shí)例。
proName是必選項(xiàng)屏富，一個(gè)屬性名稱的字符串值晴竞。
hasOwnProperty 函數(shù)方法是返回一個(gè)布爾值，指出一個(gè)對(duì)象是否具有指定名稱的屬性狠半。此方法無(wú)法檢查該對(duì)象的原型鏈中是否具有該屬性噩死；該屬性必須是對(duì)象本身的一個(gè)成員颤难。如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數(shù)方法返回 true已维，反之則返回 false行嗤。
頁(yè)面編碼和被請(qǐng)求資源的編碼如果不一致怎么處理？
a.html 的編碼是gbk或gb2312的垛耳。 而引入的js編碼為utf-8的 栅屏，那就需要在引入的時(shí)候加上
<script src="http://www.xxx.com/test.js"charset="utf-8"></script>
同理，如果你的頁(yè)面是utf-8的堂鲜，引入的js是gbk的栈雳，那么就需要加上charset="gbk"
模塊化開發(fā)怎么做？
模塊化就是將js文件按照功能分離缔莲，根據(jù)需求引入不同的文件中哥纫。源于服務(wù)器端。
在ES6中提出用工具babel,webpack打包成瀏覽器識(shí)別的js來(lái)實(shí)現(xiàn)模塊化開發(fā)痴奏，不同的框架和庫(kù)的模塊蛀骇，有很多功能類似比如Node.js中的模塊，Angular.js中的模塊读拆，React.js中的模塊擅憔，只要接口Api可以對(duì)的上，那么也可以通用檐晕。
其他
網(wǎng)站重構(gòu)的理解暑诸？
網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡(jiǎn)化結(jié)構(gòu)棉姐、添加可讀性屠列，而在網(wǎng)站前端保持一致的行為。也就是說(shuō)是在不改變UI的情況下伞矩，對(duì)網(wǎng)站進(jìn)行優(yōu)化笛洛，在擴(kuò)展的同時(shí)保持一致的UI。
對(duì)于傳統(tǒng)的網(wǎng)站來(lái)說(shuō)重構(gòu)通常是：
表格(table)布局改為DIV+CSS
使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS乃坤、如對(duì)IE6有效的)
對(duì)于移動(dòng)平臺(tái)的優(yōu)化
針對(duì)于SEO進(jìn)行優(yōu)化
深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴(yán)格按規(guī)范編寫代碼
設(shè)計(jì)可擴(kuò)展的API
代替舊有的框架苛让、語(yǔ)言(如VB)
增強(qiáng)用戶體驗(yàn)
通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中
壓縮JS、CSS湿诊、image等前端資源(通常是由服務(wù)器來(lái)解決)
程序的性能優(yōu)化(如數(shù)據(jù)讀寫)
采用CDN來(lái)加速資源加載
對(duì)于JS DOM的優(yōu)化
HTTP服務(wù)器的文件緩存
AMD和CMD 規(guī)范的區(qū)別狱杰？
AMD規(guī)范是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出的，而CMD規(guī)范是SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出的厅须。這些規(guī)范的目的都是為了 JavaScript 的模塊化開發(fā)仿畸，特別是在瀏覽器端的。
主要區(qū)別總結(jié)為以下三條
1、CMD推崇依賴就近错沽，而AMD推崇依賴前置
2簿晓、執(zhí)行順序上： CMD是延遲執(zhí)行的，而AMD是提前執(zhí)行的千埃。
3憔儿、api設(shè)計(jì)角度上：AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分放可，推崇職責(zé)單一谒臼。比如 AMD 里，require 分全局 require 和局部 require耀里，都叫 require蜈缤。CMD 里，沒有全局 require备韧，而是根據(jù)模塊系統(tǒng)的完備性劫樟，提供 seajs.use 來(lái)實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。CMD 里织堂，每個(gè) API 都簡(jiǎn)單純粹。
一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成奶陈，這個(gè)過(guò)程中都發(fā)生了什么易阳？（流程說(shuō)的越詳細(xì)越好）
分為4個(gè)步驟：
①當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)，不管這個(gè)URL是Web頁(yè)面的URL還是Web頁(yè)面上每個(gè)資源的URL吃粒，瀏覽器都會(huì)開啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求潦俺，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢。這能使瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址徐勃。
②瀏覽器與遠(yuǎn)程Web服務(wù)器通過(guò)TCP三次握手協(xié)商來(lái)建立一個(gè)TCP/IP連接事示。該握手包括一個(gè)同步報(bào)文，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文僻肖，這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞肖爵。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請(qǐng)求臀脏，最后由客戶端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文劝堪。
③一旦TCP/IP連接建立，瀏覽器會(huì)通過(guò)該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請(qǐng)求揉稚。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源秒啦，值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)。
④此時(shí)搀玖，Web服務(wù)器提供資源服務(wù)余境，客戶端開始下載資源。
請(qǐng)求返回后，便進(jìn)入了我們關(guān)注的前端模塊芳来，簡(jiǎn)單來(lái)說(shuō)暴氏，瀏覽器會(huì)解析HTML生成DOM Tree，其次會(huì)根據(jù)CSS生成CSS Rule Tree绣张，而javascript又可以根據(jù)DOM API操作DOM答渔。
WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式？
JavaScript數(shù)據(jù)推送
Commet：基于HTTP長(zhǎng)連接的服務(wù)器推送技術(shù)
基于WebSocket的推送方案
SSE（Server-Send Event）：服務(wù)器推送數(shù)據(jù)新方式
