1你在昨天/本周學(xué)到了什么？
2編寫代碼的哪些方面能夠使你興奮或感興趣汤踏？
3你最近遇到過什么技術(shù)挑戰(zhàn)织鲸？你是如何解決的？
4在制作一個(gè)網(wǎng)頁應(yīng)用或網(wǎng)站的過程中溪胶，你是如何考慮其UI搂擦、安全性、高性能载荔、SEO盾饮、可維護(hù)性以及技術(shù)因素的？
??? 一 UI：
???????? 界面美觀，要有個(gè)性丘损，考慮用戶使用的邏輯要簡單普办，用起來舒適自由。使用習(xí)慣要符合大部分用戶的習(xí)慣徘钥，比如少讓用戶輸入衔蹲，采用選擇的方式，提供搜索和提示功能呈础。
??? 二 安全性：
????????? 1舆驶、對輸入進(jìn)行有效性驗(yàn)證（非法字符，特殊字符）如PHP中的方法htmlspecialchars()將特殊字符（>）轉(zhuǎn)化為html實(shí)體而钞，trim()去掉用戶輸入的不必要字符沙廉，stripslashes()去掉用戶輸入的反斜杠等等插佛。
?????????? 2屋群、對交互操作進(jìn)行身份驗(yàn)證和授權(quán)
???????? ? 3闲擦、異常錯(cuò)誤處理（向用戶反饋單額錯(cuò)誤提示不要讓攻擊者分析出一些網(wǎng)絡(luò)環(huán)境和配置）
?????????? 4审轮、緩沖區(qū)溢出；
?????????? 5缚陷、注入攻擊:注入攻擊是應(yīng)用違背了“數(shù)據(jù)與代碼分離原則”導(dǎo)致的結(jié)果达吞。它有兩個(gè)條件：一是用戶能夠控制數(shù)據(jù)的輸入培他；二是代碼拼湊了用戶輸入的數(shù)據(jù)粉臊，把數(shù)據(jù)當(dāng)作代碼執(zhí)行了草添。
?????????? 6、不安全的存儲扼仲；不要使用單獨(dú)類似MD5或SHA加密策略远寸，在進(jìn)行散列密碼值時(shí)，使用作料或多種作料以防止彩虹攻擊屠凶。對于短密碼而晒，采 用一個(gè)短散列算法處理，例如：bcrypt或scrypt阅畴。
??? 三 高性能：
?????????? 1、DNS（域名系統(tǒng)）負(fù)載均衡迅耘；在DNS中為多個(gè)IP地址配置同一個(gè)域名如：www.baidu.com贱枣，因而查詢這個(gè)域名的客戶機(jī)將得到其中一個(gè)地址，從而使得不同的客戶訪問不同的服務(wù)器颤专，達(dá)到負(fù)載均衡的目的纽哥，從而減小服務(wù)器端的壓力。DNS負(fù)載均衡是一種簡單而有效的方法栖秕，但是它不能區(qū)分服務(wù)器的差異春塌，也不能反映服務(wù)器的當(dāng)前運(yùn)行狀態(tài)。
??????????? 2、HTTP重定向（通過使客戶端重定向只壳，來分散和轉(zhuǎn)移請求壓力俏拱，比如一些下載服務(wù)通常都有幾個(gè)鏡像服務(wù)器）；301重定向是網(wǎng)址重定向最為可行的一種辦法,seo最為友好吼句。
??????????? 3锅必、分布式緩存；
??????????? 4惕艳、數(shù)據(jù)庫擴(kuò)展：讀寫分離搞隐，垂直分區(qū)，水平分區(qū)
??????????? 5远搪、反向代理負(fù)載均衡：讓代理服務(wù)器將請求均勻轉(zhuǎn)發(fā)給多臺內(nèi)部Web服務(wù)器之一上,從而達(dá)到負(fù)載均衡的目的劣纲。這種代理方式與普通的代理方式有所不同,標(biāo)準(zhǔn)代理方式是客戶使用代理訪問多個(gè)外部Web 服務(wù)器,而這種代理方式是多個(gè)客戶使用它訪問內(nèi)部Web服務(wù)器,因此也被稱為反向代理模式。
使用反向代理的好處是,可以將負(fù)載均衡和代理服務(wù)器的高速緩存技術(shù)結(jié)合在一起,提供有益的性能,具備額外的安全性,外部客戶不能直接訪問真實(shí)的服務(wù)器谁鳍。并且實(shí)現(xiàn)起來可以實(shí)現(xiàn)較好的負(fù)載均衡策略,將負(fù)載可以非常均衡的分給內(nèi)部服務(wù)器,不會出現(xiàn)負(fù)載集中到某個(gè)服務(wù)器的偶然現(xiàn)象癞季。
??? 四SEO:
?????????? 選好關(guān)鍵字，描述語言棠耕，修飾性圖片換成文本余佛，合理使用h1-h6，對圖片添加alt屬性窍荧，鏈接添加target屬性辉巡。
??? 五可維護(hù)性：
??????????? 代碼是否容易被理解，是否容易被修改和增加新的功能蕊退，當(dāng)出現(xiàn)問題時(shí)是否能快速定位到問題代碼郊楣。
5請談?wù)勀阆矚g的開發(fā)環(huán)境。
6你最熟悉哪一套版本控制系統(tǒng)瓤荔？
7你能描述當(dāng)你制作一個(gè)網(wǎng)頁的工作流程嗎净蚤？
?????? 內(nèi)容分析：分清展現(xiàn)在網(wǎng)絡(luò)中內(nèi)容的層次和邏輯關(guān)系
?????? 結(jié)構(gòu)設(shè)計(jì)：寫出合理的html結(jié)構(gòu)代碼
?????? 布局設(shè)計(jì)：使用html+css進(jìn)行布局
?????? 樣式設(shè)計(jì)：首先要使用reset.css
?????? 交互設(shè)計(jì)：鼠標(biāo)特效
?????? 行為設(shè)計(jì)：js代碼，ajax頁面行為和從服務(wù)器獲取數(shù)據(jù)
?????? 測試兼容性输硝；優(yōu)化性能今瀑。
8假若你有5個(gè)不同的樣式文件(stylesheets),整合進(jìn)網(wǎng)站的最好方式是?
?????? 根據(jù)class命名規(guī)則寫樣式，這樣樣式不會沖突点把，提取公共的樣式橘荠，進(jìn)行合并，非公共的單獨(dú)拎出來郎逃。然后打包壓縮一下就行了哥童，若每個(gè)文件都很大，就需要分模塊加載褒翰。
9你能描述漸進(jìn)增強(qiáng)(progressive enhancement)和優(yōu)雅降級(graceful degradation)之間的不同嗎?
?.transition{
-webkit-transition:all .5s;
-moz-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
.transition{
transition:all .5s;
-o-transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
}
??????????? 漸進(jìn)增強(qiáng)（progressive enhancement）：針對低版本瀏覽器進(jìn)行構(gòu)建頁面贮懈，保證最基本的功能匀泊，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)朵你。（從被所有瀏覽器支持的基本功能開始各聘，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎(chǔ)瀏覽器的額外樣式和功能撬呢。當(dāng)瀏覽器支持時(shí)伦吠，它們會自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。）
??????????? 優(yōu)雅降級（graceful degradation）：一開始就構(gòu)建完整的功能魂拦，然后再針對低版本瀏覽器進(jìn)行兼容毛仪。（Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器芯勘，則代碼會檢查以確認(rèn)它們是否能正常工作箱靴。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了荷愕，為那些無法支持功能的瀏覽器增加候選方案衡怀，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效。）
???????????? 區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始安疗，并試圖減少用戶體驗(yàn)的供給抛杨，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的荐类、能夠起作用的版本開始怖现，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要玉罐。
10你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化屈嗤？
????????????? 1. 確保網(wǎng)站信息描述全站統(tǒng)一
????????????? 2. 清楚網(wǎng)站內(nèi)部無效重復(fù)的信息
????????????? 3. 讓用戶能迅速準(zhǔn)確的在網(wǎng)站查看相關(guān)內(nèi)容
????????????? 4. 優(yōu)化內(nèi)部結(jié)構(gòu)便于搜索引擎的理解和收錄
?????? 為了達(dá)到以上這幾個(gè)效果，我們一般會采取幾種方法：關(guān)鍵詞優(yōu)化吊输，網(wǎng)站頁面優(yōu)化饶号，內(nèi)部結(jié)構(gòu)信息優(yōu)化和如何提高網(wǎng)頁的友好度和用戶體驗(yàn)效果。
11瀏覽器同一時(shí)間可以從一個(gè)域名下載多少資源季蚂？
o有什么例外嗎茫船？
12請說出三種減少頁面加載時(shí)間的方法。(加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間)
?????????? 1.減少HTTP請求扭屁；
?????????? 2.合并壓縮Js/css文件透硝；
?????????? 3.使用緩存manifest；
?????????? 4.服務(wù)器端開啟gzip疯搅；
?????????? 5.使用CDN，用戶可以就近獲取所需要的資源埋泵，訪問速度有保障幔欧，穩(wěn)定性也有保障
?????????? 6.外部JS和CSS放底下
??????????? 7.盡可能少的操作DOM罪治，某些需要重復(fù)操作的DOM可以放變量里
13如果你參與到一個(gè)項(xiàng)目中，發(fā)現(xiàn)他們使用Tab來縮進(jìn)代碼礁蔗，但是你喜歡空格觉义，你會怎么做？
?????????? 1浴井、建議項(xiàng)目使用EditorConfig之類的規(guī)范
??????????? 2晒骇、為了保持風(fēng)格的一致性，保持原有
??????????? 3磺浙、直接使用vim里的retab命令將所有的tab轉(zhuǎn)換成空格
14請寫一個(gè)簡單的幻燈效果頁面洪囤。
15如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會是什么撕氧？
16請談?wù)勀銓W(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解瘤缩。
??????? 網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更‘健康’，首先約束瀏覽器開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)伦泥，其次約束網(wǎng)站開發(fā)者剥啤，這樣降低開發(fā)難度，開發(fā)成本不脯，SEO也會更好做府怯，也不會因?yàn)闉E用代碼導(dǎo)致各種BUG、安全問題防楷，最終提高網(wǎng)站易用性牺丙。
????????? w3c存在的意義就是讓瀏覽器兼容性問題盡量小，首先是他們對瀏覽器開發(fā)者的約束域帐，然后是對開發(fā)者的約束赘被。
17什么是FOUC (無樣式內(nèi)容閃爍)？你如何來避免FOUC肖揣？
????????? 如果使用import方法對CSS進(jìn)行導(dǎo)入,會導(dǎo)致某些頁面在Windows 下的Internet Explorer出現(xiàn)一些奇怪的現(xiàn)象:以無樣式顯示頁面內(nèi)容的瞬間閃爍,這種現(xiàn)象稱之為文檔樣式短暫失效(Flash of Unstyled Content),簡稱為FOUC民假。
?????????? 原因大致為：
?????????????????? 1，使用import方法導(dǎo)入樣式表龙优。
??????????????????? 2羊异，將樣式表放在頁面底部
??????????????????? 3，有幾個(gè)樣式表彤断，放在html結(jié)構(gòu)的不同位置野舶。
?????????????? 其實(shí)原理很清楚：當(dāng)樣式表晚于結(jié)構(gòu)性html加載，當(dāng)加載到此樣式表時(shí)宰衙，頁面將停止之前的渲染平道。此樣式表被下載和解析后，將重新渲染頁面供炼，也就出現(xiàn)了短暫的花屏現(xiàn)象一屋。
?? ? ? ? ? 解決方法：
?????????????????????? 使用LINK標(biāo)簽將樣式表放在文檔HEAD中窘疮。
18請解釋什么是ARIA和屏幕閱讀器(screenreaders)，以及如何使網(wǎng)站實(shí)現(xiàn)無障礙訪問(accessible)冀墨。
???????? ARIA 為Web app提供滿足用戶不同需求的解決方案闸衫。建設(shè)起用戶和軟件之間的橋梁。
???????? 新的HTML5標(biāo)準(zhǔn)中增加 aria-* 的標(biāo)簽屬性诽嘉，全稱Accessible Rich Internet Application蔚出。與role標(biāo)簽屬性配合使用。
???????? role屬性表示一個(gè)非標(biāo)準(zhǔn)的tag的實(shí)際作用虫腋。比如用div做button骄酗，那么設(shè)置div 的 role=“button”，輔助工具就可以認(rèn)出這實(shí)際上是個(gè)button岔乔。而aria-*的作用就是描述這個(gè)tag在可視化的情境中的具體信息酥筝。
????????? 最簡單的應(yīng)用比如，
?????????? < div role=”checkbox” aria-checked=”checked”>
?????????? 輔助工具就會知道雏门，這個(gè)div實(shí)際上是個(gè)checkbox的角色嘿歌，為選中狀態(tài)。
19請解釋CSS動(dòng)畫和JavaScript動(dòng)畫的優(yōu)缺點(diǎn)茁影。
???????? ? 1. css3動(dòng)畫只兼容Ie10+宙帝，js動(dòng)畫幾乎兼容所有瀏覽器；
??????????? 2.js動(dòng)畫更靈活募闲，css3動(dòng)畫更簡單
??????????? 3.js動(dòng)畫復(fù)用性高
??????????? 4.時(shí)間尺度上步脓，css動(dòng)畫粒度比較粗，js動(dòng)畫可以更精細(xì)浩螺；
??????????? 5.幀速不好的瀏覽器CSS動(dòng)畫可以做到優(yōu)雅降級靴患，js代碼還需要寫額外的代碼
??????????? 6.在某些條件下，css動(dòng)畫性能優(yōu)于JS動(dòng)畫要出；（webkit內(nèi)核的瀏覽器鸳君，js執(zhí)行昂貴的任務(wù)，不引起layout和repaint情況下）
??????????? 7.css3有天然的時(shí)間支持如（animationENd和transitionEnd）
20什么是跨域資源共享(CORS)患蹂？它用于解決什么問題或颊？
?????????? 當(dāng)使用ajax跨域請求時(shí)，瀏覽器報(bào)錯(cuò)：XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的問題传于，如果用jsonp或者proxy的方式進(jìn)行修改的話未免需要太大的工程量囱挑，所以采用CORS這種比較簡單高效的技術(shù)。相比JOSP的方式沼溜，CORS更為高效平挑。JSONP由于它的原理只能實(shí)現(xiàn)GET請求，而CORS支持所有類型的HTTP請求系草。使用CORS,可以使用普通的ajax實(shí)現(xiàn)跨域
