43.ajax 的過(guò)程是怎樣的
- 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
- 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法坠陈、URL及驗(yàn)證信息
- 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)
- 發(fā)送HTTP請(qǐng)求
- 獲取異步調(diào)用返回的數(shù)據(jù)
- 使用JavaScript和DOM實(shí)現(xiàn)局部刷新
44. 異步加載和延遲加載
- 異步加載的方案: 動(dòng)態(tài)插入 script 標(biāo)簽
- 通過(guò) ajax去獲取 js 代碼队寇,然后通過(guò) eval 執(zhí)行
- script 標(biāo)簽上添加defer 或者 async 屬性
- 創(chuàng)建并插入iframe截粗,讓它異步執(zhí)行 js
- 延遲加載:有些js 代碼并不是頁(yè)面初始化的時(shí)候就立刻需要的佳窑,而稍后的某些情況才需要的
45. 前端的安全問(wèn)題辽俗?
- XSS
- sql注入
- CSRF:是跨站請(qǐng)求偽造贤重,很明顯根據(jù)剛剛的解釋?zhuān)暮诵囊簿褪钦?qǐng)求偽造漾肮,通過(guò)偽造身份提交POST和GET請(qǐng)求來(lái)進(jìn)行跨域的攻擊
完成CSRF需要兩個(gè)步驟:
- 登陸受信任的網(wǎng)站A,在本地生成 COOKIE
- 在不登出A的情況下灸眼,或者本地 COOKIE 沒(méi)有過(guò)期的情況下卧檐,訪(fǎng)問(wèn)危險(xiǎn)網(wǎng)站B。
46.ie 各版本和 chrome 可以并行下載多少個(gè)資源
- IE6 2 個(gè)并發(fā)
- iE7 升級(jí)之后的 6個(gè)并發(fā)焰宣,之后版本也是 6 個(gè)
- 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:
- Flash適合處理多媒體悄蕾、矢量圖形票顾、訪(fǎng)問(wèn)機(jī)器
- 對(duì)CSS、處理文本上不足,不容易被搜索
Ajax:
- Ajax對(duì)CSS库物、文本支持很好霸旗,支持搜索
- 多媒體、矢量圖形戚揭、機(jī)器訪(fǎng)問(wèn)不足
共同點(diǎn):
- 與服務(wù)器的無(wú)刷新傳遞消息
- 可以檢測(cè)用戶(hù)離線(xiàn)和在線(xiàn)狀態(tài)
- 操作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)求:
- 無(wú)法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫(kù))
- 向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒(méi)有數(shù)據(jù)量限制)
- 發(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是做什么的臀玄?
- 它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行
- 應(yīng)該避免使用eval瓢阴,不安全,非常耗性能(2次健无,一次解析成js語(yǔ)句荣恐,一次執(zhí)行)
53.Node.js 的適用場(chǎng)景
- 高并發(fā)
- 聊天
- 實(shí)時(shí)消息推送
54.JavaScript 原型,原型鏈 ? 有什么特點(diǎn)累贤?
- 原型對(duì)象也是普通的對(duì)象叠穆,是對(duì)象一個(gè)自帶隱式的proto 屬性,原型也有可能有自己的原型臼膏,如果一個(gè)原型對(duì)象的原型不為 null 的話(huà)硼被,我們就稱(chēng)之為原型鏈
- 原型鏈?zhǔn)怯梢恍┯脕?lái)繼承和共享屬性的對(duì)象組成的(有限的)對(duì)象鏈
55. 怎么重構(gòu)頁(yè)面?
- 編寫(xiě) CSS
- 讓頁(yè)面結(jié)構(gòu)更合理化渗磅,提升用戶(hù)體驗(yàn)
- 實(shí)現(xiàn)良好的頁(yè)面效果和提升性能
56.WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶(hù)端有那些方式嚷硫?
- html5 websocket
- WebSocket 通過(guò) Flash
- XHR長(zhǎng)時(shí)間連接
- XHR MultipartStreaming
- 不可見(jiàn)的Iframe
6.script標(biāo)簽的長(zhǎng)時(shí)間連接(可跨域)
57. 事件检访、IE與火狐的事件機(jī)制有什么區(qū)別? 如何阻止冒泡仔掸?
- 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作(有的操作對(duì)應(yīng)多個(gè)事件)脆贵。例如:當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為
- 事件處理機(jī)制:IE是事件冒泡起暮、firefox同時(shí)支持兩種事件模型卖氨,也就是:捕獲型事件和冒泡型事件
3.ev.stopPropagation();
注意舊ie的方法:ev.cancelBubble = true;
58.Ajax 是什么?Ajax 的交互模型负懦?同步和異步的區(qū)別双泪?如何解決跨域問(wèn)題?
Ajax 是什么:
- 通過(guò)異步模式密似,提升了用戶(hù)體驗(yàn)
- 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸焙矛,減少不必要的數(shù)據(jù)往返,減少了帶寬占用
- Ajax 在客戶(hù)端運(yùn)行残腌,承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作村斟,減少了大用戶(hù)量下的服務(wù)器負(fù)載。
Ajax 的最大的特點(diǎn):
- Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新(局部刷新)
- readyState 屬性狀態(tài) 有5個(gè)可取值: 0 = 未初始化抛猫,1 = 啟動(dòng)蟆盹, 2 = 發(fā)送,3 = 接收闺金,4 = 完成
Ajax 同步和異步的區(qū)別:
- 同步:提交請(qǐng)求 -> 等待服務(wù)器處理 -> 處理完畢返回逾滥,這個(gè)期間客戶(hù)端瀏覽器不能干任何事
- 異步:請(qǐng)求通過(guò)事件觸發(fā) -> 服務(wù)器處理(這是瀏覽器仍然可以作其他事情)-> 處理完畢
ajax.open方法中,第3個(gè)參數(shù)是設(shè)同步或者異步败匹。
Ajax 的缺點(diǎn):
- Ajax 不支持瀏覽器 back 按鈕
- 安全問(wèn)題 Ajax 暴露了與服務(wù)器交互的細(xì)節(jié)
- 對(duì)搜索引擎的支持比較弱
- 破壞了程序的異常機(jī)制
- 不容易調(diào)試
解決跨域問(wèn)題:
- jsonp
- iframe
- window.name寨昙、window.postMessage
- 服務(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)通常是:
- 表格(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ī)范編寫(xiě)代碼
- 設(shè)計(jì)可擴(kuò)展的API
- 代替舊有的框架缆巧、語(yǔ)言(如VB)
- 增強(qiáng)用戶(hù)體驗(yàn)
- 通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中
- 壓縮JS、CSS豌拙、image等前端資源(通常是由服務(wù)器來(lái)解決)
- 程序的性能優(yōu)化(如數(shù)據(jù)讀寫(xiě))
- 采用CDN來(lái)加速資源加載
- 對(duì)于JS DOM的優(yōu)化
- 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ù)雜度主届。