1呢诬、請談?wù)勀銓π阅軆?yōu)化的認(rèn)識永毅？

網(wǎng)頁內(nèi)容

減少http請求次數(shù)

80%的響應(yīng)時(shí)間花在下載網(wǎng)頁內(nèi)容(images, stylesheets, javascripts,scripts, flash等)官边。減少請求次數(shù)是縮短響應(yīng)時(shí)間的關(guān)鍵凤巨！可以通過簡化頁面設(shè)計(jì)來減少請求次數(shù)针炉，但頁面內(nèi)容較多可以采用以下技巧督勺。

圖片顯示效果如左圖

減少DNS查詢次數(shù)

DNS查詢也消耗響應(yīng)時(shí)間渠羞，如果我們的網(wǎng)頁內(nèi)容來自各個(gè)不同的domain (比如嵌入了開放廣告，引用了外部圖片或腳本)智哀，那么客戶端首次解析這些domain也需要消耗一定的時(shí)間次询。DNS查詢結(jié)果緩存在本地系統(tǒng)和瀏覽器中一段時(shí)間，所以DNS查詢一般是對首次訪問響應(yīng)速度有所影響瓷叫。下面是我清空本地dns后訪問博客園主頁dns的查詢請求屯吊。

緩存Ajax

Ajax可以幫助我們異步的下載網(wǎng)頁內(nèi)容，但是有些網(wǎng)頁內(nèi)容即使是異步的摹菠，用戶還是在等待它的返回結(jié)果盒卸，例如ajax的返回是用戶聯(lián)系人的下拉列表。所以我們還是要注意盡量應(yīng)用以下規(guī)則提高ajax的響應(yīng)速度次氨。

延遲加載

這里討論延遲加載需要我們知道我們的網(wǎng)頁最初加載需要的最小內(nèi)容集是什么蔽介。剩下的內(nèi)容就可以推到延遲加載的集合中。

Javascript是典型的可以延遲加載內(nèi)容煮寡。一個(gè)比較激進(jìn)的做法是開發(fā)網(wǎng)頁時(shí)先確保網(wǎng)頁在沒有Javascript的時(shí)候也可以基本工作虹蓄，然后通過延遲加載腳本來完成一些高級的功能。

延遲加載

這里討論延遲加載需要我們知道我們的網(wǎng)頁最初加載需要的最小內(nèi)容集是什么幸撕。剩下的內(nèi)容就可以推到延遲加載的集合中薇组。

Javascript是典型的可以延遲加載內(nèi)容。一個(gè)比較激進(jìn)的做法是開發(fā)網(wǎng)頁時(shí)先確保網(wǎng)頁在沒有Javascript的時(shí)候也可以基本工作坐儿，然后通過延遲加載腳本來完成一些高級的功能律胀。

2宋光、如何避免XSS？

禁止危險(xiǎn)腳本

IE8是第一款內(nèi)置了XSS腳本攔截保護(hù)的瀏覽器炭菌。谷歌的Chrome也會(huì)緊隨其后推出類似功能跃须。這兩款瀏覽器都會(huì)首先查看來自某個(gè)Web服務(wù)器的腳本是否是惡意的——如果是，就攔截它娃兽。在今年4月的黑帽歐洲2010大會(huì)上菇民，研究專家David Lindsay和Eduardo Vela Nava卻演示了一種可以破除這種攔截的辦法，不過谷歌已經(jīng)修復(fù)了Chrome中的這個(gè)漏洞投储。微軟則在今年1月（補(bǔ)丁MS10-002）和3月（MS10-018）也已解決了大部分問題第练，并計(jì)劃在6月修復(fù)第3個(gè)漏洞，所以在你讀到這篇文章的時(shí)候玛荞，破除XSS腳本攔截的問題可能已經(jīng)完全解決了娇掏。

Firefox的用戶則可以利用免費(fèi)的NoScrpit附加組件有選擇地?cái)r截腳本。比如說勋眯，你可以放行一段Flash視頻婴梧，而同時(shí)攔截該網(wǎng)站上的其他腳本組件。IE和Chrome在攔截可疑腳本方面沒有這么細(xì)的粒度——它們是要么全攔截客蹋，要么全不攔截塞蹭。

NoScrpit也有一個(gè)問題，那就是大多數(shù)用戶并不喜歡放行個(gè)別腳本的做法讶坯，因?yàn)檫@樣會(huì)帶來不便番电。不過攔截和放行今后可能會(huì)成為你的第二天性。你還可以對某個(gè)特定網(wǎng)站上的所有腳本進(jìn)行認(rèn)證辆琅，無論是為了一次性訪問還是今后的所有訪問漱办，這樣的認(rèn)證如今在IE 8和chrome中也可以做了，使得防范XSS攻擊實(shí)現(xiàn)更加可能婉烟。

3娩井、平時(shí)如何管理項(xiàng)目？

所謂項(xiàng)目似袁，簡單地說洞辣，就是在既定的資源和要求的約束下，為實(shí)現(xiàn)某種目的而相互聯(lián)系的一次性工作任務(wù)叔营。一般來說屋彪，項(xiàng)目具有如下的基本特征：

1）明確的目標(biāo)其結(jié)果只可能是一種期望的產(chǎn)品，也可能是一種所希望得到的服務(wù)绒尊。

2）獨(dú)特的性質(zhì)每一個(gè)項(xiàng)目都是唯一的。

3）資源成本的約束性每一項(xiàng)目都需要運(yùn)用各種資源來實(shí)施仔粥，而資源是有限的婴谱。

4）項(xiàng)目實(shí)施的一次性項(xiàng)目不能重復(fù)蟹但。

5）項(xiàng)目的不確定性在項(xiàng)目的具體實(shí)施中，外部和內(nèi)部因素總是會(huì)發(fā)生一些變化谭羔，因此項(xiàng)目也會(huì)出現(xiàn)不確定性华糖。

4、請談?wù)勴?xiàng)目的迭代周期瘟裸？

軟件項(xiàng)目開發(fā)客叉，一般都會(huì)采用增量、迭代话告、（或者叫進(jìn)化兼搏、演化、演進(jìn)）的軟件開發(fā)模型沙郭，眾多的軟件開發(fā)模型大多是以經(jīng)典的瀑布模型為基礎(chǔ)進(jìn)行改進(jìn)佛呻、變形，改進(jìn)原則是：增加客戶在整個(gè)項(xiàng)目周期中的參與度病线，降低軟件開發(fā)過程中的風(fēng)險(xiǎn)，增強(qiáng)軟件項(xiàng)目的后期可維護(hù)性送挑。

不同的軟件開發(fā)模型绑莺，迭代周期長短也不相同，有的是一個(gè)月惕耕，有的是兩周赡突，我們一般都是根據(jù)實(shí)際情況確定惭缰，一個(gè)周期完成，將項(xiàng)目成果（可運(yùn)行的軟件）提交給用戶（或進(jìn)行內(nèi)部評審），通過后就進(jìn)入下一個(gè)迭代開發(fā)周期

5怨愤、工作中用過什么構(gòu)建工具撰洗？

答：用過gulp试躏。

第一步：安裝node和npm,搭建node環(huán)境颠蕴。

第二步：安裝gulp

第三步：新建Gulpfile文件犀被，運(yùn)行g(shù)ulp

安裝依賴弱判，提醒下昌腰，如果以上命令提示權(quán)限錯(cuò)誤劫流，需要添加 sudo 再次嘗試。

Gruntfile維護(hù)起來那么困難凰浮，有幾個(gè)原因：

配置和運(yùn)行分離

程序員都知道袜茧，變量的聲明和使用挨在一起啥么，最方便理解和修改疙剑。但Gruntfile里管挟，配置Task和調(diào)用它們的地方離得很遠(yuǎn)，極大地增加了心智負(fù)擔(dān)

每個(gè)插件做的事太多

每個(gè)Task的結(jié)果必須寫到磁盤文件僻孝，另一個(gè)Task再讀穿铆，損害性能倒是小事荞雏，更麻煩的是讓整個(gè)過程變復(fù)雜了凤优。就像一個(gè)個(gè)小作坊，來料加工又返回給客戶蜈彼，這中間的溝通成本筑辨、出錯(cuò)機(jī)會(huì)都大大增加。配置項(xiàng)過多做事多了柳刮，配置項(xiàng)自然也多挖垛。至少輸入和輸出的位置得配吧。每個(gè)插件的配置規(guī)則還不盡相同秉颗。用每個(gè)插件痢毒，都得去學(xué)習(xí)一番。

6蚕甥、談?wù)勀銓δK化的理解哪替？

什么是模塊化？

?? ? ? 模塊化就是為了減少系統(tǒng)耦合度菇怀，提高高內(nèi)聚凭舶，減少資源循環(huán)依賴晌块，增強(qiáng)系統(tǒng)框架設(shè)計(jì)。

?? ? ? 讓開發(fā)者便于維護(hù),同時(shí)也讓邏輯相同的部分可復(fù)用

?? ? ? 模塊化開發(fā)：針對js帅霜、css匆背，以功能或業(yè)務(wù)為單元組織代碼。js方面解決獨(dú)立作用域身冀、依賴管理钝尸、

api暴露、按需加載與執(zhí)行搂根、安全合并等問題珍促，css方面解決依賴管理、組件內(nèi)部樣式管理等問題剩愧。

任何事物都有一個(gè)過程猪叙，那么模塊化的過程通俗點(diǎn)講就是：

模塊化的過程就是：

?? ? ? 1、拆分

將整個(gè)系統(tǒng)按功能,格式,加載順序,繼承關(guān)系分割為一個(gè)一個(gè)單獨(dú)的部分.

注意:拆分的粒度問題,可復(fù)用問題,效率問題.如何這些問題處理的不好仁卷，就有可能出現(xiàn)不想要的后果穴翩。

將功能或特征相似的部分組合在一起,組成一個(gè)資源塊.

將每個(gè)資源塊按找需求,功能場景以及目錄約束放到固定的地方以供調(diào)用.

模塊的歷程

模塊化的發(fā)展也是從草根一步一步走過來的。從最開始到現(xiàn)在成熟方案：

1.? ? ? namespace

2.? ? ? sass,less

3.? ? ? AMD&CMD

4.? ? ? html模版

5.? ? ? grunt,gulp,webpack

6.? ? ? FIS,YUI,KISSY

7五督、平時(shí)都用什么第三方框架藏否？

jQuery、Bootstrap充包、angularjs副签、vue、underscore基矮、seajs淆储、RequireJS…

8、請描述一下cookie家浇，sessionStorage和localStorage的區(qū)別本砰？

答：cookies兼容所有的瀏覽器，Html5提供的storage存儲方式钢悲。

?? ? ? Document.cookie

?? ? ? Window.localstorage

?? ? ? Window.sessionstorage

cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要）点额，即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器莺琳，僅在本地保存还棱。

存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k惭等，同時(shí)因?yàn)槊看蝖ttp請求都會(huì)攜帶cookie珍手，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識。sessionStorage和localStorage 雖然也有存儲大小的限制琳要，但比cookie大得多寡具，可以達(dá)到5M或更大。

數(shù)據(jù)有效期不同稚补，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效童叠，自然也就不可能持久保持；localStorage：始終有效孔厉，窗口或?yàn)g覽器關(guān)閉也一直保存拯钻，因此用作持久數(shù)據(jù)帖努；cookie只在設(shè)置的cookie過期時(shí)間之前一直有效撰豺，即使窗口或?yàn)g覽器關(guān)閉。

作用域不同拼余，sessionStorage不在不同的瀏覽器窗口中共享污桦，即使是同一個(gè)頁面；localStorage 在所有同源窗口中都是共享的匙监；cookie也是在所有同源窗口中都是共享的凡橱。

9、如何使用緩存亭姥？

可以基于http的頭信息控制緩存

ajax請求對早期的IE瀏覽器默認(rèn)就是緩存的稼钩，可以通過時(shí)間戳防止緩存

10、談?wù)勀銓︻A(yù)加載的理解达罗？

Web預(yù)加載指的是在網(wǎng)頁全加載完成之前坝撑，在頁面優(yōu)先顯示一些主要內(nèi)容，以提高用戶體驗(yàn)粮揉。對于一個(gè)較龐大的網(wǎng)站巡李，如果沒有使用預(yù)加載技術(shù)，用戶界面就會(huì)長時(shí)間顯示一片空白扶认，直到資源加載完成侨拦，頁面才會(huì)顯示內(nèi)容。

例如辐宾，可以通過js預(yù)先從服務(wù)加載圖片資源(動(dòng)態(tài)創(chuàng)建Image狱从，設(shè)置src屬性)，只要瀏覽器把圖片下載到本地叠纹，就會(huì)被緩存季研，再次請求相當(dāng)?shù)膕rc時(shí)就會(huì)優(yōu)先尋找瀏覽器緩存，提高訪問速度吊洼。