前端小tips(四)

43.ajax 的過(guò)程是怎樣的

  1. 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
  2. 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法坠陈、URL及驗(yàn)證信息
  3. 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)
  4. 發(fā)送HTTP請(qǐng)求
  5. 獲取異步調(diào)用返回的數(shù)據(jù)
  6. 使用JavaScript和DOM實(shí)現(xiàn)局部刷新

44. 異步加載和延遲加載

  1. 異步加載的方案: 動(dòng)態(tài)插入 script 標(biāo)簽
  2. 通過(guò) ajax去獲取 js 代碼队寇,然后通過(guò) eval 執(zhí)行
  3. script 標(biāo)簽上添加defer 或者 async 屬性
  4. 創(chuàng)建并插入iframe截粗,讓它異步執(zhí)行 js
  5. 延遲加載:有些js 代碼并不是頁(yè)面初始化的時(shí)候就立刻需要的佳窑,而稍后的某些情況才需要的

45. 前端的安全問(wèn)題辽俗?

  1. XSS
  2. sql注入
  3. CSRF:是跨站請(qǐng)求偽造贤重,很明顯根據(jù)剛剛的解釋?zhuān)暮诵囊簿褪钦?qǐng)求偽造漾肮,通過(guò)偽造身份提交POST和GET請(qǐng)求來(lái)進(jìn)行跨域的攻擊

完成CSRF需要兩個(gè)步驟:

  1. 登陸受信任的網(wǎng)站A,在本地生成 COOKIE
  2. 在不登出A的情況下灸眼,或者本地 COOKIE 沒(méi)有過(guò)期的情況下卧檐,訪(fǎng)問(wèn)危險(xiǎn)網(wǎng)站B。

46.ie 各版本和 chrome 可以并行下載多少個(gè)資源

  1. IE6 2 個(gè)并發(fā)
  2. iE7 升級(jí)之后的 6個(gè)并發(fā)焰宣,之后版本也是 6 個(gè)
  3. Firefox霉囚,chrome也是6個(gè)

47.javascript里面的繼承怎么實(shí)現(xiàn),如何避免原型鏈上面的對(duì)象共享

用構(gòu)造函數(shù)和原型鏈的混合模式去實(shí)現(xiàn)繼承匕积,避免對(duì)象共享可以參考經(jīng)典的extend()函數(shù)盈罐,很多前端框架都有封裝的,就是用一個(gè)空函數(shù)當(dāng)做中間變量

48. Flash闪唆、Ajax各自的優(yōu)缺點(diǎn)盅粪,在使用中如何取舍?

Flash:

  1. Flash適合處理多媒體悄蕾、矢量圖形票顾、訪(fǎng)問(wèn)機(jī)器
  2. 對(duì)CSS、處理文本上不足,不容易被搜索

Ajax:

  1. Ajax對(duì)CSS库物、文本支持很好霸旗,支持搜索
  2. 多媒體、矢量圖形戚揭、機(jī)器訪(fǎng)問(wèn)不足

共同點(diǎn):

  1. 與服務(wù)器的無(wú)刷新傳遞消息
  2. 可以檢測(cè)用戶(hù)離線(xiàn)和在線(xiàn)狀態(tài)
  3. 操作DOM

49. 請(qǐng)解釋一下 JavaScript 的同源策略诱告。

概念:
同源策略是客戶(hù)端腳本(尤其是Javascript)的重要的安全度量標(biāo)準(zhǔn)。它最早出自NetscapeNavigator2.0民晒,其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載精居。
這里的同源策略指的是:協(xié)議,域名潜必,端口相同靴姿,同源策略是一種安全協(xié)議,指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性磁滚。

為什么要有同源限制:
我們舉例說(shuō)明:比如一個(gè)黑客程序佛吓,他利用Iframe把真正的銀行登錄頁(yè)面嵌到他的頁(yè)面上,當(dāng)你使用真實(shí)的用戶(hù)名垂攘,密碼登錄時(shí)维雇,他的頁(yè)面就可以通過(guò)Javascript讀取到你的表單中input中的內(nèi)容,這樣用戶(hù)名晒他,密碼就輕松到手了吱型。

50.GET和POST的區(qū)別,何時(shí)使用POST陨仅?

GET:一般用于信息獲取津滞,使用URL傳遞參數(shù),對(duì)所發(fā)送信息的數(shù)量也有限制灼伤,一般在2000個(gè)字符
POST:一般用于修改服務(wù)器上的資源触徐,對(duì)所發(fā)送的信息沒(méi)有限制

GET方式需要使用Request.QueryString 來(lái)取得變量的值
POST方式通過(guò)Request.Form 來(lái)獲取變量的值
也就是說(shuō)Get 是通過(guò)地址欄來(lái)傳值,而 Post 是通過(guò)提交表單來(lái)傳值狐赡。

在以下情況中撞鹉,請(qǐng)使用 POST 請(qǐng)求:

  1. 無(wú)法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫(kù))
  2. 向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒(méi)有數(shù)據(jù)量限制)
  3. 發(fā)送包含未知字符的用戶(hù)輸入時(shí),POST 比 GET 更穩(wěn)定也更可靠

51. 哪些地方會(huì)出現(xiàn)css阻塞猾警,哪些地方會(huì)出現(xiàn)js阻塞孔祸?

js 的阻塞特性:所有瀏覽器在下載 JS 的時(shí)候隆敢,會(huì)阻止一切其他活動(dòng)发皿,比如其他資源的下載,內(nèi)容的呈現(xiàn)等等拂蝎。直到 JS 下載穴墅、解析、執(zhí)行完畢后才開(kāi)始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。為了提高用戶(hù)體驗(yàn)玄货,新一代瀏覽器都支持并行下載 JS皇钞,但是 JS 下載仍然會(huì)阻塞其它資源的下載(例如.圖片,css文件等)松捉。
由于瀏覽器為了防止出現(xiàn) JS 修改 DOM 樹(shù)夹界,需要重新構(gòu)建DOM 樹(shù)的情況,所以就會(huì)阻塞其他的下載和呈現(xiàn)隘世。
嵌入 JS 會(huì)阻塞所有內(nèi)容的呈現(xiàn)可柿,而外部 JS 只會(huì)阻塞其后內(nèi)容的顯示,2 種方式都會(huì)阻塞其后資源的下載丙者。也就是說(shuō)外部樣式不會(huì)阻塞外部腳本的加載复斥,但會(huì)阻塞外部腳本的執(zhí)行。

CSS 怎么會(huì)阻塞加載了械媒?CSS 本來(lái)是可以并行下載的目锭,在什么情況下會(huì)出現(xiàn)阻塞加載了(在測(cè)試觀察中,IE6 下 CSS 都是阻塞加載)
當(dāng) CSS 后面跟著嵌入的 JS 的時(shí)候纷捞,該 CSS 就會(huì)出現(xiàn)阻塞后面資源下載的情況痢虹。而當(dāng)把嵌入 JS 放到 CSS 前面,就不會(huì)出現(xiàn)阻塞的情況了兰绣。
根本原因:因?yàn)闉g覽器會(huì)維持 html 中 css 和 js 的順序世分,樣式表必須在嵌入的 JS 執(zhí)行前先加載、解析完缀辩。而嵌入的 JS 會(huì)阻塞后面的資源加載臭埋,所以就會(huì)出現(xiàn)上面 CSS 阻塞下載的情況。

52.eval是做什么的臀玄?

  1. 它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行
  2. 應(yīng)該避免使用eval瓢阴,不安全,非常耗性能(2次健无,一次解析成js語(yǔ)句荣恐,一次執(zhí)行)

53.Node.js 的適用場(chǎng)景

  1. 高并發(fā)
  2. 聊天
  3. 實(shí)時(shí)消息推送

54.JavaScript 原型,原型鏈 ? 有什么特點(diǎn)累贤?

  1. 原型對(duì)象也是普通的對(duì)象叠穆,是對(duì)象一個(gè)自帶隱式的proto 屬性,原型也有可能有自己的原型臼膏,如果一個(gè)原型對(duì)象的原型不為 null 的話(huà)硼被,我們就稱(chēng)之為原型鏈
  2. 原型鏈?zhǔn)怯梢恍┯脕?lái)繼承和共享屬性的對(duì)象組成的(有限的)對(duì)象鏈

55. 怎么重構(gòu)頁(yè)面?

  1. 編寫(xiě) CSS
  2. 讓頁(yè)面結(jié)構(gòu)更合理化渗磅,提升用戶(hù)體驗(yàn)
  3. 實(shí)現(xiàn)良好的頁(yè)面效果和提升性能

56.WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶(hù)端有那些方式嚷硫?

  1. html5 websocket
  2. WebSocket 通過(guò) Flash
  3. XHR長(zhǎng)時(shí)間連接
  4. XHR MultipartStreaming
  5. 不可見(jiàn)的Iframe
    6.script標(biāo)簽的長(zhǎng)時(shí)間連接(可跨域)

57. 事件检访、IE與火狐的事件機(jī)制有什么區(qū)別? 如何阻止冒泡仔掸?

  1. 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作(有的操作對(duì)應(yīng)多個(gè)事件)脆贵。例如:當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為
  2. 事件處理機(jī)制:IE是事件冒泡起暮、firefox同時(shí)支持兩種事件模型卖氨,也就是:捕獲型事件和冒泡型事件
    3.ev.stopPropagation();
    注意舊ie的方法:ev.cancelBubble = true;

58.Ajax 是什么?Ajax 的交互模型负懦?同步和異步的區(qū)別双泪?如何解決跨域問(wèn)題?

Ajax 是什么:

  1. 通過(guò)異步模式密似,提升了用戶(hù)體驗(yàn)
  2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸焙矛,減少不必要的數(shù)據(jù)往返,減少了帶寬占用
  3. Ajax 在客戶(hù)端運(yùn)行残腌,承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作村斟,減少了大用戶(hù)量下的服務(wù)器負(fù)載。

Ajax 的最大的特點(diǎn):

  1. Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新(局部刷新)
  2. readyState 屬性狀態(tài) 有5個(gè)可取值: 0 = 未初始化抛猫,1 = 啟動(dòng)蟆盹, 2 = 發(fā)送,3 = 接收闺金,4 = 完成

Ajax 同步和異步的區(qū)別:

  1. 同步:提交請(qǐng)求 -> 等待服務(wù)器處理 -> 處理完畢返回逾滥,這個(gè)期間客戶(hù)端瀏覽器不能干任何事
  2. 異步:請(qǐng)求通過(guò)事件觸發(fā) -> 服務(wù)器處理(這是瀏覽器仍然可以作其他事情)-> 處理完畢
    ajax.open方法中,第3個(gè)參數(shù)是設(shè)同步或者異步败匹。

Ajax 的缺點(diǎn):

  1. Ajax 不支持瀏覽器 back 按鈕
  2. 安全問(wèn)題 Ajax 暴露了與服務(wù)器交互的細(xì)節(jié)
  3. 對(duì)搜索引擎的支持比較弱
  4. 破壞了程序的異常機(jī)制
  5. 不容易調(diào)試

解決跨域問(wèn)題:

  1. jsonp
  2. iframe
  3. window.name寨昙、window.postMessage
  4. 服務(wù)器上設(shè)置代理頁(yè)面

59. 對(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)通常是:

  1. 表格(table)布局改為 DIV + CSS
  2. 使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS炼七、如對(duì) IE6 有效的)
  3. 對(duì)于移動(dòng)平臺(tái)的優(yōu)化
  4. 針對(duì)于 SEO 進(jìn)行優(yōu)化
  5. 深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面
  6. 減少代碼間的耦合
  7. 讓代碼保持彈性
  8. 嚴(yán)格按規(guī)范編寫(xiě)代碼
  9. 設(shè)計(jì)可擴(kuò)展的API
  10. 代替舊有的框架缆巧、語(yǔ)言(如VB)
  11. 增強(qiáng)用戶(hù)體驗(yàn)
  12. 通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中
  13. 壓縮JS、CSS豌拙、image等前端資源(通常是由服務(wù)器來(lái)解決)
  14. 程序的性能優(yōu)化(如數(shù)據(jù)讀寫(xiě))
  15. 采用CDN來(lái)加速資源加載
  16. 對(duì)于JS DOM的優(yōu)化
  17. HTTP服務(wù)器的文件緩存

60. HTML5的優(yōu)點(diǎn)和缺點(diǎn)

優(yōu)點(diǎn):

網(wǎng)絡(luò)標(biāo)準(zhǔn)統(tǒng)一陕悬、HTML5本身是由W3C推薦出來(lái)的。
多設(shè)備姆蘸、跨平臺(tái)
即時(shí)更新
提高可用性和改進(jìn)用戶(hù)的友好體驗(yàn)
有幾個(gè)新的標(biāo)簽墩莫,有助于開(kāi)發(fā)人員定義重要的內(nèi)容
可以給站點(diǎn)帶來(lái)更多的多媒體元素(音頻和視頻)
可以很好的代替Flash和Silverlight
被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲

缺點(diǎn):

安全方面:像之前Firefox4的web socket和透明代理的實(shí)現(xiàn)存在嚴(yán)重的安全問(wèn)題,同時(shí)web storage逞敷、web socket這樣的功能很容易被黑客利用狂秦,從而盜取用戶(hù)的信息和資料
完善性方面:許多特性各瀏覽器的支持程度不同
技術(shù)門(mén)檻方面:HTML5簡(jiǎn)化開(kāi)發(fā)者工作的同時(shí)代表了有許多新的屬性和API需要開(kāi)發(fā)者學(xué)習(xí),像web worker推捐、web socket裂问、web storage等新特性,后臺(tái)甚至瀏覽器原理的知識(shí)牛柒,機(jī)遇的同時(shí)也意味著挑戰(zhàn)
性能方面:某些平臺(tái)下的引擎問(wèn)題導(dǎo)致HTML5性能低下
瀏覽器兼容性方面:最大缺點(diǎn)堪簿,IE9以下的瀏覽器幾乎都不兼容

擴(kuò)展

優(yōu)點(diǎn) - 跨平臺(tái)的使用。比如你開(kāi)發(fā)了一款HTML5的游戲皮壁,可以輕易的一直到UC的開(kāi)放平臺(tái)椭更、Opera的游戲中心、Facebook應(yīng)用平臺(tái)蛾魄,甚至可以通過(guò)封裝的技術(shù)發(fā)放到App Store或Google Play上虑瀑,所以他得跨平臺(tái)行非常強(qiáng)大。 - 自適應(yīng)網(wǎng)頁(yè)滴须∩喙罚可以自動(dòng)識(shí)別屏幕寬度,并作出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)扔水。網(wǎng)站為不同的設(shè)備提供不同的網(wǎng)頁(yè)痛侍,如專(zhuān)門(mén)提供mobile版本活著iPhone/iPad版本。但是這樣需要同時(shí)維護(hù)多個(gè)版本魔市,會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度主届。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市待德,隨后出現(xiàn)的幾起案子岂膳,更是在濱河造成了極大的恐慌,老刑警劉巖磅网,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谈截,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡涧偷,警方通過(guò)查閱死者的電腦和手機(jī)簸喂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)燎潮,“玉大人喻鳄,你說(shuō)我怎么就攤上這事∪贩猓” “怎么了除呵?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵再菊,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我颜曾,道長(zhǎng)纠拔,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任泛豪,我火速辦了婚禮稠诲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘诡曙。我一直安慰自己臀叙,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布价卤。 她就那樣靜靜地躺著劝萤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪慎璧。 梳的紋絲不亂的頭發(fā)上稳其,一...
    開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音炸卑,去河邊找鬼既鞠。 笑死,一個(gè)胖子當(dāng)著我的面吹牛盖文,可吹牛的內(nèi)容都是我干的嘱蛋。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼五续,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼洒敏!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起疙驾,我...
    開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤凶伙,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后它碎,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體函荣,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年扳肛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了傻挂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡挖息,死狀恐怖金拒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情套腹,我是刑警寧澤绪抛,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布资铡,位于F島的核電站,受9級(jí)特大地震影響幢码,放射性物質(zhì)發(fā)生泄漏笤休。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一蛤育、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧葫松,春花似錦瓦糕、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至珊擂,卻和暖如春圣勒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背摧扇。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工圣贸, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扛稽。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓吁峻,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親在张。 傳聞我的和親對(duì)象是個(gè)殘疾皇子用含,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

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

  • 前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱: HTML&CSS: 對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異帮匾、兼容性啄骇、hack、CSS基本功:...
    秀才JaneBook閱讀 2,328評(píng)論 0 25
  • 在線(xiàn)閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,255評(píng)論 24 450
  • <a name='html'>HTML</a> Doctype作用瘟斜?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)缸夹、<...
    clark124閱讀 3,456評(píng)論 1 19
  • 目錄 1、談?wù)勀銓?duì)Ajax的理解螺句?(概念明未、特點(diǎn)、作用) 2壹蔓、說(shuō)說(shuō)你對(duì)延遲對(duì)象deferred的理解? 3趟妥、什么是跨...
    w_zhuan閱讀 986評(píng)論 1 28
  • 今天雖然是周末,但是非常忙碌佣蓉,希望我也能經(jīng)營(yíng)好自己的情感賬戶(hù)披摄。
    FineYoga蔣琳閱讀 143評(píng)論 0 1