前端其它一些面試題
阿新 • • 發佈:2019-02-14
題目和答案來自於網路,不保證準確性!
1、對前端工程師這個職位你是怎麼樣理解的?
a. 前端是最貼近使用者的程式設計師,前端的能力就是能讓產品從 90分進化到 100 分,甚至更好
b. 參與專案,快速高質量完成實現效果圖,精確到1px;
c. 與團隊成員,UI設計,產品經理的溝通;
d. 做好的頁面結構,頁面重構和使用者體驗;
e. 處理hack,相容、寫出優美的程式碼格式;
f. 針對伺服器的優化、擁抱最新前端技術。
2、一次完整的HTTP事務是怎樣的一個過程?
基本流程:
a. 域名解析
b. 發起TCP的3次握手
c. 建立TCP連線後發起http請求
d. 伺服器端響應http請求,瀏覽器得到html程式碼
e. 瀏覽器解析html程式碼,並請求html程式碼中的資源
f. 瀏覽器對頁面進行渲染呈現給使用者
3、 說說你對WEB標準以及W3C的理解與認識。
(1)web標準規範要求,書寫標籤必須閉合、標籤小寫、不亂巢狀,可提高搜尋機器人對網頁內容的搜尋機率。--- SEO
(2)建議使用外鏈css和js指令碼,從而達到結構與行為、結構與表現的分離,提高頁面的渲染速度,能更快地顯示頁面的內容。
(3)樣式與標籤的分離,更合理的語義化標籤,使內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件, 從而降低維護成本、改版更方便
(4)不需要變動頁面內容,便可提供列印版本而不需要複製內容,提高網站易用性.
4、解釋下表現與資料分離
就是類似MVC結構;
html控制結構,css控制表現,js的資料來聯絡表現和結構;
實現三者分離 又相互聯絡。對於網頁的資料更新、維護、以及改版很有幫助。
5、請說出三種減少頁面載入時間的方法(載入時間指感知的時間或者實際載入時間)
1)減少http請求(合併檔案、合併圖片)
2)優化圖片檔案,減小其尺寸,特別是縮圖,
3)壓縮Javascript、CSS程式碼
4)網址後面加上“/”:對伺服器而言,不加斜槓伺服器會多一次判斷的過程,加斜槓就會直接返回網站設定的存放在網站根目錄下的預設頁面。
6、一個網站的首頁圖片很多,導致頁面開啟較慢,你有什麼優化方案
1)自己網速一定的情況下,圖片越小載入速度越快。用PS把使用的圖片處理一下,在不失真的情況下,把圖片另存為WEB所用格式,這樣圖片明顯比原來小很多,載入速度也就變快了。
2)按需分頁延遲載入方法載入。圖片太多時,可以分頁或是下拉載入,減小請求數量。
3)等待圖片載入完畢整體顯示該頁面(需要做一個載入的頁面,判斷所有圖片載入完畢之後關閉載入頁面)。
7、什麼是前端工程師?與後端工程師的區別?
前端工程師就是指做靜態網頁的工程師:
(1)、廣義的前端分為三種:安卓工程師、ios工程師、web前端工程師。
(2)、狹義的前端指的是web前端工程師,web前端工程師指的是做靜態的PC端和手機端靜態網頁的工程師。
通俗地說,使用者通過瀏覽器看到的,操作的都是前端範圍,服務端資料的處理屬於後端。
8、什麼是靜態網頁?什麼叫做動態網頁?
(1)、靜態網頁:沒有資料互動的網頁,沒有資料庫參與,沒有伺服器端資料的載入。比如靜態網頁就是隻有html+css+JavaScript做成的網站。
(2)、動態網頁:有後臺數據參與的網頁,網頁中的資料是從資料庫取的,需要有後臺邏輯的支援。比如動態網頁就是jsp頁面(後臺語言是java)、asp頁面(後臺語言是asp.net)。
9、前端語言有哪些?後端語言有哪些?
(1)、前端語言:HTML、css、javascript。
(2)、後端語言(伺服器端語言):php、java、asp.net。最近新出的node.js
10、做一個網站的團隊都需要哪些人?
(1)、產品經理:設計這個產品,通常就是了解使用者的網站需求,畫原型圖。
(2)、專案經理:通常是對整個產品有一個整理管理和負責,通常是會程式碼技術的人來構建整個網站的程式碼框架,以後網站實現的全面管理。
(3)、UI設計師,通過原型圖畫psd設計圖的。
(4)、前端工程師,根據設計圖來做靜態網頁,可能是原生app的IOS和安卓工程師,或者web端的web前端工程師。
(5)、後端工程師,通常就是做java、asp.net、php的工程師來寫後端邏輯的工程師。
11、你怎麼來實現頁面設計圖,你認為前端應該如何高質量完成工作?
首先劃分成頭部、body、腳部; 實現效果圖是最基本的工作,精確到2px;與設計師,產品經理的溝通和專案的參與做好的頁面結構,頁面重構和使用者體驗處理hack,相容、寫出優美的程式碼格式針對伺服器的優化。
12、著名的前端框架都有哪些的呢?
佈局框架:bootstrap、easy UI等。
Js動效框架:jquery、angular.js等。
13、做一個網頁設計師或者前端工程師,平常訪問學習的IT網站都有哪些?
(1)、W3School
(2)、菜鳥教程
(3)、原始碼之家(相似的還有A5、站長之家)
(4)、csdn(部落格)
(5)、前端網 (6)、我要自學網 (7)、慕課網 (8)、百度 14、切圖工作是UI設計師來做?還是前端工程師來做? 對於app工程師,也就是ios和Android工程師,大多由UI設計師來完成切圖。 對於web前端工程師,也就是PC端、瀏覽端,大多有web前端工程師自己完成切圖。 15、UI設計師需要會使用的工具的簡稱都有哪些? 以下一些工具的簡稱,大家應該有一定的瞭解,以免被問到咱們只知道簡稱。 (1)、AI (adobe illustrator)基於向量的圖形制作軟體 (2)、PS(adobe Photoshop)影象處理軟體。 (3)、DW(Adobe Dreamweaver)網頁編輯器 (4)、AE(Adobe After Effects)一款圖形視訊處理軟體 (5)、flash(Adobe Flash)二維動畫軟體 (6)、Axure(Axure RP)快速原型設計工具 (7)、墨刀(MockingBot)移動端原型工具 (8)、Fireworks網頁作圖軟體 16、什麼是網頁三劍客? 網頁三劍客,是一套強大的網頁編輯工具,最初是由Macromedia公司開發出來的。由Dreamweaver,Fireworks,Flash三個軟體組成,俗稱網頁三劍客。 Dreamweaver 是一個“所見即所得”的視覺化網站開發工具,主要用於動態網頁和靜態網頁的開發;Fireworks主要是用於對網頁上常用的jpg、gif的製作和處理,也可用於製作網頁佈局;Flash主要用來製作動畫,現推出Flash平臺,可預見有極好的前景。 17、怎麼除錯網頁程式碼?怎麼檢視網頁原始碼? (1)、按鍵盤上的F12,開啟開發者除錯工具; (2)、滑鼠右鍵檢視頁面原始碼。 18、UI設計師的工作內容是什麼? (1)、負責軟體介面的美術設計、創意工作和製作工作; (2)、根據各種相關軟體的使用者群,提出構思新穎、有高度吸引力的創意設計; (3)、對頁面進行優化,使使用者操作更趨於人性化; (4)、維護現有的應用產品; (5)、收集和分析使用者對於GUI的需求。 19、切圖工程師、前端工程師、UI設計師、美工、網頁設計師區別是什麼? (1)、UI設計師俗稱美工,不過UI設計師工作高階、名字大氣、工資上檔次,不過大多公司都稱呼UI為美工,你也不要介意的,不管他們怎麼稱呼的,反正就是做網站設計圖的就OK,別人怎麼稱呼不重要的了,只要你拿了高工資就是UI設計師了: UI的主要任務是設計。瞭解使用者的意圖,分析網站配色,基本佈局。繪製出一個網站效果圖。 UI需要掌握的知識體系應該包括網頁設計,UI(User Interface)使用者介面人機互動、操作邏輯、介面美觀的整體設計,UED(user experience design)使用者體驗設計--簡單來說就是如何使得網站更加便於互動。 (2)、前端開發: 美工在完成設計效果圖之後,由前端開發人員將其製作成為適合瀏覽器檢視的HTML頁面。 由於現在移動網際網路的大規模流行,加上各個不同廠商的瀏覽器的激烈競爭,前端開發的主要任務簡單來說就是使網頁在不同瀏覽器不同解析度不同裝置上提供相似或相近的瀏覽體驗。 前端開發需要掌握的知識體系主要是相容性問題的解決,流暢完美的互動體驗。具體到技術細節上就是HTML,CSS,JavaScript,各大公司各種不同核心的瀏覽器、各種各樣的JS庫、簡單的與後臺互動的知識。 (3)、後臺開發: 前臺開發完成之後,就是後臺程式設計師的工作了,相比較前端來說,後臺更像傳統意義上的程式設計師。後臺的工作簡單來說就是網頁檔案對資料庫的增刪改查。 後臺需要掌握的知識體系應該包括,程式設計基礎,基本HTML語言,至少一門主流網頁語言(C#,C++,JAVA,PHP等),資料庫的操作等等。 (4)、 UI設計師和網頁設計師有什麼區別? 其實網頁設計,分出來有兩塊,一個是UI設計,一個是web前端。UI設計自然要懂的更多的是PS,FW,AI,CD等製圖軟體,還有一些比較優秀的網頁設計理念,切圖等相關知識。 web前端,需要的html+css+javascript,通過這三個東西把設計圖轉換成程式碼。這一步所實現的就是設計圖的靜態化,也就是變成了網頁形式。 網頁設計師,是個很泛的概念,不過一般指的會偏重UI設計。稍微關注過網頁設計領域的公司,有點規模的,招人都會寫得比較詳細,例如招UI設計師,或者招web前端工程師。 你找工作的時候,都找這些名稱比較規範的,因為起碼他們會區別職位的不同。一定要找的時候看清楚是UI設計師,不是找前端或者美工的,前端更多的寫較高階的程式碼的,會比設計懂的知識點更多的,美工其實就是淘寶裝修店鋪或者說簡單的PS照片的,就是會玩美圖秀秀或者PS簡單的繪圖就可以的了,UI設計師才是咱們的IT行業“高大上”職位。 (5)、UI設計師: “UI”的本義是使用者介面,是英文User和interface的縮寫。UI設計師簡稱UID(User Interface Designer),指從事對軟體的人機互動、操作邏輯、介面美觀的整體設計工作的人。 UI設計師的涉及範圍包括商用平面設計、高階網頁設計、移動應用介面設計及部分包裝設計,是目前中國資訊產業中最為搶手的人才之一。 UI設計師的特點是:工資高、發展前景好,會一些簡單的前端知識程式碼,做手機端和PC端的網站設計圖。 20、前端需要注意哪些SEO? - 合理的title、description、keywords:搜尋對著三項的權重逐個減小,title值強調重點即可,重要關鍵詞出現不要超過2次,而且要靠前,不同頁面title要有所不同; description把頁面內容高度概括,長度合適,不可過分堆砌關鍵詞,不同頁面description有所不同;keywords列舉出重要關鍵詞即可 - 語義化的HTML程式碼,符合W3C規範:語義化程式碼讓搜尋引擎容易理解網頁 - 重要內容HTML程式碼放在最前:搜尋引擎抓取HTML順序是從上到下,有的搜尋引擎對抓取長度有限制,保證重要內容一定會被抓取 - 重要內容不要用js輸出:爬蟲不會執行js獲取內容 - 少用iframe:搜尋引擎不會抓取iframe中的內容 - 非裝飾性圖片必須加alt - 提高網站速度:網站速度是搜尋引擎排序的一個重要指標 21、web開發中會話跟蹤的方法有哪些? - cookie - session - url重寫 - 隱藏input - ip地址 22、網站重構的理解? 網站重構:在不改變外部行為的前提下,簡化結構、新增可讀性,而在網站前端保持一致的行為。也就是說是在不改變UI的情況下,對網站進行優化,在擴充套件的同時保持一致的UI。 23、為什麼利用多個域名來儲存網站資源會更有效? ①CDN快取更方便 ②突破瀏覽器併發限制 ③節約cookie頻寬 ④節約主域名的連線數,優化頁面響應速度 ⑤防止不必要的安全問題 24、請談一下你對網頁標準和標準制定機構重要性的理解。 網頁標準和標準制定機構都是為了能讓web發展的更‘健康’,開發者遵循統一的標準,降低開發難度,開發成本,SEO也會更好做,也不會因為濫用程式碼導致各種BUG、安全問題,最終提高網站易用性。 25、一個頁面上有大量的圖片(大型電商網站),載入很慢,你有哪些方法優化這些圖片的載入,給使用者更好的體驗。 圖片懶載入,在頁面上的未可視區域可以新增一個滾動條事件,判斷圖片位置與瀏覽器頂端的距離與頁面的距離,如果前者小於後者,優先載入。 如果為幻燈片、相簿等,可以使用圖片預載入技術,將當前展示圖片的前一張和後一張優先下載。 如果圖片為css圖片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技術。 如果圖片過大,可以使用特殊編碼的圖片,載入時會先載入一張壓縮的特別厲害的縮圖,以提高使用者體驗。 如果圖片展示區域小於圖片的真實大小,則因在伺服器端根據業務需要先行進行圖片壓縮,圖片壓縮後大小與展示一致。 26、解釋jsonp的原理,以及為什麼不是真正的ajax? Jsonp並不是一種資料格式,而json是一種資料格式,jsonp是用來解決跨域獲取資料的一種解決方案,具體是通過動態建立script標籤,然後通過標籤的src屬性獲取js檔案中的js指令碼,該指令碼的內容是一個函式呼叫,引數就是伺服器返回的資料,為了處理這些返回的資料,需要事先在頁面定義好回撥函式,本質上使用的並不是ajax技術 27、如何解決跨域問題? 理解跨域的概念:協議、域名、埠都相同才同域,否則都是跨域 出於安全考慮,伺服器不允許ajax跨域獲取資料,但是可以跨域獲取檔案內容,所以基於這一點,可以動態建立script標籤,使用標籤的src屬性訪問js檔案的形式獲取js指令碼,並且這個js指令碼中的內容是函式呼叫,該函式呼叫的引數是伺服器返回的資料,為了獲取這裡的引數資料,需要事先在頁面中定義回撥函式,在回撥函式中處理伺服器返回的資料,這就是解決跨域問題的主流解決方案 28、頁面編碼和被請求的資源編碼如果不一致如何處理? 對於ajax請求傳遞的引數,如果是get請求方式,引數如果傳遞中文,在有些瀏覽器會亂碼,不同的瀏覽器對引數編碼的處理方式不同,所以對於get請求的引數需要使用 encodeURIComponent函式對引數進行編碼處理, 後臺開發 語言都有相應的解碼api。對於post請求不需要進行編碼 29、闡述一下非同步載入。 1. 非同步載入的方案: 動態插入 script 標籤 2. 通過 ajax 去獲取 js 程式碼,然後通過 eval 執行 3. script 標籤上新增 defer 或者 async 屬性 4. 建立並插入 iframe,讓它非同步執行 js 30、請解釋一下 JavaScript 的同源策略。 同源策略是客戶端指令碼(尤其是Javascript)的重要的安全度量標準。它最早出自Netscape Navigator2.0,其目的是防止某個文件或指令碼從多個不同源裝載。所謂同源指的是:協議,域名,埠相同,同源策略是一種安全協議,指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。 31、一個頁面從輸入 URL 到頁面載入顯示完成,這個過程中都發生了什麼? 分為4個步驟: 1. 當傳送一個 URL 請求時,不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL,瀏覽器都會開啟一個執行緒來處理這個請求,同時在遠端 DNS 伺服器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。 2. 瀏覽器與遠端Web 伺服器通過 TCP 三次握手協商來建立一個 TCP/IP 連線。該握手包括一個同步報文,一個同步-應答報文和一個應答報文,這三個報文在 瀏覽器和伺服器之間傳遞。該握手首先由客戶端嘗試建立起通訊,而後伺服器應答並接受客戶端的請求,最後由客戶端發出該請求已經被接受的報文。 3. 一旦 TCP/IP 連線建立,瀏覽器會通過該連線向遠端伺服器傳送 HTTP 的 GET 請求。遠端伺服器找到資源並使用 HTTP 響應返回該資源,值為 200 的 HTTP 響應狀態表示一個正確的響應。 4. 此時,Web 伺服器提供資源服務,客戶端開始下載資源。 32、請說出三種減低頁面載入時間的方法。 1、壓縮css、js檔案 2、合併js、css檔案,減少http請求 3、外部js、css檔案放在最底下 4、減少dom操作,儘可能用變數替代不必要的dom操作 33、jquery 中如何將陣列轉化為json字串,然後再轉化回來? jQuery中沒有提供這個功能,所以你需要先編寫兩個jQuery的擴充套件: $.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) } 然後呼叫: $("").stringifyArray(array) 34、前端開發的優化問題(看雅虎14條效能優化原則)。 (1) 減少http請求次數:CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適;網頁Gzip,CDN託管,data快取 ,圖片伺服器。 (2) 前端模板 JS+資料,減少由於HTML標籤導致的頻寬浪費,前端用變數儲存AJAX請求結果,每次操作本地變數,不用請求,減少請求次數 (3) 用innerHTML代替DOM操作,減少DOM操作次數,優化javascript效能。 (4) 當需要設定的樣式很多時設定className而不是直接操作style。 (5) 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。 (6) 避免使用CSS Expression(css表示式)又稱Dynamic properties(動態屬性)。 (7) 圖片預載入,將樣式表放在頂部,將指令碼放在底部 加上時間戳。 (8) 避免在頁面的主體佈局中使用table,table要等其中的內容完全下載之後才會顯示出來,顯示比div+css佈局慢。 35、jquery與jquery UI有啥區別? jquery是操作dom的框架,jqueryUI是基於jquery做的一個UI元件庫 36、針對 jQuery 的優化方法? 優先使用ID選擇器 在class前使用tag(標籤名) 給選擇器一個上下文 慎用 .live()方法(應該說盡量不要使用) 使用data()方法儲存臨時變數 37、一些無答案題目 談談你認為怎樣做能使專案做的更好? 你對前端介面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣? 你遇到過比較難的技術問題是?你是如何解決的? 最近在學什麼?能談談你未來3,5年給自己的規劃嗎? 你有自己的技術部落格嗎,用了哪些技術? 除了前端以外還了解什麼其它技術麼?你最最厲害的技能是什麼? 介紹一個你最得意的作品吧? 你的優點是什麼?缺點是什麼?
(5)、前端網 (6)、我要自學網 (7)、慕課網 (8)、百度 14、切圖工作是UI設計師來做?還是前端工程師來做? 對於app工程師,也就是ios和Android工程師,大多由UI設計師來完成切圖。 對於web前端工程師,也就是PC端、瀏覽端,大多有web前端工程師自己完成切圖。 15、UI設計師需要會使用的工具的簡稱都有哪些? 以下一些工具的簡稱,大家應該有一定的瞭解,以免被問到咱們只知道簡稱。 (1)、AI (adobe illustrator)基於向量的圖形制作軟體 (2)、PS(adobe Photoshop)影象處理軟體。 (3)、DW(Adobe Dreamweaver)網頁編輯器 (4)、AE(Adobe After Effects)一款圖形視訊處理軟體 (5)、flash(Adobe Flash)二維動畫軟體 (6)、Axure(Axure RP)快速原型設計工具 (7)、墨刀(MockingBot)移動端原型工具 (8)、Fireworks網頁作圖軟體 16、什麼是網頁三劍客? 網頁三劍客,是一套強大的網頁編輯工具,最初是由Macromedia公司開發出來的。由Dreamweaver,Fireworks,Flash三個軟體組成,俗稱網頁三劍客。 Dreamweaver 是一個“所見即所得”的視覺化網站開發工具,主要用於動態網頁和靜態網頁的開發;Fireworks主要是用於對網頁上常用的jpg、gif的製作和處理,也可用於製作網頁佈局;Flash主要用來製作動畫,現推出Flash平臺,可預見有極好的前景。 17、怎麼除錯網頁程式碼?怎麼檢視網頁原始碼? (1)、按鍵盤上的F12,開啟開發者除錯工具; (2)、滑鼠右鍵檢視頁面原始碼。 18、UI設計師的工作內容是什麼? (1)、負責軟體介面的美術設計、創意工作和製作工作; (2)、根據各種相關軟體的使用者群,提出構思新穎、有高度吸引力的創意設計; (3)、對頁面進行優化,使使用者操作更趨於人性化; (4)、維護現有的應用產品; (5)、收集和分析使用者對於GUI的需求。 19、切圖工程師、前端工程師、UI設計師、美工、網頁設計師區別是什麼? (1)、UI設計師俗稱美工,不過UI設計師工作高階、名字大氣、工資上檔次,不過大多公司都稱呼UI為美工,你也不要介意的,不管他們怎麼稱呼的,反正就是做網站設計圖的就OK,別人怎麼稱呼不重要的了,只要你拿了高工資就是UI設計師了: UI的主要任務是設計。瞭解使用者的意圖,分析網站配色,基本佈局。繪製出一個網站效果圖。 UI需要掌握的知識體系應該包括網頁設計,UI(User Interface)使用者介面人機互動、操作邏輯、介面美觀的整體設計,UED(user experience design)使用者體驗設計--簡單來說就是如何使得網站更加便於互動。 (2)、前端開發: 美工在完成設計效果圖之後,由前端開發人員將其製作成為適合瀏覽器檢視的HTML頁面。 由於現在移動網際網路的大規模流行,加上各個不同廠商的瀏覽器的激烈競爭,前端開發的主要任務簡單來說就是使網頁在不同瀏覽器不同解析度不同裝置上提供相似或相近的瀏覽體驗。 前端開發需要掌握的知識體系主要是相容性問題的解決,流暢完美的互動體驗。具體到技術細節上就是HTML,CSS,JavaScript,各大公司各種不同核心的瀏覽器、各種各樣的JS庫、簡單的與後臺互動的知識。 (3)、後臺開發: 前臺開發完成之後,就是後臺程式設計師的工作了,相比較前端來說,後臺更像傳統意義上的程式設計師。後臺的工作簡單來說就是網頁檔案對資料庫的增刪改查。 後臺需要掌握的知識體系應該包括,程式設計基礎,基本HTML語言,至少一門主流網頁語言(C#,C++,JAVA,PHP等),資料庫的操作等等。 (4)、 UI設計師和網頁設計師有什麼區別? 其實網頁設計,分出來有兩塊,一個是UI設計,一個是web前端。UI設計自然要懂的更多的是PS,FW,AI,CD等製圖軟體,還有一些比較優秀的網頁設計理念,切圖等相關知識。 web前端,需要的html+css+javascript,通過這三個東西把設計圖轉換成程式碼。這一步所實現的就是設計圖的靜態化,也就是變成了網頁形式。 網頁設計師,是個很泛的概念,不過一般指的會偏重UI設計。稍微關注過網頁設計領域的公司,有點規模的,招人都會寫得比較詳細,例如招UI設計師,或者招web前端工程師。 你找工作的時候,都找這些名稱比較規範的,因為起碼他們會區別職位的不同。一定要找的時候看清楚是UI設計師,不是找前端或者美工的,前端更多的寫較高階的程式碼的,會比設計懂的知識點更多的,美工其實就是淘寶裝修店鋪或者說簡單的PS照片的,就是會玩美圖秀秀或者PS簡單的繪圖就可以的了,UI設計師才是咱們的IT行業“高大上”職位。 (5)、UI設計師: “UI”的本義是使用者介面,是英文User和interface的縮寫。UI設計師簡稱UID(User Interface Designer),指從事對軟體的人機互動、操作邏輯、介面美觀的整體設計工作的人。 UI設計師的涉及範圍包括商用平面設計、高階網頁設計、移動應用介面設計及部分包裝設計,是目前中國資訊產業中最為搶手的人才之一。 UI設計師的特點是:工資高、發展前景好,會一些簡單的前端知識程式碼,做手機端和PC端的網站設計圖。 20、前端需要注意哪些SEO? - 合理的title、description、keywords:搜尋對著三項的權重逐個減小,title值強調重點即可,重要關鍵詞出現不要超過2次,而且要靠前,不同頁面title要有所不同; description把頁面內容高度概括,長度合適,不可過分堆砌關鍵詞,不同頁面description有所不同;keywords列舉出重要關鍵詞即可 - 語義化的HTML程式碼,符合W3C規範:語義化程式碼讓搜尋引擎容易理解網頁 - 重要內容HTML程式碼放在最前:搜尋引擎抓取HTML順序是從上到下,有的搜尋引擎對抓取長度有限制,保證重要內容一定會被抓取 - 重要內容不要用js輸出:爬蟲不會執行js獲取內容 - 少用iframe:搜尋引擎不會抓取iframe中的內容 - 非裝飾性圖片必須加alt - 提高網站速度:網站速度是搜尋引擎排序的一個重要指標 21、web開發中會話跟蹤的方法有哪些? - cookie - session - url重寫 - 隱藏input - ip地址 22、網站重構的理解? 網站重構:在不改變外部行為的前提下,簡化結構、新增可讀性,而在網站前端保持一致的行為。也就是說是在不改變UI的情況下,對網站進行優化,在擴充套件的同時保持一致的UI。 23、為什麼利用多個域名來儲存網站資源會更有效? ①CDN快取更方便 ②突破瀏覽器併發限制 ③節約cookie頻寬 ④節約主域名的連線數,優化頁面響應速度 ⑤防止不必要的安全問題 24、請談一下你對網頁標準和標準制定機構重要性的理解。 網頁標準和標準制定機構都是為了能讓web發展的更‘健康’,開發者遵循統一的標準,降低開發難度,開發成本,SEO也會更好做,也不會因為濫用程式碼導致各種BUG、安全問題,最終提高網站易用性。 25、一個頁面上有大量的圖片(大型電商網站),載入很慢,你有哪些方法優化這些圖片的載入,給使用者更好的體驗。 圖片懶載入,在頁面上的未可視區域可以新增一個滾動條事件,判斷圖片位置與瀏覽器頂端的距離與頁面的距離,如果前者小於後者,優先載入。 如果為幻燈片、相簿等,可以使用圖片預載入技術,將當前展示圖片的前一張和後一張優先下載。 如果圖片為css圖片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技術。 如果圖片過大,可以使用特殊編碼的圖片,載入時會先載入一張壓縮的特別厲害的縮圖,以提高使用者體驗。 如果圖片展示區域小於圖片的真實大小,則因在伺服器端根據業務需要先行進行圖片壓縮,圖片壓縮後大小與展示一致。 26、解釋jsonp的原理,以及為什麼不是真正的ajax? Jsonp並不是一種資料格式,而json是一種資料格式,jsonp是用來解決跨域獲取資料的一種解決方案,具體是通過動態建立script標籤,然後通過標籤的src屬性獲取js檔案中的js指令碼,該指令碼的內容是一個函式呼叫,引數就是伺服器返回的資料,為了處理這些返回的資料,需要事先在頁面定義好回撥函式,本質上使用的並不是ajax技術 27、如何解決跨域問題? 理解跨域的概念:協議、域名、埠都相同才同域,否則都是跨域 出於安全考慮,伺服器不允許ajax跨域獲取資料,但是可以跨域獲取檔案內容,所以基於這一點,可以動態建立script標籤,使用標籤的src屬性訪問js檔案的形式獲取js指令碼,並且這個js指令碼中的內容是函式呼叫,該函式呼叫的引數是伺服器返回的資料,為了獲取這裡的引數資料,需要事先在頁面中定義回撥函式,在回撥函式中處理伺服器返回的資料,這就是解決跨域問題的主流解決方案 28、頁面編碼和被請求的資源編碼如果不一致如何處理? 對於ajax請求傳遞的引數,如果是get請求方式,引數如果傳遞中文,在有些瀏覽器會亂碼,不同的瀏覽器對引數編碼的處理方式不同,所以對於get請求的引數需要使用 encodeURIComponent函式對引數進行編碼處理, 後臺開發 語言都有相應的解碼api。對於post請求不需要進行編碼 29、闡述一下非同步載入。 1. 非同步載入的方案: 動態插入 script 標籤 2. 通過 ajax 去獲取 js 程式碼,然後通過 eval 執行 3. script 標籤上新增 defer 或者 async 屬性 4. 建立並插入 iframe,讓它非同步執行 js 30、請解釋一下 JavaScript 的同源策略。 同源策略是客戶端指令碼(尤其是Javascript)的重要的安全度量標準。它最早出自Netscape Navigator2.0,其目的是防止某個文件或指令碼從多個不同源裝載。所謂同源指的是:協議,域名,埠相同,同源策略是一種安全協議,指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。 31、一個頁面從輸入 URL 到頁面載入顯示完成,這個過程中都發生了什麼? 分為4個步驟: 1. 當傳送一個 URL 請求時,不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL,瀏覽器都會開啟一個執行緒來處理這個請求,同時在遠端 DNS 伺服器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。 2. 瀏覽器與遠端Web 伺服器通過 TCP 三次握手協商來建立一個 TCP/IP 連線。該握手包括一個同步報文,一個同步-應答報文和一個應答報文,這三個報文在 瀏覽器和伺服器之間傳遞。該握手首先由客戶端嘗試建立起通訊,而後伺服器應答並接受客戶端的請求,最後由客戶端發出該請求已經被接受的報文。 3. 一旦 TCP/IP 連線建立,瀏覽器會通過該連線向遠端伺服器傳送 HTTP 的 GET 請求。遠端伺服器找到資源並使用 HTTP 響應返回該資源,值為 200 的 HTTP 響應狀態表示一個正確的響應。 4. 此時,Web 伺服器提供資源服務,客戶端開始下載資源。 32、請說出三種減低頁面載入時間的方法。 1、壓縮css、js檔案 2、合併js、css檔案,減少http請求 3、外部js、css檔案放在最底下 4、減少dom操作,儘可能用變數替代不必要的dom操作 33、jquery 中如何將陣列轉化為json字串,然後再轉化回來? jQuery中沒有提供這個功能,所以你需要先編寫兩個jQuery的擴充套件: $.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) } 然後呼叫: $("").stringifyArray(array) 34、前端開發的優化問題(看雅虎14條效能優化原則)。 (1) 減少http請求次數:CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適;網頁Gzip,CDN託管,data快取 ,圖片伺服器。 (2) 前端模板 JS+資料,減少由於HTML標籤導致的頻寬浪費,前端用變數儲存AJAX請求結果,每次操作本地變數,不用請求,減少請求次數 (3) 用innerHTML代替DOM操作,減少DOM操作次數,優化javascript效能。 (4) 當需要設定的樣式很多時設定className而不是直接操作style。 (5) 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。 (6) 避免使用CSS Expression(css表示式)又稱Dynamic properties(動態屬性)。 (7) 圖片預載入,將樣式表放在頂部,將指令碼放在底部 加上時間戳。 (8) 避免在頁面的主體佈局中使用table,table要等其中的內容完全下載之後才會顯示出來,顯示比div+css佈局慢。 35、jquery與jquery UI有啥區別? jquery是操作dom的框架,jqueryUI是基於jquery做的一個UI元件庫 36、針對 jQuery 的優化方法? 優先使用ID選擇器 在class前使用tag(標籤名) 給選擇器一個上下文 慎用 .live()方法(應該說盡量不要使用) 使用data()方法儲存臨時變數 37、一些無答案題目 談談你認為怎樣做能使專案做的更好? 你對前端介面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣? 你遇到過比較難的技術問題是?你是如何解決的? 最近在學什麼?能談談你未來3,5年給自己的規劃嗎? 你有自己的技術部落格嗎,用了哪些技術? 除了前端以外還了解什麼其它技術麼?你最最厲害的技能是什麼? 介紹一個你最得意的作品吧? 你的優點是什麼?缺點是什麼?