常見(jiàn)的瀏覽器內(nèi)核有哪些？介紹一下你對(duì)瀏覽器內(nèi)核的理解英妓？
- Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等云头。[又稱(chēng)MSHTML]
- ** Gecko內(nèi)核**：Mozilla Firefox.
- WebKit內(nèi)核：Safari丐膝、Chrome.
- Presto：OperaPresto
瀏覽器內(nèi)核主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎量愧。
- 渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML钾菊、XML、圖像等等）侠畔、整理訊息（例如加入CSS等）结缚，以及計(jì)算網(wǎng)頁(yè)的顯示方式损晤，然后會(huì)輸出至顯示器或打印機(jī)软棺。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同尤勋。所有網(wǎng)頁(yè)瀏覽器喘落、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核最冰。
- **JS引擎 **：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果瘦棋。
HTTP 狀態(tài)消息 200 302 304 403 404 500 分別表示什么？
- 100 Continue 繼續(xù)暖哨，一般在發(fā)送post請(qǐng)求時(shí)赌朋，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)篇裁，之后發(fā)送具體參數(shù)信息
- 200：OK 請(qǐng)求已成功沛慢，請(qǐng)求所希望的響應(yīng)頭或數(shù)據(jù)體將隨此響應(yīng)返回。
- 201：Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
- 202：Accepted 服務(wù)器已接受請(qǐng)求达布，但尚未處理
- 301：Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置团甲。
- 302： Found 臨時(shí)性重定向。請(qǐng)求的資源臨時(shí)從不同的 URL 響應(yīng)請(qǐng)求黍聂。由于這樣的重定向是臨時(shí)的躺苦，客戶端應(yīng)當(dāng)繼續(xù)向原有地址發(fā)送以后的請(qǐng)求。只有在 Cache-Control 或 Expires 中進(jìn)行了指定的情況下产还，這個(gè)響應(yīng)才是可緩存的匹厘。
- 303：See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URL
- 304：Not Modified 自從上次請(qǐng)求后脐区，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)集乔。如果客戶端發(fā)送了一個(gè)帶條件的 GET 請(qǐng)求且該請(qǐng)求已被允許，而文檔的內(nèi)容（自上次訪問(wèn)以來(lái)或者根據(jù)請(qǐng)求的條件）并沒(méi)有改變坡椒，則服務(wù)器應(yīng)當(dāng)返回這個(gè)狀態(tài)碼扰路。304 響應(yīng)禁止包含消息體，因此始終以消息頭后的第一個(gè)空行結(jié)尾倔叼。
- 400：** Bad Request** 服務(wù)器無(wú)法理解請(qǐng)求的格式汗唱，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。
- 401：** Unauthorized** 請(qǐng)求未授權(quán)丈攒。
- 403：Forbidden 禁止訪問(wèn)哩罪。服務(wù)器已經(jīng)理解請(qǐng)求授霸，但是拒絕執(zhí)行它。
- 404：Not Found 找不到如何與 URL 相匹配的資源际插。請(qǐng)求失敗碘耳，請(qǐng)求所希望得到的資源未被在服務(wù)器上發(fā)現(xiàn)。
- 500：Internal Server Error 最常見(jiàn)的服務(wù)器端錯(cuò)誤框弛。服務(wù)器遇到了一個(gè)未曾預(yù)料的狀況辛辨，導(dǎo)致了它無(wú)法完成對(duì)請(qǐng)求的處理。一般來(lái)說(shuō)瑟枫，這個(gè)問(wèn)題都會(huì)在服務(wù)器端的源代碼出現(xiàn)錯(cuò)誤時(shí)出現(xiàn)斗搞。
- 503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求（可能是過(guò)載或維護(hù)）。
一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成慷妙，這個(gè)過(guò)程中都發(fā)生了什么僻焚？（流程說(shuō)的越詳細(xì)越好）
注：這題勝在區(qū)分度高，知識(shí)點(diǎn)覆蓋廣膝擂，再不懂的人虑啤，也能答出幾句， 而高手可以根據(jù)自己擅長(zhǎng)的領(lǐng)域自由發(fā)揮架馋，從URL規(guī)范狞山、HTTP協(xié)議、DNS绩蜻、CDN铣墨、數(shù)據(jù)庫(kù)查詢(xún)、 到瀏覽器流式解析办绝、CSS規(guī)則構(gòu)建伊约、layout、paint孕蝉、onload/domready屡律、JS執(zhí)行、JS API綁定等等降淮；
簡(jiǎn)潔版(4次“握手”)：
- 瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析超埋，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求佳鳖；
- 服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)霍殴，瀏覽器接收文件（HTML、JS系吩、CSS来庭、圖象等）；
- 瀏覽器對(duì)加載到的資源（HTML穿挨、JS月弛、CSS等）進(jìn)行語(yǔ)法解析肴盏，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
- 載入解析到的資源文件帽衙，渲染頁(yè)面菜皂，完成。
詳細(xì)版：
- 瀏覽器會(huì)開(kāi)啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求厉萝，對(duì) URL 分析判斷如果是 http 協(xié)議就按照 Web 方式來(lái)處理;
- 調(diào)用瀏覽器內(nèi)核中的對(duì)應(yīng)方法恍飘，比如 WebView 中的 loadUrl 方法;
- 通過(guò)DNS解析獲取網(wǎng)址的IP地址，設(shè)置 UA 等信息發(fā)出第二個(gè)GET請(qǐng)求;
- 進(jìn)行HTTP協(xié)議會(huì)話冀泻，客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭);
- 進(jìn)入到web服務(wù)器上的 Web Server常侣，如 Apache蜡饵、Tomcat弹渔、Node.JS 等服務(wù)器;
- 進(jìn)入部署好的后端應(yīng)用，如 PHP溯祸、Java肢专、JavaScript、Python 等焦辅，找到對(duì)應(yīng)的請(qǐng)求處理;
- 處理結(jié)束回饋報(bào)頭博杖，此處如果瀏覽器訪問(wèn)過(guò)，緩存上有對(duì)應(yīng)資源筷登，會(huì)與服務(wù)器最后修改時(shí)間對(duì)比剃根，一致則返回304;
- 瀏覽器開(kāi)始下載html文檔(響應(yīng)報(bào)頭，狀態(tài)碼200)前方，同時(shí)使用緩存;
- 文檔樹(shù)建立狈醉，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類(lèi)型的文件（比如css、js）,同時(shí)設(shè)置了cookie;
- 頁(yè)面開(kāi)始渲染DOM惠险，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等苗傅，頁(yè)面顯示完成。
優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)班巩？
- 優(yōu)雅降級(jí)：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)針對(duì)舊版本的IE進(jìn)行降級(jí)處理了,使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全不能用追逮。 如：border-shadow
- 漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開(kāi)始泣栈，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁(yè)面增加不影響基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)抑进，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用强经。 如：默認(rèn)使用flash上傳，但如果瀏覽器支持 HTML5 的文件上傳功能单匣，則使用HTML5實(shí)現(xiàn)更好的體驗(yàn)夕凝；
WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式宝穗？
- html5提供的Websocket
- 不可見(jiàn)的iframe
- WebSocket通過(guò)Flash
- XHR長(zhǎng)時(shí)間連接
- XHR Multipart Streaming
- <script>標(biāo)簽的長(zhǎng)時(shí)間連接(可跨域)
webSocket如何兼容低瀏覽器？
- Adobe Flash Socket 码秉、
- ActiveX HTMLFile (IE) 逮矛、
- 基于 multipart 編碼發(fā)送 XHR 、
- 基于長(zhǎng)輪詢(xún)的 XHR
對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法转砖？
- 優(yōu)點(diǎn)：因?yàn)镹ode是基于事件驅(qū)動(dòng)和無(wú)阻塞的须鼎，所以非常適合處理并發(fā)請(qǐng)求， 因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多府蔗。 此外晋控，與Node代理服務(wù)器交互的客戶端代碼是由javascript語(yǔ)言編寫(xiě)的， 因此客戶端和服務(wù)器端都用同一種語(yǔ)言編寫(xiě)姓赤，這是非常美妙的事情赡译。
- 缺點(diǎn)：Node是一個(gè)相對(duì)新的開(kāi)源項(xiàng)目，所以不太穩(wěn)定不铆，它總是一直在變蝌焚， 而且缺少足夠多的第三方庫(kù)支持∈某猓看起來(lái)只洒，就像是Ruby/Rails當(dāng)年的樣子。
頁(yè)面重構(gòu)怎么操作劳坑？
該題應(yīng)謹(jǐn)慎回答自己擅長(zhǎng)的毕谴，避免給自己挖坑。
- 表格(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)用戶體驗(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ù)器的文件緩存
網(wǎng)頁(yè)驗(yàn)證碼是干嘛的忠寻，是為了解決什么安全問(wèn)題？
增加驗(yàn)證碼的主要目的是減少非正常的請(qǐng)求,以保護(hù)用戶權(quán)益.所謂非正常的請(qǐng)求有以下:
- 爬蟲(chóng)腳本登錄,比如登錄之后批量發(fā)布不良信息.
- 掃號(hào)腳本暴力探測(cè)用戶帳號(hào),比如暴力破解某些用戶的密碼.
- 頻繁的使用某一個(gè)涉及后臺(tái)性能瓶頸的功能,導(dǎo)致系統(tǒng)負(fù)載過(guò)高.
如何解決跨域問(wèn)題?
jsonp存和、 iframe奕剃、window.name、window.postMessage捐腿、服務(wù)器上設(shè)置代理頁(yè)面
請(qǐng)描述一下 cookies纵朋，sessionStorage 和 localStorage 的區(qū)別？
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過(guò)加密）茄袖。
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）操软，記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器宪祥，僅在本地保存聂薪。
存儲(chǔ)大小：
cookie數(shù)據(jù)大小不能超過(guò)4k家乘。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多藏澳，可以達(dá)到5M或更大仁锯。
有期時(shí)間：
localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)翔悠；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除业崖。
cookie 設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉
頁(yè)面可見(jiàn)性（Page Visibility API） 可以有哪些用途蓄愁？
- 通過(guò) visibilityState 的值檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn)双炕，以及打開(kāi)網(wǎng)頁(yè)的時(shí)間等;
- 在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候，自動(dòng)暫停音樂(lè)或視頻的播放撮抓；
如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域妇斤？
- border-radius
- map+area或者svg
- 純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等
