年薪十萬必會前端面試題大總結——基礎篇

時間  2019-11-09
標籤 年薪 十萬 必會 端面 試題 總結 基礎 简体版
原文   原文鏈接
  1. 前端和計算機相關知識
    1. 你能描述一下漸進加強和優雅降級之間的不一樣嗎
    2. 瀏覽器兼容問題
    3. 如何對網站的文件和資源進行優化?
    4. 怎麼學習前端?怎麼接觸前端新知識?
    5. 關於先後端分離
    6. 關於瀏覽器內核(渲染引擎)
    7. 瀏覽器加載文件順序以及repaint/reflow
    8. 爲何使用多個域名來存儲網絡資源會更有效？
    9. 進程和線程的區別
    10. 前端開發的優化問題
    11. Flash，Ajax各自的優缺點，使用中如何取捨？
  2. CSS
    1. CSS3
    2. css居中的方式
    3. 請寫一個簡單的幻燈效果頁面
    4. 什麼是無樣式內容閃爍?如何避免?
    5. display:none和visibility:hidden的區別
    6. 解釋浮動和工做原理
    7. 清除浮動
    8. 解釋CSS Sprits,以及你要如何使用?
    9. 你最喜歡的圖片替換方法是什麼?你將如何使用?
    10. 討論CSS hacks, 條件引用或其餘
    11. 如何爲有功能限制的瀏覽器提供網頁
    12. 在書寫高效CSS時會有哪些問題須要考慮?
    13. 如何優化網頁的打印樣式?
    14. 描述下你曾經使用過的CSS 預處理的優缺點
    15. 若是設計中使用了非標準的字體, 你將如何實現?

    16. 解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？javascript

    17. 解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。css

    18. 僞類的用法：html

    19. 描述下"reset"css文件的做用和使用它的好處前端

    20. 請解釋一下 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？vue

    21. block, inline和inline-block的區別

    22. css動畫和js動畫的優缺點html5

    23. 你用過媒體查詢，或針對移動端的佈局/CSS 嗎？java

    24. 有哪些隱藏內容的方法(同時還要保證屏幕閱讀器可用)
    25. CSS選擇器級別
    26. alt和title的區別
    27. 知道bfc嗎?
    28. 行內元素，塊級元素，空元素各有哪些？
  3. html

    1. h5的改進:node

    2. 什麼是語義化的html?react

    3. 從前端角度出發談談作好seo應該注意什麼?

    4. 文檔類型(DOCTYPE)jquery

    5. 使用XHTML的侷限有哪些?

    6. 若是網頁內容須要多語言,要怎麼作?

    7. data-*屬性的做用

    8. 若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？

    9. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

    10. 瀏覽器本地存儲與服務器端存儲之間的區別

    11. sessionStorage和頁面js數據對象的區別

    12. canvas和svg的區別?

    13. href和src的區別

  4. js

    1. ajax, 跨域, jsonp

    2. apply和call的用法和區別:

    3. bind函數的兼容性

    4. 解釋下事件代理

    5. 解釋下js中this是怎麼工做的?

    6. 繼承

    7. AMD vs. CommonJS？

    8. 什麼是哈希表?

    9. 什麼是閉包? 閉包有什麼做用?

    10. 僞數組:

    11. undefined和null的區別, 還有undeclared:

    12. 事件冒泡機制:　　

    13. 解釋下爲何接下來這段代碼不是 IIFE(當即調用的函數表達式)：function foo(){ }();?

    14. "attribute" 和 "property" 的區別是什麼？

    15. 請指出 document load 和 document ready 兩個事件的區別。

    16. 什麼是use strict? 其好處壞處分別是什麼?

    17. 瀏覽器端的js包括哪幾個部分?

    18. DOM包括哪些對象?

    19. js有哪些基本類型?

    20. 基本類型與引用類型有什麼區別?

    21. 關於js的垃圾收集例程

    22. ES5中, 除了函數,什麼可以產生做用域?

    23. js有幾種函數調用方式?

    24. 描述事件模型?IE的事件模型是怎樣的？事件代理是什麼？事件代理中怎麼定位實際事件產生的目標？

    25. js動畫有哪些實現方法?

    26. 還有什麼實現動畫的方法?

    27. 面向對象有哪幾個特色? 

    28. 如何判斷屬性來自自身對象仍是原型鏈?

    29. ES6新特性

    30. 如何獲取某個DOM節點，節點遍歷方式

    31. 用LESS如何給某些屬性加瀏覽器前綴？

    32. js異步模式如何實現？

    33. 事件機制，如何綁定事件處理函數

    34. 圖片預加載

    35. 若是在同一個元素上綁定了兩個click事件, 一個在捕獲階段執行, 一個在冒泡階段執行. 那麼當觸發click條件時, 會執行幾個事件? 執行順序是什麼?

    36. js中怎麼實現塊級做用域?

    37. 構造函數裏定義function和使用prototype.func的區別？

    38. js實現對象的深克隆
  5. jquery問題

  6. 一些編程題

    1. 匿名函數變量
    2. this指向
    3. 定時

    4. 點擊一個ul的五個li元素，分別彈出他們的序號，怎麼作？

  7. js算法題

    1.  js實現數組去重怎麼實現?

1、前端編程

1. 你能描述一下漸進加強和優雅降級之間的不一樣嗎?

答:

  • 定義:
    • 優雅降級（graceful degradation): 一開始就構建站點的完整功能，而後針對瀏覽器測試和修復
    • 漸進加強（progressive enhancement): 一開始只構建站點的最少特性，而後不斷針對各瀏覽器追加功能。 
  • 都關注於同一網站在不一樣設備裏不一樣瀏覽器下的表現程度
  • 區別:
    • 「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站. 而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
    • 「漸進加強」觀點則認爲應關注於內容自己。請注意其中的差異：我甚至連「瀏覽器」三個字都沒提。
  • 理解:
    • "優雅降級"就是首先完整地實現整個網站,包括其中的功能和效果. 而後再爲那些沒法支持全部功能的瀏覽器增長候選方案, 使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效.
    • "漸進加強"則是從瀏覽器支持的基本功能開始, 首先爲全部設備準備好清晰且語義化的html及完整內容, 而後再以無侵入的方法向頁面增長無害於基礎瀏覽器的額外樣式和功能. 當瀏覽器升級時, 它們會自動呈現併發揮做用.

　　參考自: 漸進加強、優雅降級  漸進加強和優雅降級

2. 瀏覽器兼容問題:

  • 問題1   不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣.
    • 即隨便寫幾個標籤, 在不加樣式控制的狀況下, 各自的margin和padding差別較大.
    • 解決方法: CCS裏:   *{margin:0; padding:0}
  • 問題2   塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大　　
    • 會使得ie6後面的一塊被頂到下一行.
    • 解決方案: 在float的標籤樣式中加入 display: inline; 將其轉化爲行內屬性
  • 問題3  設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度
    • IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度
    • 解決方案: 給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度
    • 緣由: ie8以前的瀏覽器都會給標籤一個最小默認的行高的高度. 即便標籤是空的,這個標籤的高度仍是會達到默認的行高.
  • 問題4  行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug
    • 解決: 在display:block;後面加入display:inline;display:table;
  • 問題5  圖片默認有間距
    • 幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。
    • 解決: 使用float屬性爲img佈局
  • 問題6  標籤最低高度設置min-height不兼容
    • 由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容
    • 若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
  • 問題7  透明度的兼容CSS設置
    • 使用hacker
      • IE6認識的hacker是下劃線_和*
      • IE7,遨遊認識的hacker是*
  • 問題8  IE ol的序號全爲1, 不遞增
    • 解決: li設置樣式{display: list-item}
    • 問題9 

 ie6,7不支持display:inline-block

  • 解決方法: 設置inline並觸法haslayout
  • display:inline-block; *display:inline; *zoom:1 

　　參考自: 常見瀏覽器兼容性問題與解決方案　　

3. 如何對網站的文件和資源進行優化?

答: 

  • 文件合併（同上題「倘若你有5個不一樣的 CSS 文件, 加載進頁面的最好方式是？」）
    • 減小調用其餘頁面、文件的數量。通常咱們爲了讓頁面生動活潑會大量使用background來加載背景圖，而每一個 background的圖像都會產生1次HTTP請求，要改善這個情況，能夠採用css的1個有用的background-position屬 性來加載背景圖，咱們將須要頻繁加載的多個圖片合成爲1個單獨的圖片，須要加載時能夠採用：background:url(....) no-repeat x-offset y-offset;的形式加載便可將這部分圖片加載的HTTP請求縮減爲1個。
    • 每一個http請求都會產生一次從你的瀏覽器到服務器端網絡往返過程，而且致使推遲到達服務器端和返回瀏覽器端的時間，咱們稱之爲延遲。
  • 文件最小化/文件壓縮
    • 即將須要傳輸的內容壓縮後傳輸到客戶端再解壓，這樣在網絡上傳輸的 數據量就會大幅減少。一般在服務器上的Apache、Nginx能夠直接開啓這個設置，也能夠從代碼角度直接設置傳輸文件頭，增長gzip的設置，也能夠 從 負載均衡設備直接設置。不過須要留意的是，這個設置會略微增長服務器的負擔。建議服務器性能不是很好的網站，要慎重考慮。
    • js和css文件在百度上搜一個壓縮網站就能壓縮，可是在實際開發的項目中，使用gulp、webpack等工具能夠打包出合併壓縮後的文件，小圖片能夠在打包時轉換成base64方式引入，大圖片能夠被壓縮，html文件也是能夠被壓縮的
  • 使用 CDN 託管
    • CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。
  • 緩存的使用
    • Ajax調用都採用緩存調用方式，通常採用附加特徵參數方式實現，注意其中的<script src=」xxx.js?{VERHASH}」，{VERHASH}就是特徵參數，這個參數不變化就使用緩存文件，若是發生變化則從新下載新文件或更新信息。
  • css文件放置在head，js放置在文檔尾
  • 在服務器端配置control-cache  last-modify-date

  • 在服務器配置Entity-Tag     if-none-match

  • 用更少的時間下載更多的文件，提升網站加載速度，提升用戶體驗，能夠使用如下方法：
    • 1.css sprites----將小圖片合併爲一張大圖片，使用background-position等css屬性取得圖片位置
    • 2.將資源放在多個域名下-----打開控制檯，能夠看到不少網站都是這麼作的~
    • 3.圖片延遲加載-----不少電商網站、新聞網站，尤爲是用到瀑布流展現圖片的時候，不少都這麼作了，這個技術已經很廣泛~
  • 書寫代碼的時候要注意優化： 
    • 1.css
      • 將能夠合併的樣式合併起來，好比margin-top、margin-bottom等。
      • 給img圖片設置寬高，由於瀏覽器渲染元素的時候沒有找到這兩個參數，須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。
    • 2.js
      • 少改變DOM元素，少觸發reflow，能夠複用的代碼提出來寫成公共的等等……
    • 3.img
      • 優化圖片，不失真的狀況下儘可能減小圖片大小，使用iconfont等

4. 怎麼學習前端? 怎麼接觸web新知識? 

5. 關於先後端分離:

  • 前端：負責View和Controller層。
  • 後端：只負責Model層，業務處理/數據等。

6. 關於瀏覽器內核(渲染引擎)

  • 先說一下瀏覽器的結構：
    • ①、用戶界面（UI） - 包括菜單欄、工具欄、地址欄、後退/前進按鈕、書籤目錄等，也就是能看到的除了顯示頁面的主窗口以外的部分；
    • ②、瀏覽器引擎（Rendering engine） - 也被稱爲瀏覽器內核、渲染引擎，主要負責取得頁面內容、整理信息（應用CSS）、計算頁面的顯示方式，而後會輸出到顯示器或者打印機；
    • ③、JS解釋器 - 也能夠稱爲JS內核，主要負責處理javascript腳本程序，通常都會附帶在瀏覽器之中，例如chrome的V8引擎；
    • ④、網絡部分 - 主要用於網絡調用，例如：HTTP請求，其接口與平臺無關，併爲全部的平臺提供底層實現；
    • ⑤、UI後端 - 用於繪製基本的窗口部件，好比組合框和窗口等。
    • ⑥、數據存儲 - 保存相似於cookie、storage等數據部分，HTML5新增了web database技術，一種完整的輕量級客戶端存儲技術。
    • 注：IE只爲每一個瀏覽器窗口啓用單獨的進程，而chrome瀏覽器卻爲每一個tab頁面單獨啓用進程，也就是每一個tab都有獨立的渲染引擎實例。
  • 如今的主要瀏覽器：
    • IE、Firefox、Safari、Chrome、Opera。
    • 它們的瀏覽器內核（渲染引擎）：
      • IE--Trident、
      • FF(Mozilla)--Gecko、
      • Safari--Webkit、
      • Chrome--Blink（WebKit的分支）、
      • Opera--原爲Presto，現爲Blink。
    • 所以在開發中，兼容IE、FF、Opera（Presto引擎是逐步放棄的）、Chrome和Safari中的一種便可，Safari、Chrome的引擎是類似的。

7. 瀏覽器加載文件(repaint/reflow)

  • 文件加載順序
    • 瀏覽器加載頁面上引用的CSS、JS文件、圖片時，是按順序從上到下加載的，每一個瀏覽器能夠同時下載文件的個數不一樣，所以常常有網站將靜態文件放在不一樣的域名下，這樣能夠加快網站打開的速度。
  • reflow
    • 在加載JS文件時，瀏覽器會阻止頁面的渲染，所以將js放在頁面底部比較好。
    • 由於若是JS文件中有修改DOM的地方，瀏覽器會倒回去把已經渲染過的元素從新渲染一遍，這個回退的過程叫reflow。
    • CSS文件雖然不影響js文件的加載，可是卻影響js文件的執行，即便js文件內只有一行代碼，也會形成阻塞。由於可能會有var width = $('#id').width()這樣的語句，這意味着，js代碼執行前，瀏覽器必須保證css文件已下載和解析完成。
    • 辦法：當js文件不須要依賴css文件時，能夠將js文件放在頭部css的前面。
  • 常見的能引發reflow的行爲：
    • 1.改變窗囗大小
    • 2.改變文字大小
    • 3.添加/刪除樣式表
    • 4.腳本操做DOM
    • 5.設置style屬性
    • 等等……
  • reflow是不可避免的，只能儘可能減少，經常使用的方法有：
    • 1.儘可能不用行內樣式style屬性，操做元素樣式的時候用添加去掉class類的方式
    • 2.給元素加動畫的時候，能夠把該元素的定位設置成absolute或者fixed，這樣不會影響其餘元素
  • repaint
    • 另外，有個和reflow類似的術語，叫作repaint（重繪），在元素改變樣式的時候觸發，這個比reflow形成的影響要小，因此能觸發repaint解決的時候就不要觸發reflow……

8. 爲何利用多個域名來請求網絡資源會更有效？

  • 動靜分離需求，使用不一樣的服務器處理請求。處理動態內容的只處理動態內容，不處理別的，提升效率。CDN緩存更方便
  • 突破瀏覽器併發限制：相關問題： 瀏覽器同一時間能夠從一個域名下載多少資源？（即： 瀏覽器併發請求數）
    • 也就是說：同一時間針對同一域名下的請求有必定數量限制。超過限制數目的請求會被阻止。不一樣瀏覽器這個限制的數目不同。
  • Cookieless, 節省帶寬，尤爲是上行帶寬 通常比下行要慢。
    用戶的每次訪問，都會帶上本身的cookie ，挺大的。假如twitter 的圖片放在主站域名下，那麼用戶每次訪問圖片時，request header 裏就會帶有本身的cookie ，header 裏的cookie 還不能壓縮，而圖片是不須要知道用戶的cookie 的，因此這部分帶寬就白白浪費了。
  • 節約主域名的鏈接數，從而提升客戶端網絡帶寬的利用率，優化頁面響應。由於老的瀏覽器（IE6是典型），針對同一個域名只容許同時保持兩個HTTP鏈接。將圖片等資源請求分配到其餘域名上，避免了大圖片之類的並不必定重要的內容阻塞住主域名上其餘後續資源的鏈接（好比ajax請求）。
  • 避免沒必要要的安全問題( 上傳js竊取主站cookie之類的)

9. 進程和線程的區別

  • 一個程序至少有一個進程,一個進程至少有一個線程.
  • 線程的劃分尺度小於進程，使得多線程程序的併發性高。
  • 線程是獨立調度的基本單位, 進程是擁有資源的基本單位
  • 另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。
  • 線程在執行過程當中與進程仍是有區別的。
    • 每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。
    • 可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
  • 從邏輯角度來看，
    • 多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

10. 前端開發的優化問題

  • 前端開發的優化問題：
   　 (1) 減小http請求次數：css spirit,data uri
       (2) JS，CSS源碼壓縮
       (3) 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
       (4) 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能
       (5) 用setTimeout來避免頁面失去響應
       (6) 用hash-table來優化查找
       (7) 當須要設置的樣式不少時設置className而不是直接操做style 
       (8) 少用全局變量
       (9) 緩存DOM節點查找的結果
       (10) 避免使用CSS Expression
       (11) 圖片預載
       (12) 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢
  • 如何控制網頁在網絡傳輸過程當中的數據量
       （1）啓用GZIP壓縮
       （2）保持良好的編程習慣，避免重複的CSS，JavaScript代碼，多餘的HTML標籤和屬性
 

11. Flash、Ajax各自的優缺點，在使用中如何取捨?

  • Ajax的優點
　　(1) 可搜索型
　　(2) 開放性
　　(3) 費用
　　(4) 易用性
　　(5) 易於開發
  • Flash的優點
　　(1) 多媒體處理
　　(2) 兼容性
　　(3) 矢量圖形 比SVG，Canvas優點大不少
　　(4) 客戶端資源調度，好比麥克風，攝像頭

　　參考：前端開發的優化問題

 

2、CSS

1. CSS3

　　CSS3新特性：

  • 新增各類CSS選擇器   (: not(.input): 全部class不是「input」的節點）
  • 圓角border-radiuis
  • 多列布局：multi-column layout
  • 陰影和反射： multi-column layout
  • 文字特效：text-shadow
  • 線性漸變： gradient
  • 旋轉：transform
  • 縮放，定位，傾斜，動畫，多背景：transform: \scale(0.85,0.90) \ translate(0px, -30px) \ skew(-9deg, 0deg) \ Animation

　　參考：CSS3中的一些屬性

2. css居中的方式

　　參考：實現div的水平居中和垂直居中

3. 請寫一個簡單的幻燈效果頁面

4. 什麼是無樣式內容閃爍?如何避免?

答: 

  • what?
    • 若是使用import方法對CSS進行導入,會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC。
  • why?
    • 使用import導入樣式表
    • 將樣式表放在頁面底部
    • 有幾個樣式表,放在頁面不一樣位置
    • 緣由即:當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將中止以前的渲染。此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫的花屏現象。
  • how?
    • 使用LINK標籤將樣式表放在文檔HEAD中。

5. display:none 和 visibility: hidden的區別

  • display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。
  • visibility:hidden  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

6. 解釋浮動和工做原理

答:　　

  • 浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。
  • 假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。
  • 清除浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使咱們頁面後面的佈局不能正常顯示。
    • 關於清除浮動:清除浮動能夠理解爲打破橫向排列。 clear: none | left | right | both
    • 對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。

　　參考自: 經驗分享：CSS浮動(float,clear)通俗講解

7. 清除浮動

答:

  • 在浮動元素後面添加空標籤 clear:both
  • 給父標籤使用overflow: hidden/auto;zoom:1
  • 父級div定義, 使用僞類:after和zoom
1
2
.clearfloat:after{display:block;clear:both;content: "" ;visibility:hidden;height:0}
.clearfloat{zoom:1}

　　zoom:1的做用： 觸發IE下的hasLayout。zoom是IE瀏覽器專有屬性，能夠設置或檢索對象的縮放比例。

　　當設置了zoom的值以後，所設置的元素就會擴大或縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。

8. 解釋CSS Sprites, 以及你要如何使用?

答: CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

9. 你最喜歡的圖片替換方法是什麼，你如何選擇使用?

答:

　　1) <h1><img src="image.gif" alt="Image Replacement"></h1>　　

　　2) 移開文字:

1
2
3
4
< h1 >< span >Image Replacement</ span ></ h1 >
 
h1{ background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; }
span { display: none; }

　　　　注意問題:①結構性須要增長一個標籤包裹文本　　②須要把背景圖設置在外標籤上,並把文本外標籤隱藏.

　　　　缺點: 不利於閱覽器瀏覽網頁

　　3) text-indent屬性，而且給其設置一個較大的負值，x達到隱藏文本的效果

1
2
3
4
5
6
7
8
< h1  class="technique-three">w3cplus</ h1 >
 
.technique-three {
   width: 329px;
   height: 79px;
   background: url(images/w3cplus-logo.png);
   text-indent: -9999px;
}

　　4) 咱們此處使用一個透明的gif圖片，經過在img標籤中的「alt」屬性來彌補display:none。這樣閱讀器之類的就能閱讀到所替換的文本是什麼

複製代碼 
<h1 class="technique-five">
  <img src="images/blank.gif" alt="w3cplus" /<
  <span>w3cplus</span>
</h1>

.technique-five {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-five span {
  display: none;
}
複製代碼

　　5) 使用零高度來隱藏文本，但爲了顯示背景圖片，須要設置一個與替換圖片同樣的大小的padding值

1
2
3
4
5
6
7
8
9
10
< h1  class="technique-six">w3cplus</ h1 >
 
.technique-six {
   width: 329px;
   padding: 79px 0 0 0;
   height: 0px;
   font-size: 0;
   background: url(images/w3cplus-logo.png);
   overflow: hidden;
}

　　6) 經過把span的大小都設置爲「0」，來達到隱藏文本效果，這樣閱讀器就能徹底閱讀到，並且又達到了圖片替換文本的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< h1  class="technique-seven">
     < span >w3cplus</ span >
</ h1 >
 
.technique-seven {
   width: 329px;
   height: 79px;
   background: url(images/w3cplus-logo.png);
}
.technique-seven span {
   display: block;
   width: 0;
   height: 0;
   font-size: 0;
   overflow: hidden;
}  

　　7) 利用一個空白的span標籤來放置背景圖片，並對其進行絕對定位，使用覆蓋文本，達到隱藏替換文本的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< h1  class="technique-eight">
   < span ></ span >w3cplus
</ h1 >
 
.technique-eight {
   width: 329px;
   height: 79px;
   position: relative;
}
.technique-eight span {
   background: url(images/w3cplus-logo.png);
   position: absolute;
   width: 100%;
   height: 100%;
}

　　8) 設置字體爲微小值，但這裏須要注意一點不能忘了設置字體色和替換圖片色同樣，否則會有一個小點顯示出來

1
2
3
4
5
6
7
8
9
< h1  class="technique-nine">w3cplus</ h1 >
 
.technique-nine {
   width: 329px;
   height: 79px;
   background: url(images/w3cplus-logo.png);
   font-size: 1px;
   color: white;
}

　　9) 使用css的clip屬性來實現圖片替換文本的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< h1  class="technique-ten">< span >w3cplus</ span ></ h1 >
 
.technique-ten {
   width: 329px;
   height: 79px;
   background: url(images/w3cplus-logo.png);
}
             
.technique-ten span {
   border: 0 !important;
   clip: rect(1px 1px 1px 1px);
   clip: rect(1px,1px,1px,1px);
   height: 1px !important;
   margin: -1px;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   width: 1px;
}

　　參考自: 十種圖片替換文本CSS方法

10. 討論CSS hacks, 條件引用或者其餘

  • hacks　
    • _width針對於ie6。*width,+width針對於ie6,7。
    • color: red\9;/*IE8以及如下版本瀏覽器*/（可是測試能夠兼容到ie10。
    • *+html與*html是IE特有的標籤, firefox暫不支持.而*+html又爲IE7特有標籤（可是測試*html兼容ie6-10。*+兼容ie7-10）。
    • !important 在IE中會被忽視，ie6,7,8不識別，ie9+（包括ie9）是識別的。
  • 條件引用
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <!--[if !IE]><!-->  除IE外均可識別  <!--<![endif]-->
      <!--[if IE]> 全部的IE可識別 <![endif]-->
      <!--[if IE 6]> 僅IE6可識別 <![endif]-->
      <!--[if lt IE 6]> IE6以及IE6如下版本可識別 <![endif]-->
      <!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
      <!--[if IE 7]> 僅IE7可識別 <![endif]-->
      <!--[if lt IE 7]> IE7以及IE7如下版本可識別 <![endif]-->
      <!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
      <!--[if IE 8]> 僅IE8可識別 <![endif]-->
      <!--[if IE 9]> 僅IE9可識別 <![endif]-->

11. 如何爲有功能限制的瀏覽器提供網頁?

答: 功能限制的瀏覽器, 好比低版本IE, 手機瀏覽器, 等會在不少功能上不符合Web標準, 而應對方式主要有:

  • 只提供符合Web標準的頁面
  • 提供另外一個符合那些瀏覽器標準的頁面
  • 兼容: 兩種思路:
    • 漸進加強: 提供一個可用的原型，後來再爲高級瀏覽器提供優化
    • 優雅降級: 據高級瀏覽器提供一個版本，而後有功能限制的瀏覽器只須要一個恰好能用的版本
  • 相關技術:
    • Media Query
    • CSS hack
    • 條件判斷<! --[if !IE]><!-->除IE外均可識別<!--<![endif]-->

　　參考自: 如何爲有功能限制的瀏覽器提供網頁

12. 在書寫高效 CSS 時會有哪些問題須要考慮?

答: 

　　　　1）reset。參照下題「描述下 「reset」 CSS 文件的做用和使用它的好處」的答案。

　　　　2）規範命名。尤爲對於沒有語義化的html標籤，例如div，所賦予的class值要特別注意。

　　　　2）抽取可重用的部件，注意層疊樣式表的「優先級」。

13. 如何優化網頁的打印樣式?

　　針對打印機的樣式: @media print{...}

　　參考:如何優化網頁的打印樣式？  移動端H5知識普及 - CSS3媒體查詢

14. 描述下你曾經使用過的 CSS 預處理的優缺點

答: 優勢: 

  • 結構清晰, 便於擴展
  • 能夠方便屏幕瀏覽器私有語法差別
  • 能夠輕鬆實現多重繼承
  • 徹底兼容css代碼

　　參考: 再談 CSS 預處理器

　　　　  less學習筆記

15. 若是設計中使用了非標準的字體，你該如何去實現？ 

  • 圖片替代
  • web : fonts在線字庫
  • @font-face

　　參考: 若是設計中使用了非標準的字體，你該如何去實現？ 

16. 解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

做者：張靖超連接：https://www.zhihu.com/question/24959507/answer/29672263來源：知乎著做權歸做者全部，轉載請聯繫做者得到受權。
　　從後往前判斷。
　　瀏覽器先產生一個元素集合，這個集合每每由最後一個部分的索引產生（若是沒有索引就是全部元素的集合）。而後向上匹配，若是不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。
　　舉個例子，有選擇器： 
　　body.ready #wrapper > .lol233
　　先把全部 class 中有 lol233 的元素拿出來組成一個集合，而後上一層，對每個集合中的元素，若是元素的 parent id 不爲 #wrapper 則把元素從集合中刪去。 再向上，從這個元素的父元素開始向上找，沒有找到一個 tagName 爲 body 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。
　　至此這個選擇器匹配結束，全部還在集合中的元素知足。
　　大致就是這樣，不過瀏覽器還會有一些奇怪的優化。
　　爲何從後往前匹配由於效率和文檔流的解析方向。效率沒必要說，找元素的父親和以前的兄弟比遍歷所喲兒子快並且方便。關於文檔流的解析方向，是由於如今的 CSS，一個元素只要肯定了這個元素在文檔流以前出現過的全部元素，就能肯定他的匹配狀況。應用在即便 html 沒有載入完成，瀏覽器也能根據已經載入的這一部分信息 徹底肯定出現過的元素的屬性。
　　爲何是用集合主要也仍是效率。基於 CSS Rule 數量遠遠小於元素數量的假設和索引的運用，遍歷每一條 CSS Rule 經過集合篩選，比遍歷每個元素再遍歷每一條 Rule 匹配要快得多。

17. 解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。

答:

　　盒模型：文檔中的每一個元素被描繪爲矩形盒子，渲染引擎的目的就是斷定大小，屬性——好比它的顏色、背景、邊框方面——及這些盒子的位置。

　　在CSS中，這些矩形盒子用標準盒模型來描述。這個模型描述了一個元素所佔用的空間。每個盒子有四條邊界：外邊距邊界margin edge，邊框邊界border edge，內邊距邊界padding edge和內容邊界content edge。

　　內容區域是真正包含元素內容的區域，位於內容邊界的內部，它的大小爲內容寬度或content-box寬及內容高度或content-box高。若是box-sizing爲默認值，width、min-width、max-width、height、min-height和max-height控制內容大小。

　　內邊距區域padding area用內容可能的邊框之間的空白區域擴展內容區域。一般有背景——顏色或圖片（不透明圖片蓋住背景顏色）。

　　邊框區域擴展了內邊距區域。它位於邊框邊界內部，大小爲border-box寬和border-box高。

　　外邊距區域margin area用空白區域擴展邊框區域，以分開相鄰的元素。它的大小爲margin-box的高寬。

　　在外邊距合併的狀況下，因爲盒之間共享外邊距，外邊距不容易弄清楚。

　　對於非替換的行內元素來講，儘管內容周圍存在內邊距與邊框，但其佔用空間（行高）由line-height屬性決定。

 

　　盒子模型分爲兩類：W3C標準盒子模型和IE盒子模型 （微軟確實不喜歡服從他家的標準）

　　這二者的關鍵差異就在於：

    • W3C盒子模型——屬性高（height）和屬性寬（width）這兩個值不包含 填充（padding）和邊框（border　　）
    • IE盒子模型——屬性高（height）和屬性寬（width）這兩個值包含 填充（padding）和邊框（border）

　　咱們在編寫頁面代碼的時候應該儘可能使用標準的W3C盒子模型（須要在頁面中聲明DOCTYPE類型）。

　　各瀏覽器盒模型的組成結構是一致的，區別只是在"怪異模式"下寬度和高度的計算方式，而「標準模式」下則沒有區別。組成結構以寬度爲例：總寬度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C標準盒子模型）。頁面在「怪異模式」下，css中爲元素的width和height設置的值在標準瀏覽器和ie系列(ie9除外)裏的表明的含義是不一樣的（IE盒子模型）。 

   　於是解決兼容型爲題最簡潔和值得推薦的方式是：下述的第一條。 

  1. 將頁面設爲「標準模式」。添加對應的dtd標識
  2. 使用hack或者在外面套上一層wrapper 

　　參考: 解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。

　　　　　MSDN：盒模型

18. 僞類的用法：

　　參考：CSS中僞類及僞元素用法詳解

19. 描述下"reset"css文件的做用和使用它的好處

　　reset.css可以重置瀏覽器的默認屬性。不一樣的瀏覽器具備不一樣的樣式，重置可以使其統一。好比說ie瀏覽器和FF瀏覽器下button顯示不一樣，經過reset可以統同樣式，顯示相同的效果。可是不少reset是不必的，多寫了會增長瀏覽器在渲染頁面的負擔。

　　好比說，

　　　　1）咱們不該該對行內元素設置無效的屬性，對span設置width和height，margin都不會生效的。

　　　　2）對於absolute和fixed定位的固定尺寸（設置了width和height屬性），若是設置了top和left屬性，那麼bottom和right，margin和float就沒有做用。

　　　　3）後面設置的屬性將會覆蓋前面重複設置的屬性。 

  • 期待可以指出它的負面影響，或者提到它的一個更好的替換者"normalize"   normalize.css是一個能夠定製的css文件，它讓不一樣的瀏覽器在渲染元素時形式更統一。

20. 請解釋一下 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？

　　說到 IE 的 bug，在 IE6之前的版本中，IE對盒模型的解析出現一些問題，跟其它瀏覽器不一樣，將 border 與 padding 都包含在 width 以內。而另一些瀏覽器則與它相反，是不包括border和padding的。對於IE瀏覽器，當咱們設置 box-sizing: content-box; 時，瀏覽器對盒模型的解釋聽從咱們以前認識到的 W3C 標準，當它定義width和height時，它的寬度不包括border和padding；對於非IE瀏覽器，當咱們設置box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6以前的版本相同，當它定義width和height時，border和padding則是被包含在寬高以內的。內容的寬和高能夠經過定義的「width」和 「height」減去相應方向的「padding」和「border」的寬度獲得。內容的寬和高必須保證不能爲負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小爲0。

　　使用 * { box-sizing: border-box; }可以統一IE和非IE瀏覽器之間的差別。

21. block, inline和inline-block的區別

答:

  • 起新行
    • block元素會獨佔一行, 多個block元素會各自新起一行. 默認狀況下, block元素寬度自動填滿其父元素寬度
    • inline元素不會獨佔一行, 多個相鄰的行內元素會排列在同一行裏, 直到一行排列不下, 纔會新換一行, 其寬度隨元素的內容而變化
  • 設置寬高
    • block元素能夠設置width, height屬性. 塊級元素即便設置了寬度, 仍然獨佔一行
    • inline元素設置width, height無效
  • 內外邊距
    • block元素能夠設置margin和padding屬性
    • inline元素的margin和padding屬性,水平方向的padding-left, padding-right, margin-left, margin-right都會產生邊距效果. 可是數值方向的 margin/padding-top/bottom不會產生邊距效果
  • 包含
    • block能夠包含inline和block元素,而inline元只能包含inline元素
  • 而display: inline-block, 則是將對象呈現爲inline對象, 可是對象的內容做爲block對象呈現. 以後的內聯對象會被排列到一行內. 好比咱們能夠給一個link(a元素)inline-block的屬性, 使其既有block的高寬特性又有inline的同行特性

22. css動畫和js動畫的優缺點

　　CSS3的動畫

  • 優勢：
    • 1.在性能上會稍微好一些，瀏覽器會對CSS3的動畫作一些優化（好比專門新建一個圖層用來跑動畫）
    • 2.代碼相對簡單
  • 缺點：
    • 1.在動畫控制上不夠靈活
    • 2.兼容性很差
    • 3.部分動畫功能沒法實現（如滾動動畫，視差滾動等）

　　JavaScript的動畫

  • 優勢：
    • 1.控制能力很強，能夠單幀的控制、變換
    • 2.兼容性好，寫得好徹底能夠兼容IE6，且功能強大。
  • 缺點：
    • 計算沒有css快，另外常常須要依賴其餘的庫。

　結論

  • 因此，不復雜的動畫徹底能夠用css實現，複雜一些的，或者須要交互的時候，用js會靠譜一些~

23. 你用過媒體查詢，或針對移動端的佈局/CSS 嗎？

答: 

　　經過媒體查詢能夠爲不一樣大小和尺寸的媒體定義不一樣的css，適合相應的設備顯示；即響應式佈局

  • @media screen and (min-width: 400px) and (max-width: 700px) { … }
  • @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

　　參考自: CSS3媒體查詢  使用 CSS 媒體查詢建立響應式網站  《響應式Web設計實踐》學習筆記

24. 有哪些隱藏內容的方法(同時還要保證屏幕閱讀器可用)

答：

　　display:none或者visibility:hidden，overflow:hidden。

 

  • 1.display:none;的缺陷
    • 搜索引擎可能認爲被隱藏的文字屬於垃圾信息而被忽略
    • 屏幕閱讀器（是爲視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。
  • 2.visibility: hidden ;的缺陷
    • 隱藏的內容會佔據他所應該佔據物理空間
  • 3.overflow:hidden;一個比較合理的方法
    • 例：.texthidden { display:block; overflow: hidden; width: 0; height: 0; }
      • 將寬度和高度設定爲0，而後超過部分隱藏，就會彌補上述1、二方法中的缺陷，也達到了隱藏內容的目的

 25. CSS選擇器級別

  • 1.若是樣式是行內樣式（經過Style=」」定義），那麼a=1
  • 2.b爲ID選擇器的總數
  • 3.c爲Class類選擇器的數量。
  • 4.d爲類型選擇器的數量
  • 5.屬性選擇器，僞類選擇器和class類選擇器優先級同樣，僞元素選擇器和類型選擇器同樣
  • 6.!important 權重最高，比 inline style 還要高。

　　通常來說，越詳細的級別越高。CSS優先級包含四個級別（文內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數。根據這四個級別出現的次數計算獲得CSS的優先級

　　參考： CSS樣式選擇器優先級

 26. img設置屬性title和alt的區別?

答: 

  • Alt是img的特有屬性, 或與<input type="image">配合使用，規定圖像的替代文本. 若是沒法顯示圖像, 瀏覽器將顯示替代文本. 用於圖片沒法加載顯示、讀屏器閱讀圖片，可提升圖片可 訪問性，搜索引擎會重點分析。最長可包含1024個字符,
  •  Title爲元素提供附加的提示信息，用於鼠標滑到元素上的時候顯示。其值能夠比alt屬性值設置的更長, 可是有些瀏覽器會截斷過長的文字.

　　

27. 知道BFC嗎? 

答: BFC指的是Block Formatting Context, 它提供了一個環境, html元素在這個環境中按照必定規則進行佈局. 一個環境中的元素不會影響到其餘環境中的佈局. 決定了元素如何對其內容進行定位, 以及和其餘元素的關係和相互做用.

　　其中: FC(Formatting Context): 指的是頁面中的一個渲染區域, 而且擁有一套渲染規則, 它決定了其子元素如何定位, 以及與其餘元素的相互關係和做用.

　　BFC: 塊級格式化上下文, 指的是一個獨立的塊級渲染區域, 只有block-level box參與, 該區域擁有一套渲染規則來約束塊級盒子的佈局, 且與區域外部無關.

  • BFC的生成:
    • 根元素
    • float的值不爲none
    • overflow的值不爲visible
    • display的值爲 inline-block, table-cell, table-caption
    • position的值爲absolute或fixed
  • BFC的約束規則
    • 生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會摺疊。
    • 生成BFC元素的子元素中，每個子元素作外邊距與包含塊的左邊界相接觸，（對於從右到左的格式化，右外邊距接觸右邊界），即便浮動元素也是如此（儘管子元素的內容區域會因爲浮動而壓縮），除非這個子元素也建立了一個新的BFC（如它自身也是一個浮動元素）。
    • 分解:
      1. 內部的Box會在垂直方向上一個接一個的放置
      2. 垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）
      3. 每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）
      4. BFC的區域不會與float的元素區域重疊
      5. 計算BFC的高度時，浮動子元素也參與計算
      6. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然
  • BFC在佈局中的應用
    • 不和浮動元素重疊:
      • 若是一個浮動元素後面跟着一個非浮動元素, 就會產生覆蓋
    • 防止margin重疊:
      • 同一個BFC中的兩個相鄰Box纔會發生重疊與方向無關，不過因爲上文提到的第一條限制，咱們甚少看到水平方向的margin重疊。這在IE中是個例外，IE能夠設置write-mode
    • 解決浮動相關問題
      • 父元素: overflow:hidden    IE: zoom:1(hasLayout)
      • 根本緣由在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題。實際上只要讓父元素生成BFC便可，並不僅有這兩種方式。
    • 多欄佈局
      • 好比左右兩欄寬度固定, 中間欄自適應 則中間欄設置 overflow:hidden生成BFC
  • IE中相似概念: hasLayout

　　參考: 我對BFC的理解   CSS BFC和IE Haslayout介紹

28. 行內元素有哪些？塊級元素有哪些？空元素有哪些？

答：

  • 行內元素有：span img input select strong
  • 塊級元素有：div ul ol dl dt dd h1 h2 h3 h4 p...
  • 常見的空元素：br hr img input link meta  base area command embed keygen param source track wbr....

3、html

1. h5的改進:

  • 新元素
    • 畫布canvas: HTML5 <canvas> 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成
    • 音頻audio
    • 視頻video
    • 語義性: article,  nav ,  footer, section, aside, hgroup等.
    • 時間time
  • 新屬性
    • 拖放: draggable   <img draggable="true">
    • 可編輯: contenteditable
  • 新事件
    • 拖放 ondrag ondrop
    • 關閉頁面 onunload
    • 窗口大小改變 onresize
  • 取消了一些元素: font center等
  • 新的DOCTYPE聲明  <!DOCTYPE html> 
  • 徹底支持CSS3
  • Video和Audio
  • 2D/3D製圖
  • 本地存儲
  • 本地SQL數據
  • Web應用

　　參考自: 猿教程

2. 什麼是語義化的html?

答: 

  • what?
    • 根據內容的結構（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
  • why?
    • 爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
    • 用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
    • 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重
    • 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
    • 便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。
  • how?
    • 儘量少的使用無語義的標籤div和span；
    • 在語義不明顯時，既能夠使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
    • 不要使用純樣式標籤，如：b、font、u等，改用css設置。
    • 須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
    • 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
    • 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
    • 每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

　　參考自: 理解HTML語義化

 

3. 從前端角度出發談談作好seo須要考慮什麼?

答: 

  • 語義化html標籤
  • 合理的title, description, keywords;
  • 重要的html代碼放前面
  • 少用iframe, 搜索引擎不會抓取iframe中的內容
  • 圖片加上alt

4. 文檔類型(DOCTYPE)

答:

  • 做用: doctype聲明位於文檔中最前面的位置，處於標籤以前，告知瀏覽器使用的是哪一種規範。
  • 類型: 三種: Strict、Transitional 以及 Frameset 
  • 若是不聲明: 不寫doctype，瀏覽器會進入quirks mode （混雜模式）。即，若是不聲明doctype，瀏覽器不引入w3c的標準，那麼早期的瀏覽器會按照本身的解析方式渲染頁面。瀏覽器採用自身方式解析頁面的行爲稱爲"quirks mode（混雜模式也稱怪異模式）"；採用w3c方式解析就是"strict mode（標準模式）"。 若是徹底採用strictmode就不會出任何的差錯，但這樣會下降程序的容錯率，加劇開發人員的難度
  • 用哪一種: 
    • 沒有doctype聲明的採用quirks mode解析
    • 對於有doctype的大多數採用standard mord。
    • 特殊狀況：
      • 對於那些瀏覽器不能識別的doctype ,瀏覽器採用quirks mode；
      • 沒有聲明DTD或者html版本聲明低於4.0採用quirks mode，其餘使用standard mode；
      • ie6中，若是在doctype聲明前有一個xml聲明(好比:<?xml version="1.0" encoding="iso-8859-1"?>)，則採用quirks mode解析
  • 標準模式與怪異模式的區別:
    • 標準模式：瀏覽器根據規範呈現頁面
    • 混雜模式（怪異模式）：頁面以一種比較寬鬆的兼容方式顯示。
    • 他們最大的不一樣是對盒模型的解析。
      • 在strict mode中 ：width是內容寬度 ，也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;
      • 在quirks mode中 ：width則是元素的實際寬度 ，內容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)

5. 使用XHTML的侷限有哪些?

　　答：

  • XHTML較爲嚴格，標籤必須閉合，必需要body，head等
  • 若是頁面使用 'application/xhtml+xml' 一些老的瀏覽器並不兼容

6. 若是網頁內容須要多語言,要怎麼作?

　　答: 採用統一編碼utf-8模式

　　參考自: 多語言的網站怎麼作呀 多語言網站設計須要注意的問題  

7. data-*屬性的做用

  • html5規範裏增長了一個自定義data屬性
  • 爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取
    <div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
    div.dataset.commentNum; // 可經過js獲取 10
  • data-爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取。ppk提到過使用rel屬性，lightbox庫推廣了rel屬性，HTML5提供了data-作替代，這樣能夠更好 地使用自定義的屬性
  • 須要注意的是，data-以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。

8. 若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？

答: 

　　　　1）Web Storage API
　　　　2）基於位置服務LBS
　　　　3）無插件播放音頻視頻
　　　　4）調用相機和GPU圖像處理單元等硬件設備
　　　　5）拖拽和Form API

9. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

答:

  • cookie:
    • cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
    • cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
  • sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
  • 存儲大小：
    • cookie數據大小不能超過4k。
    • sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
  • 有期時間：
    • localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
    • sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
    • cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
  • 做用域不一樣:
    • sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
    • localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。
  • Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。
  • Web Storage 的 api 接口使用更方便。
  View Code

10. 瀏覽器本地存儲與服務器端存儲之間的區別

  • 其實數據既能夠在瀏覽器本地存儲，也能夠在服務器端存儲。
  • 瀏覽器端能夠保存一些數據，須要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。
  • 服務器端也能夠保存全部用戶的全部數據，但須要的時候瀏覽器要向服務器請求數據。
    • 1.服務器端能夠保存用戶的持久數據，如數據庫和雲存儲將用戶的大量數據保存在服務器端。
    • 2.服務器端也能夠保存用戶的臨時會話數據。服務器端的session機制，如jsp的 session 對象，數據保存在服務器上。實現上，服務器和瀏覽器之間僅需傳遞session id便可，服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期。
  • 服務器端保存全部的用戶的數據，因此服務器端的開銷較大，而瀏覽器端保存則把不一樣用戶須要的數據分佈保存在用戶各自的瀏覽器中。
  • 瀏覽器端通常只用來存儲小數據，而服務器能夠存儲大數據或小數據。
  • 服務器存儲數據安全一些，瀏覽器只適合存儲通常數據。

11. sessionStorage和頁面js數據對象的區別

答:

  • 頁面中通常的 js 對象或數據的生存期是僅在當前頁面有效，所以刷新頁面或轉到另外一頁面這樣的從新加載頁面的狀況，數據就不存在了。
  • 而sessionStorage 只要同源的同學口（或tab）中，刷新頁面或進入同源的不一樣頁面，數據始終存在。也就是說只要這個瀏覽器窗口沒有關閉，加載新頁面或從新加載，數據仍然存在。

 12. canvas和svg的區別?

答: 

  • svg: 
    • SVG是一種使用XML描述2D圖形的語言
    • SVG基於XML, 這意味着SVG DOM中的每一個元素都是可用的. 因此能夠爲每一個元素附加JavaScript事件處理器
    • 在SVG中, 每一個被繪製的圖像均被視爲對象. 若是SVG對象的屬性發生變化, 那麼瀏覽器可以自動重現圖像
  • Canvas
    • Canvas經過js來繪製2D圖形
    • Canvas是逐像素進行渲染的
    • 在Canvas中, 一旦圖形被繪製完成, 它就不會繼續獲得瀏覽器的關注. 若是其位置發生變化, 那麼整個場景也須要從新繪製, 包括任何或許已被圖形覆蓋的對象.
  • 區別
    • Canvas支持分辨率, SVG不支持
    • Canvas不支持事件處理器, SVG支持
    • Canvas只有弱的文本渲染能力, 而SVG最適合帶有大型渲染區域的應用程序(好比谷歌地圖)
    • Canvas可以以.png或.jpg格式保存結果圖像
    • SVG的複雜度太高的話會減慢渲染速度(任何過分使用DOM的應用都不快)
    • Canvas最適合圖像密集型的遊戲, 其中的許多對象會被頻繁重繪. 而SVG不適合遊戲應用
    • Canvas是基於位圖的圖像,它不可以改變大小, 只能縮放顯示; SVG是基於矢量的, 因此它可以很好地處理圖形大小的改變　　　　
    • Canvas提供的功能更原始, 適合像素處理, 動態渲染和大數據量繪製; SVG功能更完善, 適合靜態圖片顯示, 高保真文檔查看和打印的應用場景
    • 繪製Canvas對象後, 不能使用腳本和CSS對它進行修改; 而SVG對象是文檔對象模型的一部分, 因此能夠隨時使用腳本和CSS修改它們

13. src和href的區別?

答: 

  • src指向外部資源的位置, 用於替換當前元素, 好比js腳本, 圖片等元素
  • href指向網絡資源所在的位置, 用於在當前文檔和引用資源間肯定聯繫, 加載css

4、js

1. ajax, 跨域, jsonp

　　參考： 《JavaScript》高級程序設計第21章：Ajax和Comet

　　　　　js跨域

　　　　　jQuery中Ajax操做

2. apply和call的用法和區別:

  • 用法: 都能繼承另外一個對象的方法和屬性,區別在於參數列表不同
  • 區別:
    • Function.apply(obj, args) args是一個數組,做爲參數傳給Function
    • Function.call(obj, arg1, arg2,...)  arg*是參數列表
    • apply一個妙用: 能夠將一個數組默認的轉化爲一個參數列表
      • 舉個栗子: 有一個數組arr要push進一個新的數組中去, 若是用call的話須要把數組中的元素一個個取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)

　　參考自: 區別和詳解：js中call()和apply()的用法

3. bind函數的兼容性

  • 用法:
    • bind()函數會建立一個新函數, 爲綁定函數。當調用這個綁定函數時,綁定函數會以建立它時傳入bind方法的第一個參數做爲this,傳入bind方法的第二個以及之後的參數加上綁定函數運行時自己的參數按照順序做爲原函數的參數來調用原函數.
    • 一個綁定函數也能使用new操做符建立對象：這種行爲就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。　　

4. 解釋下事件代理

答: 事件委託利用了事件冒泡, 只指定一個事件處理程序, 就能夠管理某一類型的全部事件.

例: 

html部分: 要點擊li彈出其id

複製代碼 
<ul id="list">
    <li id="li-1">Li 2</li>
    <li id="li-2">Li 3</li>
    <li id="li-3">Li 4</li>
    <li id="li-4">Li 5</li>
    <li id="li-5">Li 6</li>
    <li id="li-6">Li 7</li>
</ul>
複製代碼

 

複製代碼 
//js部分
document.getElementById("list").addHandler("click", function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName.toUpperCase == "LI"){
        console.log("List item", e,target.id, "was clicked!");
    }
});
複製代碼

 

 

5. 解釋下js中this是怎麼工做的?

答: 

　　this 在 JavaScript 中主要由如下五種使用場景。

  • 做爲函數調用，this 綁定全局對象，瀏覽器環境全局對象爲 window 。
  • 內部函數內部函數的 this 也綁定全局對象，應該綁定到其外層函數對應的對象上，這是 JavaScript的缺陷，用that替換。
  • 做爲構造函數使用，this 綁定到新建立的對象。
  • 做爲對象方法使用，this 綁定到該對象。
  • 使用apply或call調用 this 將會被顯式設置爲函數調用的第一個參數。

6. 繼承

　　參考：js怎麼實現繼承？

 

7. AMD vs. CommonJS？

答: AMD是依賴提早加載,CMD是依賴延時加載

 

8. 什麼是哈希表?

答:  哈希表（Hash table，也叫散列表），是根據關鍵碼值(Key value)而直接進行訪問的數據結構。也就是說，它經過把關鍵碼值映射到表中一個位置來訪問記錄，以加快查找的速度。這個映射函數叫作散列函數，存放記錄的數組叫作散列表。

　　使用哈希查找有兩個步驟:

  1. 使用哈希函數將被查找的鍵轉換爲數組的索引。在理想的狀況下，不一樣的鍵會被轉換爲不一樣的索引值，可是在有些狀況下咱們須要處理多個鍵被哈希到同一個索引值的狀況。因此哈希查找的第二個步驟就是處理衝突
  2. 處理哈希碰撞衝突。有不少處理哈希碰撞衝突的方法，好比拉鍊法和線性探測法。

 

元素特徵轉變爲數組下標的方法就是散列法。散列法固然不止一種，下面列出三種比較經常使用的：

1，除法散列法 
最直觀的一種，上圖使用的就是這種散列法，公式： 
      index = value % 16 
學過彙編的都知道，求模數實際上是經過一個除法運算獲得的，因此叫「除法散列法」。

2，平方散列法 
求index是很是頻繁的操做，而乘法的運算要比除法來得省時（對如今的CPU來講，估計咱們感受不出來），因此咱們考慮把除法換成乘法和一個位移操做。公式： 
      index = (value * value) >> 28   （右移，除以2^28。記法：左移變大，是乘。右移變小，是除。） 
若是數值分配比較均勻的話這種方法能獲得不錯的結果，但我上面畫的那個圖的各個元素的值算出來的index都是0——很是失敗。也許你還有個問題，value若是很大，value * value不會溢出嗎？答案是會的，但咱們這個乘法不關心溢出，由於咱們根本不是爲了獲取相乘結果，而是爲了獲取index。

3，斐波那契（Fibonacci）散列法

 

解決衝突的方法:

1. 拉鍊法

　　將大小爲M 的數組的每個元素指向一個條鏈表，鏈表中的每個節點都存儲散列值爲該索引的鍵值對，這就是拉鍊法.

　　對採用拉鍊法的哈希實現的查找分爲兩步，首先是根據散列值找到等一應的鏈表，而後沿着鏈表順序找到相應的鍵。

2. 線性探測法: 

　　使用數組中的空位解決碰撞衝突

 

參考: 哈希表的工做原理  　淺談算法和數據結構: 十一 哈希表

 

9. 什麼是閉包? 閉包有什麼做用?

答:

  • 閉包是指有權訪問另外一個函數做用域中的變量的函數. 建立閉包常見方式,就是在一個函數內部建立另外一個函數.
  • 做用: 
    • 匿名自執行函數  (function (){ ... })();   建立了一個匿名的函數，並當即執行它，因爲外部沒法引用它內部的變量，所以在執行完後很快就會被釋放，關鍵是這種機制不會污染全局對象。
    • 緩存, 可保留函數內部的值
    • 實現封裝
    • 實現模板

　　參考自: js閉包的用途

10. 僞數組: 

  • 什麼是僞數組: 
    • 僞數組是能經過Array.prototype.slice 轉換爲真正的數組的帶有length屬性的對象
    • 好比arguments對象,還有像調用getElementsByTagName,document.childNodes之類的，它們都返回NodeList對象都屬於僞數組
    • 咱們能夠經過Array.prototype.slice.call(fakeArray)將僞數組轉變爲真正的Array對象: 返回新數組而不會修改原數組　　

　　參考: 僞數組

11. undefined和null的區別, 還有undeclared:

  • null表示沒有對象, 即此處不應有此值. 典型用法:

    • （1） 做爲函數的參數，表示該函數的參數不是對象。

    • （2） 做爲對象原型鏈的終點。

    •  ( 3 )   null能夠做爲空指針. 只要意在保存對象的值尚未真正保存對象,就應該明確地讓該對象保存null值.
  • undefined表示缺乏值, 即此處應該有值, 但還未定義.

    • （1）變量被聲明瞭，但沒有賦值時，就等於undefined。

      （2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

      （3）對象沒有賦值的屬性，該屬性的值爲undefined。

      （4）函數沒有返回值時，默認返回undefined。

  • undeclared即爲被污染的命名, 訪問沒有被聲明的變量, 則會拋出異常, 終止執行. 即undeclared是一種語法錯誤

　　參考: undefined與null的區別

12. 事件冒泡機制:　　

從目標元素開始，往頂層元素傳播。途中若是有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。若是想阻止事件起泡，能夠使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

13. 解釋下爲何接下來這段代碼不是 IIFE(當即調用的函數表達式)：function foo(){ }();?

答: 

　　而函數定義（語句以function關鍵字開始）是不能被當即執行的，這無疑會致使語法的錯誤（SyntaxError）。當函數定義代碼段包裹在括號內，使解析器能夠將之識別爲函數表達式，而後調用。IIFE:  (function foo(){})()　

　　區分  (function(){})(); 和  (function(){}());  其實二者實現效果同樣。
　　函數字面量：首先聲明一個函數對象，而後執行它。(function () { alert(1); })();

　　優先表達式：因爲Javascript執行表達式是從圓括號裏面到外面，因此能夠用圓括號強制執行聲明的函數。(function () { alert(2); }());

14. "attribute" 和 "property" 的區別是什麼？

答: 

　　DOM元素的attribute和property二者是不一樣的東西。attribute翻譯爲「特性」，property翻譯爲「屬性」。
　　attribute是一個特性節點，每一個DOM元素都有一個對應的attributes屬性來存放全部的attribute節點，attributes是一個類數組的容器，說得準確點就是NameNodeMap，不繼承於Array.prototype，不能直接調用Array的方法。attributes的每一個數字索引以名值對(name=」value」)的形式存放了一個attribute節點。<div class="box" id="box" gameid="880">hello</div>

　　property就是一個屬性，若是把DOM元素當作是一個普通的Object對象，那麼property就是一個以名值對(name=」value」)的形式存放在Object中的屬性。要添加和刪除property和普通的對象相似。

　　不少attribute節點還有一個相對應的property屬性，好比上面的div元素的id和class既是attribute，也有對應的property，無論使用哪一種方法均可以訪問和修改。

　　總之，attribute節點都是在HTML代碼中可見的，而property只是一個普通的名值對屬性。

15. 請指出 document load 和 document ready 兩個事件的區別。

  • document.ready和onload的區別——JavaScript文檔加載完成事件。頁面加載完成有兩種事件:
    • 一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）
    • 二是onload，指示頁面包含圖片等文件在內的全部元素都加載完成。
  • jQuery中$(function(){/* do something*/});他的做用或者意義就是:在DOM加載完成後就能夠能夠對DOM進行操做。通常狀況先一個頁面響應加載的順序是，域名解析-加載html-加載js和css-加載圖片等其餘信息。

16. 什麼是use strict? 其好處壞處分別是什麼?

答: 

　　在全部的函數 (或者全部最外層函數) 的開始處加入 "use strict"; 指令啓動嚴格模式。

　　"嚴格模式"有兩種調用方法

　　　　　　1）將"use strict"放在腳本文件的第一行，則整個腳本都將以"嚴格模式"運行。若是這行語句不在第一行，則無效，整個腳本以"正常模式"運行。若是不一樣模式的代碼文件合併成一個文件，這一點須要特別注意。

　　　　　　2）將整個腳本文件放在一個當即執行的匿名函數之中。

 　　　　好處

　　　　　　- 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

　　　　　　- 消除代碼運行的一些不安全之處，保證代碼運行的安全；

　　　　　　- 提升編譯器效率，增長運行速度；

　　　　　　- 爲將來新版本的Javascript作好鋪墊。

　　　　壞處　

　　　　　　一樣的代碼，在"嚴格模式"中，可能會有不同的運行結果；一些在"正常模式"下能夠運行的語句，在"嚴格模式"下將不能運行　

17. 瀏覽器端的js包括哪幾個部分?

　　答: 核心( ECMAScript) , 文檔對象模型(DOM), 瀏覽器對象模型(BOM)

18. DOM包括哪些對象?

　　答: DOM是針對HTML和XML文檔的一個API(應用程序編程接口). DOM描繪了一個層次化的節點樹, 容許開發人員添加, 移除和修改頁面的某一部分.

  • 經常使用的DOM方法:
    • getElementById(id)
    • getElementsByTagName()
    • appendChild(node)
    • removeChild(node)
    • replaceChild()
    • insertChild()
    • createElement()
    • createTextNode()
    • getAttribute()
    • setAttribute()
  • 經常使用的DOM屬性
    • innerHTML  節點(元素)的文本值
    • parentNode  節點(元素)的父節點
    • childNodes 
    • attributes   節點(元素)的屬性節點

　　參考:  HTML DOM 方法

19. js有哪些基本類型?

　　答: Undefined, Null, Boolean, Number, String

　　　　Object是複雜數據類型, 其本質是由一組無序的名值對組成的.

20. 基本類型與引用類型有什麼區別?

　　答: 

  • 基本類型如上題所示. 引用類型則有: Object, Array, Date, RegExp, Function
  • 存儲
    • 基本類型值在內存中佔據固定大小的空間,所以被保存在棧內存中
    • 引用類型的值是對象, 保存在堆內存中. 包含引用類型的變量實際上包含的並非對象自己, 而是一個指向改對象的指針　
  • 複製
    • 從一個變量向另外一個變量複製基本類型的值, 會建立這個值的一個副本
    • 從一個變量向另外一個變量複製引用類型的值, 複製的實際上是指針,　所以兩個變量最終都指向同一個對象
  • 檢測類型
    • 肯定一個值是哪一種基本類型能夠用typeof操做符,
    • 而肯定一個值是哪一種引用類型能夠使用instanceof操做符　　　　　　　

　　參考: 《JavaScript高級程序設計》

21. 關於js的垃圾收集例程

　　js是一門具備自動垃圾回收機制的編程語言,開發人員沒必要關心內存分配和回收問題

  • 離開做用域的值將被自動標記爲能夠回收, 所以將在垃圾收集期間被刪除
  • "標記清除"是目前主流的垃圾收集算法, 這種算法的思路是給當前不使用的值加上標記, 而後再回收其內存
  • 另外一種垃圾收集算法是"引用計數", 這種算法的思想是跟蹤記錄全部值被引用的次數. js引擎目前都再也不使用這種算法, 但在IE中訪問非原生JS對象(如DOM元素)時, 這種算法仍然可能會致使問題
  • 當代碼中存在循環引用現象時, "引用計數" 算法就會致使問題
  • 解除變量的引用不只有助於消除循環引用現象, 並且對垃圾收集也有好處. 爲了確保有效地回收內存, 應該及時解除再也不使用的全局對象, 全局對象屬性以及循環引用變量的引用

22. ES5中, 除了函數,什麼可以產生做用域?

答: try-catch 和with延長做用域. 由於他們都會建立一個新的變量對象. 

　　這兩個語句都會在做用域鏈的前端添加一個變量對象. 對with語句來講, 會將指定的對象添加到做用域鏈中. 對catch語句來講, 會建立一個新的變量對象, 其中包含的是被拋出的錯誤對象的聲明.

  • 當try代碼塊中發生錯誤時，執行過程會跳轉到catch語句，而後把異常對象推入一個可變對象並置於做用域的頭部。在catch代碼塊內部，函數的全部局部變量將會被放在第二個做用域鏈對象中。請注意，一旦catch語句執行完畢，做用域鏈機會返回到以前的狀態。try-catch語句在代碼調試和異常處理中很是有用，所以不建議徹底避免。你能夠經過優化代碼來減小catch語句對性能的影響。一個很好的模式是將錯誤委託給一個函數處理
  • with(object) {statement}。它的意思是把object添加到做用域鏈的頂端
    • e.g.
    • 複製代碼 
      function buildUrl(){
    var qs = "?debug=true";
   
    //with接收location對象, 所以其變量對象中就包含了location對象的全部屬性和方法, 而這個變量對象被添加到了做用域鏈的前端
    with(location){
        //這裏的href實際上是location.href. 建立了一個名爲url的變量, 就成了函數執行環境的一部分
        var url = href + qs;
    }
       
    return url;
}
      複製代碼

       

　　參考: js try、catch、finally語句還有with語句  JavaScript 開發進階：理解 JavaScript 做用域和做用域鏈

23. js有幾種函數調用方式?

答: 

  • 方法調用模型    var obj = { func : function(){};}    obj.func()
  • 函數調用模式　　var func = function(){}    func();
  • 構造器調用模式  
  • apply/ call調用模式

24. 描述事件模型?IE的事件模型是怎樣的？事件代理是什麼？事件代理中怎麼定位實際事件產生的目標？

答: 　捕獲->處於目標->冒泡，IE應該是隻有冒泡沒有捕獲。
　　  事件代理就是在父元素上綁定事件來處理，經過event對象的target來定位。

25. js動畫有哪些實現方法?

答: 用定時器 setTimeout和setInterval

26. 還有什麼實現動畫的方法?

答:

  • js動畫: 使用定時器
  • CSS : transition , animation
    • transition 包含4種屬性：transition-delaytransition-durationtransition-propertytransition-timing-function，對應動畫的4種屬性： 延遲、持續時間、對應css屬性和緩動函數，

    • transform 包含7種屬性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state，它們能夠定義動畫名稱，持續時間，緩動函數，動畫延遲，動畫方向，重複次數，填充模式。

  • HTML5 動畫
    • canvas
    • svg
    • webgl

　　參考自: 前端動畫效果實現的簡單比較

27. 面向對象有哪幾個特色? 

答: 封裝, 繼承, 多態

28. 如何判斷屬性來自自身對象仍是原型鏈?

答: hasOwnPrototype

29. ES6新特性

答: 

　　1) 箭頭操做符 inputs=>outputs: 操做符左邊是輸入的參數，而右邊則是進行的操做以及返回的值

　　2) 支持類, 引入了class關鍵字. ES6提供的類實際上就是JS原型模式的包裝

　　3) 加強的對象字面量. 

　　　　1. 能夠在對象字面量中定義原型  __proto__: xxx  //設置其原型爲xxx,至關於繼承xxx

　　　　2. 定義方法能夠不用function關鍵字

　　　　3. 直接調用父類方法

　　4) 字符串模板: ES6中容許使用反引號 ` 來建立字符串，此種方法建立的字符串裏面能夠包含由美圓符號加花括號包裹的變量${vraible}。

　　5) 自動解析數組或對象中的值。好比若一個函數要返回多個值，常規的作法是返回一個對象，將每一個值作爲這個對象的屬性返回。但在ES6中，利用解構這一特性，能夠直接返回一個數組，而後數組中的值會自動被解析到對應接收該值的變量中。

　　6) 默認參數值: 如今能夠在定義函數的時候指定參數的默認值了，而不用像之前那樣經過邏輯或操做符來達到目的了。

　　7) 不定參數是在函數中使用命名參數同時接收不定數量的未命名參數。在之前的JavaScript代碼中咱們能夠經過arguments變量來達到這一目的。不定參數的格式是三個句點後跟表明全部不定參數的變量名。好比下面這個例子中，…x表明了全部傳入add函數的參數。

　　8) 拓展參數則是另外一種形式的語法糖，它容許傳遞數組或者類數組直接作爲函數的參數而不用經過apply。

　　9) let和const關鍵字: 能夠把let當作var，只是它定義的變量被限定在了特定範圍內才能使用，而離開這個範圍則無效。const則很直觀，用來定義常量，即沒法被更改值的變量。

　　10) for of值遍歷 每次循環它提供的不是序號而是值。

　　11) iterator, generator

　　12) 模塊

　　13) Map, Set, WeakMap, WeakSet

　　14) Proxy能夠監聽對象身上發生了什麼事情，並在這些事情發生後執行一些相應的操做。一會兒讓咱們對一個對象有了很強的追蹤能力，同時在數據綁定方面也頗有用處。

　　15) Symbols Symbol 經過調用symbol函數產生，它接收一個可選的名字參數，該函數返回的symbol是惟一的。以後就能夠用這個返回值作爲對象的鍵了。Symbol還能夠用來建立私有屬性，外部沒法直接訪問由symbol作爲鍵的屬性值。

　　16) Math, Number, String, Object的新API

　　17) Promises是處理異步操做的一種模式

　　參考: ES6新特性概覽

30. 如何獲取某個DOM節點，節點遍歷方式

答: getElementById()  getElementsByTagName()

節點遍歷: 先序遍歷DOM樹的5種方法

31. 用LESS如何給某些屬性加瀏覽器前綴？

答:  能夠自定義一個函數

1
2
3
4
5
6
7
8
.border-radius(@values) {
   -webkit-border-radius: @values;
      -moz-border-radius: @values;
           border-radius: @values;
}
div {
   .border-radius(10px);
}

32.  js異步模式如何實現？

答: JavaScript異步編程的Promise模式

33. 事件機制，如何綁定事件處理函數。

34. 圖片預加載的實現

答:

  1. 使用jQuery圖片預加載插件Lazy Load
    1. 加載jQuery, 與jquery.lazyload.js
    2. 設置圖片的佔位符爲data-original, 給圖片一個特別的標籤,好比class=".lazy"
    3. 而後延遲加載: $('img.lazy').lazyload();這個函數能夠選擇一些參數: 
      1. 圖片預先加載距離：threshold，經過設置這個值，在圖片未出如今可視區域的頂部距離這個值時加載。
      2. 事件綁定加載的方式：event
      3. 圖片限定在某個容器內：container
  2. 使用js實現圖片加載: 就是new一個圖片對象, 綁定onload函數, 賦值url
  3. 用CSS實現圖片的預加載
    1. 寫一個CSS樣式設置一批背景圖片，而後將其隱藏
    2. 改進: 使用js來推遲預加載時間, 防止與頁面其餘內容一塊兒加載
  4. 用Ajax實現預加載
    1. 其實就是經過ajax請求請求圖片地址. 還能夠用這種方式加載css,js文件等

35. 若是在同一個元素上綁定了兩個click事件, 一個在捕獲階段執行, 一個在冒泡階段執行. 那麼當觸發click條件時, 會執行幾個事件? 執行順序是什麼?

答:

 　　我在回答這個題的時候說是兩個事件, 先執行捕獲的後執行冒泡的. 實際上是不對的.

　　綁定在目標元素上的事件是按照綁定的順序執行的!!!!

　　即: 綁定在被點擊元素的事件是按照代碼順序發生，其餘元素經過冒泡或者捕獲「感知」的事件，按照W3C的標準，先發生捕獲事件，後發生冒泡事件。全部事件的順序是：其餘元素捕獲階段事件 -> 本元素代碼順序事件 -> 其餘元素冒泡階段事件 。

　　參考: JavaScript-父子dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡時執行順序

36. js中怎麼實現塊級做用域?

答:

  • 使用匿名函數, (當即執行函數)
    • (function(){...})()
  • 或者es6

    • 塊級做用域引入了兩種新的聲明形式,能夠用它們定義一個只存在於某個語句塊中的變量或常量.這兩種新的聲明關鍵字爲:

      • let: 語法上很是相似於var, 但定義的變量只存在於當前的語句塊中
      • const: 和let相似,但聲明的是一個只讀的常量

      使用let代替var能夠更容易的定義一個只在某個語句塊中存在的局部變量,而不用擔憂它和函數體中其餘部分的同名變量有衝突.在let語句內部用var聲明的變量和在let語句外部用var聲明的變量沒什麼差異,它們都擁有函數做用域,而不是塊級做用域.

37. 構造函數裏定義function和使用prototype.func的區別？

答：

　　　　1. 直接調用function，每個類的實例都會拷貝這個函數，弊端就是浪費內存（如上）。prototype方式定義的方式，函數不會拷貝到每個實例中，全部的實例共享prototype中的定義，節省了內存。

　　　　2. 可是若是prototype的屬性是對象的話，全部實例也會共享一個對象（這裏問的是函數應該不會出現這個狀況），若是其中一個實例改變了對象的值，則全部實例的值都會被改變。同理的話，若是使用prototype調用的函數，一旦改變，全部實例的方法都會改變。——不能夠對實例使用prototype屬性，只能對類和函數用。

 

38. js實現對象的深克隆

答:

由於js中數據類型分爲基本數據類型(number, string, boolean, null, undefined)和引用類型值(對象, 數組, 函數). 這兩類對象在複製克隆的時候是有很大區別的. 原始類型存儲的是對象的實際數據, 而對象類型存儲的是對象的引用地址(對象的實際內容單獨存放, 爲了減小數據開銷一般放在內存中). 此外, 對象的原型也是引用對象, 它把原型的屬性和方法放在內存中, 經過原型鏈的方式來指向這個內存地址. 

因而克隆也會分爲兩類:

  1. 淺度克隆: 原始類型爲值傳遞, 對象類型仍爲引用傳遞
  2. 深度克隆: 全部元素或屬性均徹底複製, 與原對象徹底脫離, 也就是說全部對於新對象的修改都不會反映到原對象中

深度克隆實現:

複製代碼 
function clone(obj){
    if(typeof(obj)== 'object'){
        var result = obj instanceof Array ? [] : {};
        for(var i in obj){
            var attr = obj[i];
            result[i] = arguments.callee(attr);
        }
        return result;
    } else {
        return obj;
    }
};
複製代碼

 

  參考: JavaScript深克隆   javascript中對象的深度克隆

6、 jQuery問題

7、 一些編程題

1. var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj); //問obj怎麼變？
答: 外部的obj不變. 由於匿名函數中obj傳入參數等因而建立了一個局部變量obj, 裏面的obj指向了一個新的對象 . 若是改爲(function () { obj = {a : 2}; })(obj);  就會變了

2. var obj = { a:1,  func: function() { (function () { a=2; }(); }} ; obj.fun()   //a 怎麼變? 匿名函數裏的this 是什麼?

答: obj裏的a不會變. 匿名函數裏的this指向全局對象window.  這等因而給window加了一個名爲a的屬性

　　要改變obj中a的值 , 應當:

　　(function() { this.a = 2}).call(this);

　　或者obj中定義func :    func: function() { var self = this; (function(){self.a=2;})();}

3. 要實現函數內每隔5秒調用本身這個函數，100次之後中止，怎麼辦

 

4. 點擊一個ul的五個li元素，分別彈出他們的序號，怎麼作？

想到了用閉包, 可是寫錯了...

一開始是這麼寫的

1
2
3
4
5
6
7
　 //注意!!這種寫法是錯誤的!!!　　 for(var i=0; i<oLis.length; i++){
     oLis[i].onclick =  function (){
         return  ( function (j){
             alert(j);
         })(i);
     }
}

可是這樣作的話, 點擊全部的li都會彈出最後一個序號. 由於每一個li對應的onclick事件的函數, 返回的那個函數的參數仍是最後的那個i, 並無改變. 應該是這麼寫

方法1 : 

1
2
3
4
5
6
7
for ( var  i=0; i<oLis.length; i++){
     oLis[i].onclick = ( function (j){
         return  function (){
             alert(j);
         }
     })(i);
}

這樣的話, 給每一個li綁定onclick事件時, 其實綁的是一個當即執行函數, 這個當即執行函數的參數是i, 由於它是當即執行的, 循環時已經把i的值賦給了li的onclick事件, 因此在外部函數裏的i改變後並不會影響i的值.

另外一種實現方法:(當即執行函數)

1
2
3
4
5
6
7
for ( var  i=0; i<oLi.length; i++){
     ( function (j){
         oLi[j].onclick =  function (){
             alert(j);
         };
     })(i);
}

或者不用閉包

方法2: 

複製代碼 
    var oLi = document.getElementsByTagName('li');
    function func(obj,i){
        obj.onclick = function(){
            alert (i);
        }
    }
    for(var i = 0; i<oLi.length; i++){
        func(oLi[i], i);
    }
複製代碼

 

方法3: 設置屬性:

1
2
3
4
var  oLi = document.getElementsByTagName( 'li' );
for ( var  i=0; i<oLi.length; i++){
     oLi[i].setAttribute( "onclick" ,  "alert(" +i+ ");" );
}　

方法4: 設置index保存

1
2
3
4
5
6
for ( var  i=0; i<oLi.length; i++){
     oLi[i].index = i;
     oLi[i].onclick =  function (){
         alert( this .index);
     }
}

　　

或者也能夠用事件代理來作.

參考: 原生js實現點擊li彈出當前的索引值(原創)  

 

8、js算法題

1. js實現數組去重怎麼實現?

方法1. 建立一個新的臨時數組來保存數組中已有的元素

1
2
3
4
5
6
7
8
9
10
11
12
var  a =  new  Array(1,2,2,2,2,5,3,2,9,5,6,3);
Array.prototype.unique1 =  function (){
     var  n = [];      //一個新的臨時數組
     for ( var  i=0; i< this .length; i++){
         //若是把當前數組的第i已經保存進了臨時數組, 那麼跳過
         if (n.indexOf( this [i]) == -1){
             n.push( this [i]);
         }
     }
     return  n;
}
console.log(a.unique1());

方法2. 使用哈希表存儲已有的元素

1
2
3
4
5
6
7
8
9
10
11
Array.prototype.unique2 =  function (){
     var  hash = {},
         n = [];      //hash 做爲哈希表, n爲臨時數組
     for ( var  i=0; i< this .length; i++){
         if (!hash[ this [i]]){          //若是hash表中沒有當前項
             hash[ this [i]] =  true ;    //存入hash表
             n.push( this [i]);         //當前元素push到臨時數組中
         }
     }
     return  n;
}

方法3. 使用indexOf判斷數組元素第一次出現的位置是否爲當前位置

1
2
3
4
5
6
7
8
9
10
11
12
Array.prototype.unique3 =  function (){
     var  n = [ this [0]]; 
     for ( var  i=1; i< this .length; i++)     //從第二項開始遍歷
     {
         //若是當前數組元素在數組中出現的第一次的位置不是i
         //說明是重複元素
         if ( this .indexOf( this [i]) == i){
             n.push( this [i]);
         }
     }
     return  n;
}

方法4. 先排序再去重

1
2
3
4
5
6
7
8
9
10
Array.prototype.unique4 =  function (){
     this .sort( function (a, b){  return  a - b;});
     var  n = [ this [0]];
     for ( var  i=1; i< this .length; i++){
         if ( this [i] !=  this [i-1]){
             n.push( this [i]);
         }
     }
     return  n;
}

第一種方法和第三種方法都使用了indexOf(), 這個函數的執行機制也會遍歷數組

第二種方法使用了一個哈希表, 是最快的. 

第三種方法也有一個排序的複雜度的計算.

而後作了個測試, 隨機生成100萬個0-1000的數組結果以下:

第三種方法老是第二種方法的將近兩倍, 而第四種方法與數組的範圍有關,

若是是0-100的數組

而若是是0-10000, 方法四看着就效果還不錯了

而第二種方法永遠是最好的, 可是是以空間換時間

所有代碼以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var  a = [];
for ( var  i=0; i<1000000; i++){
     a.push(Math.ceil(Math.random()*10000));
}
 
Array.prototype.unique1 =  function (){
     var  n = [];      //一個新的臨時數組
     for ( var  i=0; i< this .length; i++){
         //若是把當前數組的第i已經保存進了臨時數組, 那麼跳過
         if (n.indexOf( this [i]) == -1){
             n.push( this [i]);
         }
     }
     return  n;
}
 
Array.prototype.unique2 =  function (){
     var  hash = {},
         n = [];      //hash 做爲哈希表, n爲臨時數組
     for ( var  i=0; i< this .length; i++){
         if (!hash[ this [i]]){          //若是hash表中沒有當前項
             hash[ this [i]] =  true ;    //存入hash表
             n.push( this [i]);         //當前元素push到臨時數組中
         }
     }
     return  n;
}
 
Array.prototype.unique3 =  function (){
     var  n = [ this [0]]; 
     for ( var  i=1; i< this .length; i++)     //從第二項開始遍歷
     {
         //若是當前數組元素在數組中出現的第一次的位置不是i
         //說明是重複元素
         if ( this .indexOf( this [i]) == i){
             n.push( this [i]);
         }
     }
     return  n;
}
 
Array.prototype.unique4 =  function (){
     this .sort( function (a, b){  return  a - b;});
     var  n = [ this [0]];
     for ( var  i=1; i< this .length; i++){
         if ( this [i] !=  this [i-1]){
             n.push( this [i]);
         }
     }
     return  n;
}
var  begin1 =  new  Date();
a.unique1();
var  end1 =  new  Date();
 
var  begin2 =  new  Date();
a.unique2();
var  end2 =  new  Date();
 
var  begin3 =  new  Date();
a.unique3();
var  end3 =  new  Date();
 
var  begin4 =  new  Date();
a.unique4();
var  end4 =  new  Date();
 
console.log( "方法一執行時間:"  + (end1 - begin1));
console.log( "方法二執行時間:"  + (end2 - begin2));
console.log( "方法三執行時間:"  + (end3 - begin3));
console.log( "方法四執行時間:"  + (end4 - begin4));

　　參考: js數組去重

 

 

 

瞭解先後端分離嗎（當時真不瞭解，但他細心地給我解釋了一下，還建議我去看淘寶ued團隊的文章）

用什麼版本控制工具
在用mac嗎
用什麼來管理各類依賴
 
 
數組去重
position的幾種值
css選擇器優先級
僞類的用法
閉包
閉包的實現舉例
浮動
清除浮動
jsonp是啥
 
gulp怎麼用，用過啥
你以爲你還有什麼閃光點我沒有問到的（這個太囧了，我竟然反問了面試官你以爲我剛纔閃不閃？面試官呵呵呵呵）
 
 
require的讀取順序
圖片輪播（雖然不少面試題都有這個，可是我本身真的沒有實現過，說了一個opacity與setTimeout的組合運用，最後沒有實現到面試官要求的效果，可是他說還行）
sass的僞類怎麼嵌套
jsonp是啥
怎麼用jsonp
發送jsonp時候的那個消息頭長什麼樣子？（這個我直接跟他說沒看過不知道）
一個文本框，須要兩個控件對裏面的值進行控制，一個是＋1一個是－1，要求每點擊一次就有個提示框冒出來。
並且文本框是可修改的，每次修改也會冒出提示框。（這個我回答的很模糊，我說應該有個監聽的事件的，可是我忘了是啥了，面試官說也行）
css定位
 
百度
（很驚奇的是面試個人三個面試官都是女生，簡直了）
一面
css position的幾種值與區別
閉包
偏向於什麼語言？html、css or javascript
開發中偏於jQuery仍是原生js
爲何選擇原生js？
最近作過的項目
那個系統還在用嗎
你是怎麼學的？
看英文有障礙嗎（臥槽，當時我回答了徹底沒有問題，不知道哪裏來的自信）
 
二面
html5的新功能瞭解多少
說說離線存儲
它們與cookie的區別
this的理解
怎麼傳入this
apply和call的區別
項目您說說
你github上面那個打字機的效果是怎麼實現的（這是我fork了一位小夥伴的，但幸虧我也花了一點時間弄懂了他的作法，要否則確定囧死。插播一個很硬的廣告 github.com/sidkwok/typing）
前端優化
你用過哪些優化（我說了css sprite和減小http請求，順便引出了webpack，但沒想到她也沒有問）
gulp你是怎麼用的
jsonp是啥
怎麼跨域
爲何要跨域
怎麼學習的
position幾種值
具體運用是什麼
display幾種值
兼容性你懂多少（我就說了Ajax的還有盒子模型，但她說還有不少，但以前我說了沒有系統地去學過css，都是不會的時候查文檔的，估計由於這樣因此她也沒有追問下去）
說說你瞭解的框架（我說了react和vue）
react你以爲怎樣（我說了一些組件化和虛擬dom樹的東西）
AngularJS呢（我說沒有學過，但瞭解過一點，我把我瞭解的都說了給她聽）
兩個的比較
爲何你會以爲AngularJS笨重？（也是本身的見解，mvc框架嘛，一整套什麼都有）
jQuery仍是原生js（百度的面試官都問了這個問題，我直接說對於jQuery我並非很熟悉，由於我更喜歡研究原生js。）
爲何選擇原生js（我認爲要把原生吃透再去理解其餘類庫的話會更好一點，她說也是）
 
三面
（二面問面試官我表現怎樣的時候她說，我能夠跟你講你已通過了，個人助理會跟你通知的。覺得是hr面沒想到仍是技術面）
介紹本身
說說框架
比較一下框架
你打算怎麼去學這些框架
據說你在瀏覽器兼容性這邊學習的不是很好（不慌，她只是建議我這方面其實也很重要）
對本身的規劃
喜歡用什麼系統
來，咱們聊聊人生
 
daocloud
一面
html語義化
h5新標籤
es6
promise
promise解決了你什麼問題
跨域的方法
jsonp怎麼用
用過什麼庫
gulp的插件用過啥
webpack
爲何要打包 (我說了http請求那點事)
介紹一下react
組件化是啥
你覺的react的優勢
爲何沒有選擇學習AngularJS
flex
響應式佈局是啥
響應式佈局是根據什麼進行響應
css中用什麼進行屏幕的斷定
css中實現陰影的有什麼
 
二面
點擊a標籤發生了啥
http2您說說
說說各類框架
聊聊AngularJS（說了個人理解，但不怎麼了解）
那你熟悉哪一個框架（正在玩React，vue也懂一點）
你給我說說你那個博客生成器（github.com/sidkwok/tech-dairy）（我知道我知道，不少廣告！）
聊聊項目
聊聊模塊化吧
sass你怎麼用
gulp用過啥
介紹一下webpack
實現sum(2,3);sum(2,3,4);sum(2,3,4,5);(我用了比較原始的方法，if來判斷)
那若是sum裏面的參數不肯定呢（提取arguments的長度，用for循環）
你知道僞數組嗎？
ok， 再來一個數組去重吧（這太經典了吧）
 MVC理解
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程