WEB前端其他面試題

1、請談?wù)勀銓π阅軆?yōu)化的認(rèn)識崩哩?

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

減少http請求次數(shù)

80%的響應(yīng)時間花在下載網(wǎng)頁內(nèi)容(images, stylesheets, javascripts,scripts, flash等)。減少請求次數(shù)是縮短響應(yīng)時間的關(guān)鍵精耐!可以通過簡化頁面設(shè)計來減少請求次數(shù)券坞,但頁面內(nèi)容較多可以采用以下技巧娘扩。

圖片顯示效果如左圖

減少DNS查詢次數(shù)

DNS查詢也消耗響應(yīng)時間,如果我們的網(wǎng)頁內(nèi)容來自各個不同的domain (比如嵌入了開放廣告粤策,引用了外部圖片或腳本)豆巨,那么客戶端首次解析這些domain也需要消耗一定的時間。DNS查詢結(jié)果緩存在本地系統(tǒng)和瀏覽器中一段時間掐场,所以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)容串塑。一個比較激進(jìn)的做法是開發(fā)網(wǎng)頁時先確保網(wǎng)頁在沒有Javascript的時候也可以基本工作,然后通過延遲加載腳本來完成一些高級的功能北苟。

延遲加載

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

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

2、如何避免XSS妆档?

禁止危險腳本

IE8是第一款內(nèi)置了XSS腳本攔截保護(hù)的瀏覽器啸胧。谷歌的Chrome也會緊隨其后推出類似功能入篮。這兩款瀏覽器都會首先查看來自某個Web服務(wù)器的腳本是否是惡意的——如果是苞俘,就攔截它匿沛。在今年4月的黑帽歐洲2010大會上,研究專家David Lindsay和Eduardo Vela Nava卻演示了一種可以破除這種攔截的辦法须板,不過谷歌已經(jīng)修復(fù)了Chrome中的這個漏洞乳绕。微軟則在今年1月(補(bǔ)丁MS10-002)和3月(MS10-018)也已解決了大部分問題,并計劃在6月修復(fù)第3個漏洞逼纸,所以在你讀到這篇文章的時候洋措,破除XSS腳本攔截的問題可能已經(jīng)完全解決了。

Firefox的用戶則可以利用免費(fèi)的NoScrpit附加組件有選擇地攔截腳本杰刽。比如說菠发,你可以放行一段Flash視頻,而同時攔截該網(wǎng)站上的其他腳本組件贺嫂。IE和Chrome在攔截可疑腳本方面沒有這么細(xì)的粒度——它們是要么全攔截滓鸠,要么全不攔截。

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

3、平時如何管理項(xiàng)目驻谆?

所謂項(xiàng)目卵凑,簡單地說,就是在既定的資源和要求的約束下胜臊,為實(shí)現(xiàn)某種目的而相互聯(lián)系的一次性工作任務(wù)勺卢。一般來說,項(xiàng)目具有如下的基本特征:

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

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

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

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

5)項(xiàng)目的不確定性在項(xiàng)目的具體實(shí)施中沥邻,外部和內(nèi)部因素總是會發(fā)生一些變化危虱,因此項(xiàng)目也會出現(xiàn)不確定性。

4唐全、請談?wù)勴?xiàng)目的迭代周期埃跷?

軟件項(xiàng)目開發(fā),一般都會采用增量邮利、迭代弥雹、(或者叫進(jìn)化、演化延届、演進(jìn))的軟件開發(fā)模型剪勿,眾多的軟件開發(fā)模型大多是以經(jīng)典的瀑布模型為基礎(chǔ)進(jìn)行改進(jìn)、變形方庭,改進(jìn)原則是:增加客戶在整個項(xiàng)目周期中的參與度厕吉,降低軟件開發(fā)過程中的風(fēng)險,增強(qiáng)軟件項(xiàng)目的后期可維護(hù)性械念。

不同的軟件開發(fā)模型头朱,迭代周期長短也不相同,有的是一個月龄减,有的是兩周项钮,我們一般都是根據(jù)實(shí)際情況確定,一個周期完成希停,將項(xiàng)目成果(可運(yùn)行的軟件)提交給用戶(或進(jìn)行內(nèi)部評審)烁巫,通過后就進(jìn)入下一個迭代開發(fā)周期

5、工作中用過什么構(gòu)建工具宠能?

答:用過gulp程拭。

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

第二步:安裝gulp

第三步:新建Gulpfile文件棍潘,運(yùn)行g(shù)ulp

安裝依賴恃鞋,提醒下,如果以上命令提示權(quán)限錯誤亦歉,需要添加 sudo 再次嘗試恤浪。

Gruntfile維護(hù)起來那么困難,有幾個原因:

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

程序員都知道肴楷,變量的聲明和使用挨在一起水由,最方便理解和修改。但Gruntfile里赛蔫,配置Task和調(diào)用它們的地方離得很遠(yuǎn)砂客,極大地增加了心智負(fù)擔(dān)

每個插件做的事太多

每個Task的結(jié)果必須寫到磁盤文件泥张,另一個Task再讀,損害性能倒是小事鞠值,更麻煩的是讓整個過程變復(fù)雜了媚创。就像一個個小作坊,來料加工又返回給客戶彤恶,這中間的溝通成本钞钙、出錯機(jī)會都大大增加。配置項(xiàng)過多做事多了声离,配置項(xiàng)自然也多芒炼。至少輸入和輸出的位置得配吧。每個插件的配置規(guī)則還不盡相同术徊。用每個插件本刽,都得去學(xué)習(xí)一番。

6赠涮、談?wù)勀銓δK化的理解盅安?

什么是模塊化?

? 模塊化就是為了減少系統(tǒng)耦合度世囊,提高高內(nèi)聚别瞭,減少資源循環(huán)依賴,增強(qiáng)系統(tǒng)框架設(shè)計株憾。

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

? 模塊化開發(fā):針對js蝙寨、css,以功能或業(yè)務(wù)為單元組織代碼嗤瞎。js方面解決獨(dú)立作用域墙歪、依賴管理、

api暴露贝奇、按需加載與執(zhí)行虹菲、安全合并等問題,css方面解決依賴管理掉瞳、組件內(nèi)部樣式管理等問題毕源。

任何事物都有一個過程,那么模塊化的過程通俗點(diǎn)講就是:

模塊化的過程就是:

? 1陕习、拆分

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

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

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

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

模塊的歷程

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

  1.  namespace
    
  2.  sass,less
    
  3.  AMD&CMD
    
  4.  html模版
    
  5.  grunt,gulp,webpack
    
  6.  FIS,YUI,KISSY
    

7冻璃、平時都用什么第三方框架?

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不會自動把數(shù)據(jù)發(fā)給服務(wù)器分瘾,僅在本地保存。

存儲大小限制也不同吁系,cookie數(shù)據(jù)不能超過4k德召,同時因?yàn)槊看?a target="_blank" rel="nofollow">http請求都會攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù)汽纤,如會話標(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過期時間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉梳星。

作用域不同赞赖,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面冤灾;localStorage 在所有同源窗口中都是共享的薯定;cookie也是在所有同源窗口中都是共享的。

9瞳购、如何使用緩存话侄?

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

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

10、談?wù)勀銓︻A(yù)加載的理解年堆?

Web預(yù)加載指的是在網(wǎng)頁全加載完成之前吞杭,在頁面優(yōu)先顯示一些主要內(nèi)容,以提高用戶體驗(yàn)变丧。對于一個較龐大的網(wǎng)站芽狗,如果沒有使用預(yù)加載技術(shù),用戶界面就會長時間顯示一片空白痒蓬,直到資源加載完成童擎,頁面才會顯示內(nèi)容。

例如攻晒,可以通過js預(yù)先從服務(wù)加載圖片資源(動態(tài)創(chuàng)建Image顾复,設(shè)置src屬性),只要瀏覽器把圖片下載到本地鲁捏,就會被緩存芯砸,再次請求相當(dāng)?shù)膕rc時就會優(yōu)先尋找瀏覽器緩存,提高訪問速度给梅。

11假丧、緩存和預(yù)加載的區(qū)別是什么?

緩存就是把請求過的數(shù)據(jù)緩存起來动羽,下次請求的時候直接使用緩存內(nèi)容包帚,提高響應(yīng)速度

預(yù)加載指的是提前把需要的內(nèi)容加載完成,訪問的時候可以明天提高響應(yīng)效率运吓,比如圖片的預(yù)加載(可以提前加載一定數(shù)量的圖片渴邦,當(dāng)用戶訪問圖片的時候一般只看前幾張,由于是預(yù)加載好的羽德,所以速度比較快)

12几莽、圖片如何壓縮?

可以使用一些在線的圖片壓縮工具

優(yōu)先用 png 而不是 gif

壓縮 png

去掉 jpg 的 metadata

壓縮 gif 動畫

嘗試使用 png8

避免使用 AlphaImageLoader

壓縮動態(tài)生成的圖像

使 favicon 更小 可緩存

使用 CSS Sprites

13宅静、壓縮文件有哪些方法章蚣?

使用Grunt、Sass姨夹、ant壓縮

14纤垂、如何區(qū)分靜態(tài)頁面和動態(tài)頁面?

答:要區(qū)分這兩個磷账,最簡單的方法就是看后綴了峭沦,動態(tài)網(wǎng)頁網(wǎng)址中有兩個標(biāo)志性的符號“?”和“&”(有的可能沒有&),這個問號和&就是用來帶參數(shù)的√釉悖現(xiàn)在幾乎愛所有的網(wǎng)頁都是動態(tài)網(wǎng)頁吼鱼。

15蓬豁、字符串拼接和模板引擎,項(xiàng)目中會如何操作菇肃?模板引擎會不會利于SEO優(yōu)化地粪?

簡單的數(shù)據(jù)渲染,拼接字符串即可琐谤,稍微復(fù)雜的業(yè)務(wù)邏輯使用前端模板引擎蟆技,過于復(fù)雜的頁面基本上使用后臺渲染的方式;模板引擎會影響SEO優(yōu)化斗忌,為了解決這個問題质礼,需要關(guān)注SEO的頁面最好采用后臺渲染的方式。

16织阳、前臺兼容性問題有哪些眶蕉?

答:主要是常用瀏覽的(前端)API差異,渲染差異陈哑,等等

17妻坝、你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化?期待的解決方案包括伸眶?

答:文件合并

文件最小化/文件壓縮

使用CDN托管

緩存的使用

18惊窖、內(nèi)存泄漏怎么理解?

答: IE6時代有bug厘贼,閉包會造成內(nèi)存泄漏界酒,這個現(xiàn)在已經(jīng)無須考慮了。
其次嘴秸,閉包本身不會造成內(nèi)存泄漏毁欣,但閉包過多很容易導(dǎo)致內(nèi)存泄漏。
這句話很矛盾岳掐,技術(shù)上講凭疮,閉包是不會造成內(nèi)存泄漏的,瀏覽器的bug除外串述。但是执解,閉包會造成對象引用的生命周期脫離當(dāng)前函數(shù)的上下文,因此纲酗,如果不仔細(xì)考慮閉包函數(shù)的生命周期衰腌,的確有可能出現(xiàn)意料之外的內(nèi)存泄漏,當(dāng)然觅赊,從嚴(yán)格意義上講右蕊,這是程序員自己的bug,而不是閉包的錯吮螺。

19饶囚、微格式到底是做啥用帕翻?

答:是開放的數(shù)據(jù)格式,面向的是普通用戶萝风,任何用戶可以透過簡單的程序讀取微格式內(nèi)容熊咽。而不是像Flickr、Amazon闹丐、Google等提供特定的面向技術(shù)人員的API(一般基于XML-PRC横殴、REST,相對復(fù)雜)卿拴。RSS具有微格式的部分優(yōu)點(diǎn)衫仑,但限制還是比較多的,比如有限的元數(shù)據(jù)(標(biāo)題堕花、描述文狱、URL等),不能更好地描述語義缘挽,不太容易與已存在的工具結(jié)合等瞄崇。用微格式可以來聚合外部Blog,F(xiàn)lickr壕曼,YouTube苏研,MapQuest,甚至MySpace里的內(nèi)容腮郊。

微格式實(shí)際就是為現(xiàn)有的(X)HTML元素添加元數(shù)據(jù)和其他屬性摹蘑,增強(qiáng)語義。

20轧飞、懶加載是用滾輪判斷高度好還是用插件衅鹿?

使用插件比較好,插件考慮的問題比較全面过咬,僅僅通過滾輪高度判斷很容易導(dǎo)致一些副作用(比如一次性請求多次)

21大渤、如何緩存整個頁面,在沒有網(wǎng)絡(luò)的時候可以來回的跳轉(zhuǎn)掸绞?

使用 HTML5泵三,通過創(chuàng)建 cache manifest 文件,可以輕松地創(chuàng)建 web 應(yīng)用的離線版本集漾。

如需啟用應(yīng)用程序緩存切黔,請?jiān)谖臋n的 <html> 標(biāo)簽中包含 manifest 屬性。

每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存具篇。如果未指定 manifest 屬性纬霞,則頁面不會被緩存(除非在 manifest 文件中直接指定了該頁面)。

manifest 文件的建議的文件擴(kuò)展名是:".appcache"驱显。

manifest 文件需要配置正確的 MIME-type诗芜,即 "text/cache-manifest"瞳抓。必須在 web 服務(wù)器上進(jìn)行配置。

manifest 文件可分為三個部分:

CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接伏恐,且不會被緩存

FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面(比如 404 頁面)

實(shí)例 - 完整的 Manifest 文件

<pre style="box-sizing: border-box; outline: 0px; padding: 8px; margin: 0px 0px 24px; position: relative; white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; background: rgb(238, 238, 238);">CACHE MANIFEST</pre>

22孩哑、CDN是啥?

CDN的全稱:是Content DeliveryNetwork翠桦,即內(nèi)容分發(fā)網(wǎng)絡(luò)横蜒,加速的意思,那么網(wǎng)站CND服務(wù)就是網(wǎng)站加速服務(wù)销凑。

CDN加速原理:CDN加速將網(wǎng)站的內(nèi)容緩存在網(wǎng)絡(luò)邊緣(離用戶接入網(wǎng)絡(luò)最近的地方)丛晌,然后在用戶訪問網(wǎng)站內(nèi)容的時候,通過調(diào)度系統(tǒng)將用戶的請求路由或者引導(dǎo)到離用戶接入網(wǎng)絡(luò)最近或者訪問效果最佳的緩存服務(wù)器上斗幼,有該緩存服務(wù)器為用戶提供內(nèi)容服務(wù)澎蛛;相對于直接訪問源站,這種方式縮短了用戶和內(nèi)容之間的網(wǎng)絡(luò)距離蜕窿,從而達(dá)到加速的效果谋逻。

CDN的特點(diǎn):

1、本地加速 提高了企業(yè)站點(diǎn)(尤其含有大量圖片和靜態(tài)頁面站點(diǎn))的訪問速度桐经,并大大提高以上性質(zhì)站點(diǎn)的穩(wěn)定性

2毁兆、鏡像服務(wù) 消除了不同運(yùn)營商之間互聯(lián)的瓶頸造成的影響,實(shí)現(xiàn)了跨運(yùn)營商的網(wǎng)絡(luò)加速次询,保證不同網(wǎng)絡(luò)中的用戶都能得到良好的訪問質(zhì)量荧恍。

3瓷叫、遠(yuǎn)程加速 遠(yuǎn)程訪問用戶根據(jù)DNS負(fù)載均衡技術(shù) 智能自動選擇Cache服務(wù)器屯吊,選擇最快的Cache服務(wù)器,加快遠(yuǎn)程訪問的速度

4摹菠、帶寬優(yōu)化 自動生成服務(wù)器的遠(yuǎn)程Mirror(鏡像)cache服務(wù)器盒卸,遠(yuǎn)程用戶訪問時從cache服務(wù)器上讀取數(shù)據(jù),減少遠(yuǎn)程訪問的帶寬次氨、分擔(dān)網(wǎng)絡(luò)流量蔽介、減輕原站點(diǎn)WEB服務(wù)器負(fù)載等功能。

5煮寡、集群抗攻擊 廣泛分布的CDN節(jié)點(diǎn)加上節(jié)點(diǎn)之間的智能冗于機(jī)制虹蓄,可以有效地預(yù)防黑客入侵以及降低各種D.D.o.S攻擊對網(wǎng)站的影響,同時保證較好的服務(wù)質(zhì)量幸撕。

23薇组、瀏覽器一次可以從一個域名下請求多少資源?

瀏覽器的并發(fā)請求數(shù)目限制是針對同一域名的坐儿,同一時間針對同一域名下的請求有一定數(shù)量限制律胀,不同瀏覽器這個限制的數(shù)目不一樣宋光,超過限制數(shù)目的請求會被阻塞;

目前的話炭菌,所有瀏覽器的并發(fā)數(shù)目一般限制在10以內(nèi)罪佳。

24、什么是垃圾回收機(jī)制(GC)黑低?

早期的計算機(jī)語言赘艳,比如C和C++,需要開發(fā)者手動的來跟蹤內(nèi)存克握,這種機(jī)制的優(yōu)點(diǎn)是內(nèi)存分配和釋放的效率很高第练。但是它也有著它的缺點(diǎn),程序員很容易不小心忘記釋放內(nèi)存玛荞,從而造成內(nèi)存的泄露娇掏。

新的編程語言,比如JAVA, C#勋眯, javascript, 都提供了所謂“垃圾回收的機(jī)制”婴梧,運(yùn)行時自身會運(yùn)行相應(yīng)的垃圾回收機(jī)制。程序員只需要申請內(nèi)存客蹋,而不需要關(guān)注內(nèi)存的釋放塞蹭。垃圾回收器(GC)會在適當(dāng)?shù)臅r候?qū)⒁呀?jīng)終止生命周期的變量的內(nèi)存給釋放掉。GC的優(yōu)點(diǎn)就在于它大大簡化了應(yīng)用層開發(fā)的復(fù)雜度讶坯,降低了內(nèi)存泄露的風(fēng)險番电。

25、image和canvas在處理圖片的時候有什么區(qū)別辆琅?

image是通過對象的形式描述圖片的

canvas通過專門的API將圖片繪制在畫布上

26漱办、簡述移動開發(fā)的注意點(diǎn),如何做好不同手機(jī)的適配,你以前的項(xiàng)目是怎么做的?

1、單獨(dú)做移動端項(xiàng)目婉烟,采用百分比布局

2娩井、采用響應(yīng)式的方式做適配

27、響應(yīng)式布局的時候似袁,輪播圖使用兩張不同的圖片去適配大屏幕和超小屏幕洞辣,還是一張圖片進(jìn)行壓縮適配不同終端,說明原因昙衅?

最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕扬霜,這樣可以針對不同設(shè)備的屏幕大小,來加載響應(yīng)的圖片而涉,減少超小屏幕設(shè)備的網(wǎng)絡(luò)流量消耗著瓶,加快響應(yīng)速度,同時防止圖片在大屏幕下分辨率不夠?qū)е率д娴膯栴}婴谱。

28蟹但、http和tcp有什么區(qū)別躯泰?

TPC/IP協(xié)議是傳輸層協(xié)議,主要解決數(shù)據(jù)如何在網(wǎng)絡(luò)中傳輸华糖,是一種“經(jīng)過三次握手”的可靠的傳輸方式麦向;

HTTP協(xié)議即超文本傳送協(xié)議(Hypertext Transfer Protocol ),是應(yīng)用層協(xié)議客叉,是Web聯(lián)網(wǎng)的基礎(chǔ)诵竭,也是手機(jī)聯(lián)網(wǎng)常用的協(xié)議之一,HTTP協(xié)議是建立在TCP協(xié)議之上的一種應(yīng)用兼搏。

29卵慰、向git中添加一個文件并commit,然后push到remote server,請寫出相關(guān)命令佛呻?

">$ git add README.md</pre>

">$git commit -m "add README.md"</pre>

">$ git push origin master</pre>

30裳朋、你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?

答:Ie(Ie內(nèi)核) 火狐(Gecko)谷歌(webkit) opear(Presto)

31、寫出幾種IE6 BUG的解決方法吓著?

答:1.雙邊距BUG float引起的使用display

     2.3像素問題使用float引起的使用dislpay:inline-3px

     3.超鏈接hover 點(diǎn)擊后失效使用正確的書寫順序 link visitedhover active

     4.Iez-index問題給父級添加position:relative

     5.Png 透明使用js代碼改

     6.Min-height最小高度鲤嫡!Important 解決’

     7.select在ie6下遮蓋使用iframe嵌套

     8.為什么沒有辦法定義1px左右的寬度容器(IE6默認(rèn)的行高造成的,使用over:hidden,zoom:0.08line-height:1px)
32绑莺、圖片優(yōu)化

項(xiàng)目中圖片處理相關(guān)的優(yōu)化暖眼,項(xiàng)目中用到的優(yōu)化方案,圖片大小達(dá)到多少的時候選擇處理纺裁?

答:1诫肠、首先了解在web開發(fā)中常見的圖片有那些格式。

     JPG 通常使用的背景圖片欺缘,照片圖片栋豫,商品圖片等等。這一類型的圖片都屬于大尺寸圖片或較大尺寸圖片一般使用的是這種格式浪南。

     PNG 這種格式的又分為兩種一種PNG-8笼才,一種 PNG-24。

     PNG-8格式不支持半透明络凿,也是IE6兼容的圖片存儲方式。

PNG-24圖片質(zhì)量要求較高的半透明或全透明背景昂羡,保存成PNG-24更合適(為了兼容IE可以試用js插件pngfix)一般是背景圖標(biāo)中使用的多。

GIF 這種格式顯而易見的是在需要gif動畫的時候使用了。

2.優(yōu)化方案

l 樣式代替圖片

例如:半透明钧椰、圓角寞缝、陰影、高光蛹批、漸變等撰洗。這些效果主流的瀏覽器都能夠完美支持篮愉,而對于那些低端瀏覽器,我們并不會完全拋棄他們差导,“漸進(jìn)增強(qiáng)”則是一個很好的解決方案试躏。

l 精靈圖

CSS Sprites,將同類型的圖標(biāo)或按鈕等背景圖合到一張大圖中设褐,減少頁面請求颠蕴。

l 字體圖標(biāo)

Icon Font,將圖標(biāo)做成字體文件助析。優(yōu)點(diǎn)是圖標(biāo)支持多個尺寸犀被,兼容所有瀏覽器,減少頁面請求等外冀。美中不足的是只支持純色的icon寡键。SVG,對于絕大多數(shù)圖案雪隧、圖標(biāo)等昌腰,矢量圖更小,且可縮放而無需生成多套圖“虻現(xiàn)在主流瀏覽器都支持SVG了遭商,所以可放心使用!

l Base64

將圖片轉(zhuǎn)化為base64編碼格式捅伤,資源內(nèi)嵌于CSS或HTML中劫流,不必單獨(dú)請求。

     Base64格式

data:[][;charset=][;base64],

     Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAA    L...."); }

     Base64 在HTML中的使用

<imgwidth="40"height="30"    src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

l 圖片響應(yīng)式

通常圖片加載都是可以通過lazy加載的形式來的丛忆,那么可以在加載的時候來判斷屏幕的尺寸來達(dá)到加載大圖還是小圖的目的來達(dá)到優(yōu)化祠汇。

33、你知道有哪些方法可以提高網(wǎng)站的性能熄诡?

答:我們從兩個方面來講:

  1.  資源加載
    

CSS頂部, JS底部

CSS JS文件壓縮

盡量使用圖片使用精靈圖可很,字體圖標(biāo)

圖片加載可通過懶加載的方式。

總之就是減少資源體積減少資源請求次數(shù)凰浮。

  1.  代碼性能
    
      Css:
    

使用CSS縮寫我抠,減少代碼量;

減少查詢層級:如.header .logo要好過.header .top .logo袜茧;

減少查詢范圍:如.header>li要好過.header li菜拓;

避免TAG標(biāo)簽與CLASS或ID并存:如a.top、button#submit笛厦;

刪除重復(fù)的CSS纳鼎;

….

Html:

減少DOM節(jié)點(diǎn):加速頁面渲染;

正確的閉合標(biāo)簽:如避免使用<div/>,瀏覽器會多一個將它解析成<div></div>的過程贱鄙;

減少頁面重繪劝贸。比如給圖片加上正確的寬高值:這可以減少頁面重繪,

……

Js:

盡量少用全局變量逗宁;

使用事件代理綁定事件映九,如將事件綁定在body上進(jìn)行代理;

避免頻繁操作DOM節(jié)點(diǎn)疙剑;

減少對象查找氯迂,如a.b.c.d這種查找方式非常耗性能,盡可能把它定義在變量里言缤;
34嚼蚀、設(shè)計模式有哪些?列舉你在前端開發(fā)工作中自己應(yīng)用到或者了解到其他框架所用到的設(shè)計模式管挟?

單例轿曙、工廠、觀察者僻孝、適配器导帝、代理模式

35、請描述你熟悉的語言的垃圾回收(GC)機(jī)制穿铆,他們對循環(huán)引用是如何處理的您单?如何查找內(nèi)存泄漏(MemoryLeak)?

JavaScript的垃圾回收機(jī)制主要是根據(jù)數(shù)據(jù)是否還存在引用,沒有引用的數(shù)據(jù)空間可能在某個時間被回收荞雏;在java中垃圾回收機(jī)制采用對象遍歷來解決循環(huán)引用虐秦;windows的任務(wù)管理器就可以查看到內(nèi)存泄露

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市凤优,隨后出現(xiàn)的幾起案子悦陋,更是在濱河造成了極大的恐慌,老刑警劉巖筑辨,帶你破解...
    沈念sama閱讀 212,599評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俺驶,死亡現(xiàn)場離奇詭異,居然都是意外死亡棍辕,警方通過查閱死者的電腦和手機(jī)暮现,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來痢毒,“玉大人送矩,你說我怎么就攤上這事∧奶妫” “怎么了?”我有些...
    開封第一講書人閱讀 158,084評論 0 348
  • 文/不壞的土叔 我叫張陵菇怀,是天一觀的道長凭舶。 經(jīng)常有香客問我晌块,道長,這世上最難降的妖魔是什么帅霜? 我笑而不...
    開封第一講書人閱讀 56,708評論 1 284
  • 正文 為了忘掉前任匆背,我火速辦了婚禮,結(jié)果婚禮上身冀,老公的妹妹穿的比我還像新娘钝尸。我一直安慰自己,他們只是感情好搂根,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,813評論 6 386
  • 文/花漫 我一把揭開白布珍促。 她就那樣靜靜地躺著,像睡著了一般剩愧。 火紅的嫁衣襯著肌膚如雪猪叙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,021評論 1 291
  • 那天仁卷,我揣著相機(jī)與錄音穴翩,去河邊找鬼。 笑死锦积,一個胖子當(dāng)著我的面吹牛芒帕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播丰介,決...
    沈念sama閱讀 39,120評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼背蟆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了基矮?” 一聲冷哼從身側(cè)響起淆储,我...
    開封第一講書人閱讀 37,866評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎家浇,沒想到半個月后本砰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,308評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡钢悲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,633評論 2 327
  • 正文 我和宋清朗相戀三年点额,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片莺琳。...
    茶點(diǎn)故事閱讀 38,768評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡还棱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出惭等,到底是詐尸還是另有隱情珍手,我是刑警寧澤,帶...
    沈念sama閱讀 34,461評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站琳要,受9級特大地震影響寡具,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜稚补,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,094評論 3 317
  • 文/蒙蒙 一童叠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧课幕,春花似錦厦坛、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至污桦,卻和暖如春亩歹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背凡橱。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評論 1 267
  • 我被黑心中介騙來泰國打工小作, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人稼钩。 一個月前我還...
    沈念sama閱讀 46,571評論 2 362
  • 正文 我出身青樓顾稀,卻偏偏與公主長得像,于是被迫代替她去往敵國和親坝撑。 傳聞我的和親對象是個殘疾皇子静秆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,666評論 2 350

推薦閱讀更多精彩內(nèi)容