Web前端面試題-1

Web前端面試題

Web前端面試題 1

HTML/CSS部分 4

1、什麼是盒子模型？有幾種？ 4

2、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？ 4

3、CSS實現垂直水平居中 4

4、簡述一下src與href的區別 5

5、什麼是CSS Hack? 5

6、簡述同步和異步的區別 6

7、px和em的區別 6

8、 什麼叫優雅降級和漸進加強？ 6

9、瀏覽器的內核分別是什麼? 7

10、XHTML和HTML有什麼區別 7

12、前端頁面有哪三層構成，分別是什麼?做用是什麼? 8

13、你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼? 8

14、什麼是語義化的HTML? 8

15、HTML5 爲何只須要寫 !DOCTYPE HTML？ 8

16、Doctype做用？標準模式與兼容模式各有什麼區別? 9

17、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？ 9

18、請描述一下 cookies，sessionStorage 和 localStorage 的區別？ 10

19、如何實現瀏覽器內多個標籤頁之間的通訊? 10

20、CSS隱藏元素的幾種方法（至少說出三種） 10

21、CSS清除浮動的幾種方法（至少兩種） 10

22、CSS居中（包括水平居中和垂直居中）實現方式有那些？ 11

23、寫出幾種IE6 BUG的解決方法 12

24、頁面導入樣式時，使用link和@import有什麼區別？ 13

26、CSS3有哪些新特性？ 14

27、div+css的佈局較table佈局有什麼優勢？ 14

28、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？ 14

29、rgba()和opacity的透明效果有什麼不一樣？ 14

30、img的alt與title有何異同？ strong與em的異同？ 15

31、Sass、LESS是什麼？你們爲何要使用他們？ 15

32、display:none與visibility:hidden的區別是什麼？ 16

33、html常見兼容性問題？ 16

34、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？ 17

35、爲何利用多個域名來存儲網站資源會更有效？ 17

36、知道的網頁製做會用到的圖片格式有哪些？ 18

37、知道什麼是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？ 18

38、在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？ 18

39、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。 19

40、談談之前端角度出發作好SEO須要考慮什麼？ 19

JavaScript部分 21

1、怎樣添加、移除、移動、複製、建立和查找節點？ 21

2、實現一個函數clone，能夠對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製。 21

3、如何消除一個數組裏面重復的元素？ 22

4、在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？ 23

5、Javascript中callee和caller的做用？ 23

6、請描述一下cookies，sessionStorage和localStorage的區別 23

7、統計字符串中字母個數或統計最多字母數。 24

8、javascript的typeof返回哪些數據類型 24

9、例舉3種強制類型轉換和2種隱式類型轉換? 24

10、數組方法pop() push() unshift() shift() 24

11、ajax請求的時候get 和post方式的區別? 25

12.ajax請求時，如何解釋json數據 25

13、事件委託是什麼 25

14、閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包 25

15、添加 刪除 替換 插入到某個接點的方法 25

17、編寫一個b繼承a的方法; 26

18、如何阻止事件冒泡和默認事件 26

19、下面程序執行後彈出什麼樣的結果? 26

20、談談This對象的理解。 27

21、下面程序的結果 27

22、下面程序的輸出結果 27

23、介紹下你最經常使用的一款框架 28

24、對於前端自動化構建工具備瞭解嗎？簡單介紹一下 28

其它 28

HTTP 32

1、一次完整的HTTP事務是怎樣的一個過程？ 32

2、HTTP的狀態碼有哪些？ 32

3、HTTPS是如何實現加密？ 32

算法相關 32

1、手寫數組快速排序 32

2、JavaScript實現二分法查找 33

Web安全 35

你所瞭解到的Web攻擊技術 35

前端性能 35

如何優化圖像、圖像格式的區別？ 35

瀏覽器是如何渲染頁面的？ 35

設計模式 35

對MVC、MVVM的理解 35

正則表達式 35

寫一個function，清除字符串先後的空格。（兼容全部瀏覽器） 35

使用正則表達式驗證郵箱格式 36

職業規劃 36

對前端工程師這個職位你是怎麼樣理解的？ 36

 

 

HTML/CSS部分

一、什麼是盒子模型？有幾種？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。即盒模型包括： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。

盒模型有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

 

二、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即沒有內容的HTML元素，例如：br、meta、hr、link、input、img

三、CSS實現垂直水平居中

一道經典的問題，實現方法有不少種，如下是其中一種實現：
HTML結構：

    <div class="wrapper">

        <div class="content"></div>

    </div>    

CSS：

    .wrapper {

      position: relative;

      width: 500px;

      height: 500px;

      

     }

    .content{

        

        width:200px;

        height:200px;

        position: absolute;        //父元素須要相對定位

        top: 50%;

        left: 50%;

        margin-top:-100px ;   //二分之一的height，width

        margin-left: -100px;

    } 

四、簡述一下src與href的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

五、什麼是CSS Hack?

通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。
IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

    // 一、條件Hack

   <!--[if IE]>

      <style>

            .test{color:red;}

      </style>

   <![endif]-->

   // 二、屬性Hack

    .test{    color:#090\9; /* For IE8+ */

    *color:#f00;  /* For IE7 and earlier */    _color:#ff0;  /* For IE6 and earlier */

    }

   // 三、選擇符Hack

    * html .test{color:#090;}       /* For IE6 and earlier */

    * + html .test{color:#ff0;}     /* For IE7 */

   

六、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

七、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

八、什麼叫優雅降級和漸進加強？

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

「優雅降級」觀點

「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。

在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

「漸進加強」觀點

「漸進加強」觀點則認爲應關注於內容自己。

內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

那麼問題來了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

九、瀏覽器的內核分別是什麼?

IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)

10、XHTML和HTML有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不一樣：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標籤名必須用小寫字母。

XHTML 文檔必須擁有根元素。

12、前端頁面有哪三層構成，分別是什麼?做用是什麼?

• 結構層 Html 表示層 CSS 行爲層 js;
• Ie(Ie內核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)
• 直觀的認識標籤 對於搜索引擎的抓取有好處，用正確的標籤作正確的事情！
• html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
  在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
• 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
• HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
• !DOCTYPE聲明位於位於HTML文檔中的第一行，處於html 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
• 標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。
• HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
• 繪畫 canvas
• 用於媒介回放的 video 和 audio 元素
• 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
• sessionStorage 的數據在瀏覽器關閉後自動刪除
• 語意化更好的內容元素，好比 article、footer、header、nav、section
• 表單控件，calendar、date、time、email、url、search
• 新的技術webworker, websockt, Geolocation
  移除的元素
• 純表現的元素：basefont，big，center，font, s，strike，tt，u；
• 對可用性產生負面影響的元素：frame，frameset，noframes；
  支持HTML5新標籤：
• IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
• 能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
• 瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
• cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
• sessionStorage和localStorage的存儲空間更大；
• sessionStorage和localStorage有更多豐富易用的接口；
• sessionStorage和localStorage各自獨立的存儲空間；
• 調用localstorge、cookies等本地存儲方式
• Opacity:元素自己依然佔據它本身的位置並對網頁的佈局起做用。它也將響應用戶交互;
• Visibility:與 opacity 惟一不一樣的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
• Display:display 設爲 none 任何對該元素直接打用戶交互操做都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素徹底不存在;
• Position:不會影響佈局，能讓元素保持能夠操做;
• Clip-path:clip-path 屬性尚未在 IE 或者 Edge 下被徹底支持。若是要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
• 使用帶clear屬性的空元素
• 使用CSS的overflow屬性；
• 使用CSS的:after僞元素；
• 使用鄰接元素處理；

13、你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

1四、什麼是語義化的HTML?

15、HTML5 爲何只須要寫 !DOCTYPE HTML？

16、Doctype做用？標準模式與兼容模式各有什麼區別?

17、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？

18、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

1九、如何實現瀏覽器內多個標籤頁之間的通訊?

20、CSS隱藏元素的幾種方法（至少說出三種）

2一、CSS清除浮動的幾種方法（至少兩種）

2二、CSS居中（包括水平居中和垂直居中）實現方式有那些？

內聯元素居中方案

水平居中設置：
1.行內元素

• 設置 text-align:center；

2.Flex佈局

• 設置display:flex;justify-content:center;(靈活運用,支持Chroime，Firefox，IE9+)

垂直居中設置：
1.父元素高度肯定的單行文本（內聯元素）

• 設置 height = line-height；

2.父元素高度肯定的多行文本（內聯元素）

a:插入 table （插入方法和水平居中同樣），而後設置 vertical-align:middle；

b:先設置 display:table-cell 再設置 vertical-align:middle；

塊級元素居中方案

水平居中設置：
1.定寬塊狀元素

• 設置 左右 margin 值爲 auto；

2.不定寬塊狀元素

• a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，而後設置 margin 的值爲 auto；
• b:給該元素設置 displa:inine 方法；
• c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%；

垂直居中設置：

• 使用position:absolute（fixed）,設置left、top、margin-left、margin-top的屬性;
• 利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
• 利用display:table-cell屬性使內容垂直居中;
• 使用css3的新屬性transform:translate(x,y)屬性;
• 使用:before元素;
• 雙邊距BUG float引發的 使用display
• 3像素問題 使用float引發的 使用dislpay:inline -3px
• 超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
• Ie z-index問題 給父級添加position:relative
• Png 透明 使用js代碼 改
• Min-height 最小高度 ！Important 解決’
• select 在ie6下遮蓋 使用iframe嵌套
• 爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）
• link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
• 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
• import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

2三、寫出幾種IE6 BUG的解決方法

2四、頁面導入樣式時，使用link和@import有什麼區別？

2五、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

• id選擇器（ # myid）
• 類選擇器（.myclassname）
• 標籤選擇器（div, h1, p）
• 相鄰選擇器（h1 + p）
• 子選擇器（ul > li）
• 後代選擇器（li a）
• 通配符選擇器（ * ）
• 屬性選擇器（a[rel = 「external」]）
• 僞類選擇器（a: hover, li: nth – child）
• 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
• 不可繼承的樣式：border padding margin width height ;
• 優先級就近原則，同權重狀況下樣式定義最近者爲準;

優先級爲:

1 2	!important >  id > class > tag important 比 內聯優先級高

 

2六、CSS3有哪些新特性？

• CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
  對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
  增長了更多的CSS選擇器 多背景 rgba

 

 

2七、div+css的佈局較table佈局有什麼優勢？

改版的時候更方便 只要改css文件。

頁面加載速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離。

易於優化（seo）搜索引擎更友好，排名更容易靠前。

 

2八、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

答案：被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

 

2九、rgba()和opacity的透明效果有什麼不一樣？

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

 

 

30、img的alt與title有何異同？ strong與em的異同？

a:alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)

title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。

strong:粗體強調標籤，強調，表示內容的重要性

em:斜體強調標籤，更強烈強調，表示內容的強調點

 

3一、Sass、LESS是什麼？你們爲何要使用他們？

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。

爲何要使用它們？

結構清晰，便於擴展。

能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。

 

能夠輕鬆實現多重繼承。

徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。

 

3二、display:none與visibility:hidden的區別是什麼？

display : 隱藏對應的元素但不擠佔該元素原來的空間。

visibility: 隱藏對應的元素而且擠佔該元素原來的空間。

便是，使用CSSdisplay:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

 

3三、html常見兼容性問題？

1.雙邊距BUG float引發的  使用display

2.3像素問題 使用float引發的 使用dislpay:inline-3px

3.超連接hover 點擊後失效  使用正確的書寫順序 linkvisited hover active

4.Iez-index問題 給父級添加position:relative

5.Png 透明 使用js代碼 改

6.Min-height最小高度 ！Important 解決’

7.select在ie6下遮蓋 使用iframe嵌套

8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

9.IE5-8不支持opacity，解決辦法：

.opacity{

    opacity: 0.4

    filter: alpha(opacity=60); /* for IE5-7 */

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

}

IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

 

3四、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

  1. block 象塊類型元素同樣顯示。

  none 缺省值。向行內元素類型同樣顯示。

  inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

  2. position的值

  *absolute

        生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

  *fixed （老IE不支持）

        生成絕對定位的元素，相對於瀏覽器窗口進行定位。

  * relative

        生成相對定位的元素，相對於其正常位置進行定位。

  * static 默認值。沒有定位，元素出如今正常的流中

  *（忽略 top, bottom, left, right z-index 聲明）。

  * inherit 規定從父元素繼承 position 屬性的值。

 

 

3五、爲何利用多個域名來存儲網站資源會更有效？

CDN緩存更方便

突破瀏覽器併發限制

節約cookie帶寬

節約主域名的鏈接數，優化頁面響應速度

防止沒必要要的安全問題

 

3六、知道的網頁製做會用到的圖片格式有哪些？

png-8，png-24，jpeg，gif，svg。

可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是Webp。（是否有關注新技術，新鮮事物）

科普一下Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。

在質量相同的狀況下，WebP格式圖像的體積要比JPEG格式圖像小40%

 

3七、知道什麼是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？

微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。

優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。（應用範例：豆瓣，有興趣自行google）

38、在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？

答案：dns緩存，cdn緩存，瀏覽器緩存，服務器緩存。

 

3九、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。

若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

 

 

40、談談之前端角度出發作好SEO須要考慮什麼？

瞭解搜索引擎如何抓取網頁和如何索引網頁

你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web crawler）如何進行工做，搜索引擎如何對搜索結果進行排序等等。

Meta標籤優化

主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比Author（做者），Category（目錄），Language（編碼語種）等。

如何選取關鍵詞並在網頁中放置關鍵詞

搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常在5個上下），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

瞭解主要的搜索引擎

雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係，好比AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。

主要的互聯網目錄

Open Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不一樣。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。

按點擊付費的搜索引擎

搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，固然也包括Google的廣告項目Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用最少的廣告投入得到最多的點擊。

搜索引擎登陸

網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付費來得到收錄（好比Yahoo要299美圓），可是好消息是（至少到目前爲止）最大的搜索引擎Google目前仍是免費，並且它主宰着60％以上的搜索市場。

連接交換和連接普遍度（Link Popularity）

網頁內容都是以超文本（Hypertext）的方式來互相連接的，網站之間也是如此。除了搜索引擎之外，人們也天天經過不一樣網站之間的連接來Surfing（「衝浪」）。其它網站到你的網站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站的外部連接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高的排名。

合理的標籤使用

 

 

 

 

JavaScript部分

一、怎樣添加、移除、移動、複製、建立和查找節點？

1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點

2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入

3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性

二、實現一個函數clone，能夠對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製。

    /** * 對象克隆 * 支持基本數據類型及對象 * 遞歸方法 */function clone(obj) {

    var o;

    switch (typeof obj) {

        case "undefined":

            break;

        case "string":

            o = obj + "";

            break;

        case "number":

            o = obj - 0;

            break;

        case "boolean":

            o = obj;

            break;

        case "object": // object 分爲兩種狀況 對象（Object）或數組（Array）

            if (obj === null) {

                o = null;

            } else {

                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {

                    o = [];

                    for (var i = 0; i < obj.length; i++) {

                        o.push(clone(obj[i]));

                    }

                } else {

                    o = {};

                    for (var k in obj) {

                        o[k] = clone(obj[k]);

                    }

                }

            }

            break;

        default:

            o = obj;

            break;

    }

    return o;}

三、如何消除一個數組裏面重復的元素？

// 方法一：var arr1 =[1,2,2,2,3,3,3,4,5,6],

    arr2 = [];for(var i = 0,len = arr1.length; i< len; i++){

    if(arr2.indexOf(arr1[i]) < 0){

        arr2.push(arr1[i]);

    }}document.write(arr2); // 1,2,3,4,5,6

四、在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？

僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。可使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

function log(){

      var args = Array.prototype.slice.call(arguments);  //爲了使用unshift數組方法，將argument轉化爲真正的數組

      args.unshift('(app)');

 

      console.log.apply(console, args);};

五、Javascript中callee和caller的做用？

caller是返回一個對函數的引用，該函數調用了當前函數；

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

六、請描述一下cookies，sessionStorage和localStorage的區別

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。
除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

七、統計字符串中字母個數或統計最多字母數。

var str = "aaaabbbccccddfgh";var obj  = {};for(var i=0;i<str.length;i++){

    var v = str.charAt(i);

    if(obj[v] && obj[v].value == v){

        obj[v].count = ++ obj[v].count;

    }else{

        obj[v] = {};

        obj[v].count = 1;

        obj[v].value = v;

    }}for(key in obj){

    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 }   

 

八、javascript的typeof返回哪些數據類型

• Ｏbject number function boolean underfind;
• 強制（parseInt,parseFloat,number）隱式（== – ===）；
• Push()尾部添加 pop()尾部刪除
• Unshift()頭部添加 shift()頭部刪除
• 一個在url後面 一個放在虛擬載體裏面
  有大小限制
• 安全問題
  應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的;
• 使用eval parse,鑑於安全性考慮 使用parse更靠譜;
• 讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！
• 閉包就是可以讀取其餘函數內部變量的函數。

九、例舉3種強制類型轉換和2種隱式類型轉換?

十、數組方法pop() push() unshift() shift()

十一、ajax請求的時候get 和post方式的區別?

12.ajax請求時，如何解釋json數據

1三、事件委託是什麼

1四、閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包

1五、添加 刪除 替換 插入到某個接點的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

1六、說一下什麼是javascript的同源策略？

• 一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

1七、編寫一個b繼承a的方法;

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

function A(name){     this.name = name;     this.sayHello = function(){alert(this.name+」 say Hello!」);}; } function B(name,id){     this.temp = A;     this.temp(name);        //至關於new A();     delete this.temp;            this.id = id;       this.checkId = function(ID){alert(this.id==ID)}; }

1八、如何阻止事件冒泡和默認事件

JavaScript

 

1 2 3 4 5 6 7 8

function stopBubble(e) {     if (e && e.stopPropagation)         e.stopPropagation()     else         window.event.cancelBubble=true } return false

1九、下面程序執行後彈出什麼樣的結果?

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function fn() {     this.a = 0;     this.b = function() {         alert(this.a)     } } fn.prototype = {     b: function() {         this.a = 20;         alert(this.a);     },     c: function() {         this.a = 30;         alert(this.a);     } } var myfn = new fn(); myfn.b(); myfn.c();

20、談談This對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。
可是有一個總原則，那就是this指的是調用函數的那個對象。
this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

2一、下面程序的結果

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

function fun(n,o) {   console.log(o)   return {     fun:function(m){       return fun(m,n);     }   }; } var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案：

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

2二、下面程序的輸出結果

JavaScript

 

1 2 3 4 5 6 7 8 9

var name = 'World!'; (function () {     if (typeof name === 'undefined') {         var name = 'Jack';         console.log('Goodbye ' + name);     } else {         console.log('Hello ' + name);     } })();

2三、介紹下你最經常使用的一款框架

• jquery,rn,angular等;
• Gulp,Grunt等；

2四、對於前端自動化構建工具備瞭解嗎？簡單介紹一下

20.介紹一下你瞭解的後端語言以及掌握程度

其它

1.對Node的優勢和缺點提出了本身的見解？

(優勢）
由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。
（缺點）
Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

2.你有哪些性能優化的方法？

（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佈局慢。對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。

3.http狀態碼有那些？分別表明是什麼意思？
100-199 用於指定客戶端應相應的某些動做。
200-299 用於表示請求成功。
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。
400-499 用於指出客戶端的錯誤。400 一、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用
4.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

• 查找瀏覽器緩存
• DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
• 進行HTTP協議會話
• 客戶端發送報頭(請求報頭)
• 文檔開始下載
• 文檔樹創建，根據標記請求所需指定MIME類型的文件
• 文件顯示
• 瀏覽器這邊作的工做大體分爲如下幾步：
• 加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。
• 解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）

5.你經常使用的開發工具是什麼，爲何？

• Sublime,Atom,Nodepad++;

6.說說最近最流行的一些東西吧？常去哪些網站？

• Node.js、MVVM、React-native,Angular,Weex等
• CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等

7.介紹下你的項目（若是有的話）？並說一下在作這個項目中運用的技術以及遇到的難題是如何解決的

 

 

HTTP

一、一次完整的HTTP事務是怎樣的一個過程？

基本流程：

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

二、HTTP的狀態碼有哪些？

三、HTTPS是如何實現加密？

算法相關

一、手寫數組快速排序

關於快排算法的詳細說明，能夠參考阮一峯老師的文章快速排序
"快速排序"的思想很簡單，整個排序過程只須要三步：
（1）在數據集之中，選擇一個元素做爲"基準"（pivot）。
（2）全部小於"基準"的元素，都移到"基準"的左邊；全部大於"基準"的元素，都移到"基準"的右邊。
（3）對"基準"左邊和右邊的兩個子集，不斷重複第一步和第二步，直到全部子集只剩下一個元素爲止。
參考代碼：

 var quickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　var pivotIndex = Math.floor(arr.length / 2);

　　var pivot = arr.splice(pivotIndex, 1)[0];

　　var left = [];

　　var right = [];

　　for (var i = 0; i < arr.length; i++){

　　　　if (arr[i] < pivot) {

　　　　　　left.push(arr[i]);

　　　　} else {

　　　　　　right.push(arr[i]);

　　　　}

　　}

　　return quickSort(left).concat([pivot], quickSort(right));};

二、JavaScript實現二分法查找

二分法查找，也稱折半查找，是一種在有序數組中查找特定元素的搜索算法。查找過程能夠分爲如下步驟：
（1）首先，從有序數組的中間的元素開始搜索，若是該元素正好是目標元素（即要查找的元素），則搜索過程結束，不然進行下一步。
（2）若是目標元素大於或者小於中間元素，則在數組大於或小於中間元素的那一半區域查找，而後重複第一步的操做。
（3）若是某一步數組爲空，則表示找不到目標元素。
參考代碼:

     // 非遞歸算法

        function binary_search(arr, key) {

            var low = 0,

                high = arr.length - 1;

            while(low <= high){

                var mid = parseInt((high + low) / 2);

                if(key == arr[mid]){

                    return  mid;

                }else if(key > arr[mid]){

                    low = mid + 1;

                }else if(key < arr[mid]){

                    high = mid -1;

                }else{

                    return -1;

                }

            }

        };

        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];

        var result = binary_search(arr,10);

        alert(result); // 9 返回目標元素的索引值       

 

    // 遞歸算法

        function binary_search(arr,low, high, key) {

            if (low > high){

                return -1;

            }

            var mid = parseInt((high + low) / 2);

            if(arr[mid] == key){

                return mid;

            }else if (arr[mid] > key){

                high = mid - 1;

                return binary_search(arr, low, high, key);

            }else if (arr[mid] < key){

                low = mid + 1;

                return binary_search(arr, low, high, key);

            }

        };

        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];

        var result = binary_search(arr, 0, 13, 10);

        alert(result); // 9 返回目標元素的索引值  

Web安全

你所瞭解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。

前端性能

如何優化圖像、圖像格式的區別？

瀏覽器是如何渲染頁面的？

設計模式

對MVC、MVVM的理解

正則表達式

寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

function trim(str) {

    if (str && typeof str === "string") {

        return str.replace(/(^\s*)|(\s*)$/g,""); //去除先後空白符

    }}

使用正則表達式驗證郵箱格式

    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;

    var email = "example@qq.com";

    console.log(reg.test(email));  // true  

職業規劃

對前端工程師這個職位你是怎麼樣理解的？

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高質量完成實現效果圖，精確到1px；

c. 與團隊成員，UI設計，產品經理的溝通；

d. 作好的頁面結構，頁面重構和用戶體驗；

e. 處理hack，兼容、寫出優美的代碼格式；

f. 針對服務器的優化、擁抱最新前端技術。