前端面試題

時間  2019-11-10
標籤 端面 試題 简体版
原文   原文鏈接

$HTML， HTTP，web綜合問題javascript

一、前端須要注意哪些SEO？css

  1. 合理的title、description、keywords、語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
  2. 重要內容HTML代碼放在最前，重要內容不要用js輸出：爬蟲不會執行js獲取內容
  3. 少用iframe：搜索引擎不會抓取iframe中的內容
  4. 非裝飾性圖片必須加alt
  5. 提升網站速度

二、<img>的title和alt有什麼區別？html

  1. title是global attributes之一，用於爲元素提供附加的advisory information。一般當鼠標滑動到元素上的時候顯示。
  2. alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

三、HTTP的幾種請求方法用途？前端

OPTIONS：返回服務器針對特定資源所支持的HTTP請求方法。或利用向Web服務器發送‘*‘的請求來測試服務器的功能性。 
HEAD：向服務器索要與GET請求相一致的響應，響應體將不會被返回。這一方法能夠在沒必要傳輸整個響應內容的狀況下，就能夠獲取包含在響應消息頭中的元信息。 
GET：向特定的資源發出請求。 
POST：向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST請求可能會致使新的資源的建立和/或已有資源的修改。 
PUT：向指定資源位置上傳其最新內容。 
DELETE：請求服務器刪除Request-URI所標識的資源。 
TRACE：回顯服務器收到的請求，主要用於測試或診斷。 vue

CONNECT：HTTP/1.1協議中預留給可以將鏈接改成管道方式的代理服務器。雖html5

四、從瀏覽器地址欄輸入url到顯示頁面的步驟java

  1. 查看緩存
  2. 解析url:協議、網絡地址、資源路徑
  3. 服務器接受請求並處理請求
  4. 檢查HTTP請求頭是否包含緩存驗證信息，是否返回304
  5. 服務器封裝一個HTTP響應報文
  6. 3XX重定向響應
  7. 解碼（gzip）
  8. 解析html文檔，增量構建DOM樹，下載資源，構建CSSOM，執行js腳本
  9. 根據DOM樹和CSSOM樹，構建RenderTree（渲染樹）
  10. Layout計算須要渲染的節點的大小和位置
    節點位置和大小是基於viewport計算的。
    在移動端一般將viewport設爲瀏覽器推薦的理想視口，以保證字體顯示大小易於閱讀
    旋轉屏幕、修改瀏覽器窗口大小，修改位置大小相關的CSS屬性，均可能觸發Layout
  11. Paint繪製像素點
    根據background, border, box-shadow等樣式，將Layout生成的區域填充爲最終將顯示在屏幕上的像素

五、如何進行網站性能優化react

儘量減小HTTP請求：圖片合併 （css sprites），Js腳本文件合併、css文件合併、減小DNS查詢、將css放在頁面最上面，將js放在頁面最下面、壓縮js和css、把js和css提取出來放在外部文件中、避免重定向七、移除重複腳本、配置實體標籤Etag、使用ajax緩存、使用Gzip壓縮、使用CDN(內容分發網絡)、在css中避免expression表達式、添加expire/cache-control頭。jquery

 

六、HTTP狀態碼及其含義webpack

 

成功2××            成功處理了請求的狀態碼。

200                   服務器已成功處理了請求並提供了請求的網頁。

204                   服務器成功處理了請求，但沒有返回任何內容。                         

重定向3××          每次請求中使用重定向不要超過 5 次。

301                   請求的網頁已永久移動到新位置。當URLs發生變化時，使用301代碼。搜索引擎索引中保存新的URL。

302                   請求的網頁臨時移動到新位置。搜索引擎索引中保存原來的URL。

304                   若是網頁自請求者上次請求後沒有更新，則用304代碼告訴搜索引擎機器人，可節省帶寬和開銷。

客戶端錯誤4××      表示請求可能出錯，妨礙了服務器的處理。

400                    服務器不理解請求的語法。

403                    服務器拒絕請求。

404                    服務器找不到請求的網頁。服務器上不存在的網頁常常會返回此代碼。

410                    請求的資源永久刪除後，服務器返回此響應。該代碼與 404（未找到）代碼類似，但在資源之前存在而如今不存在的狀況下，有時用來替代404 代碼。若是資源已永久刪除，應當使用 301 指定資源的新位置。

服務器錯誤5××        表示服務器在處理請求時發生內部錯誤。這些錯誤多是服務器自己的錯誤，而不是請求出錯。

500                     服務器遇到錯誤，沒法完成請求。

503                     服務器目前沒法使用（因爲超載或停機維護）。一般，這只是暫時狀態。

 

 

七、語義化的理解

HTML 標籤語義化是讓你們直觀的認識標籤(markup)和屬性(attribute)的用途和做用，很明顯Hx系列看起來很像標題，由於擁有粗體和較大的字號。<strong>,<em>用來區別於其餘文字，起到了強調的做用。

八、介紹一下你對瀏覽器內核的理解

瀏覽器的內核是分爲兩個部分的，一是渲染引擎，另外一個是JS引擎。如今JS引擎比較獨立，內核更加傾向於說渲染引擎。

一、Trident內核：表明做品是IE，因IE捆綁在Windows中，因此佔有極高的份額，又稱爲IE內核或MSHTML，此內核只能用於Windows平臺。

 表明做品還有騰訊、Maxthon（遨遊）、360瀏覽器等。    

存在不少的兼容性問題。

二、Gecko內核：表明做品是Firefox，即火狐瀏覽器。

三、Webkit內核：表明做品是Safari、曾經的Chrome。

四、Presto內核：表明做品是Opera，Presto是由Opera Software開發的瀏覽器排版引擎，它是世界公認最快的渲染速度的引擎。在13年以後，Opera宣佈加入谷歌陣營，棄用了Presto

五、Blink內核：由Google和Opera Software開發的瀏覽器排版引擎，2013年4月發佈。如今Chrome內核是Blink。谷歌還開發了本身的JS引擎，V8，使JS運行速度極大地提升了

九、html5有哪些新特性、移除了那些元素？

*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；

*IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

*固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

   <!--[if lt IE 9]>

   <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

   <![endif]--> 

十、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

原理：HTML5的離線存儲是基於一個新建的.appcache文件的，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

方法：

1.在index.html里加上<html manifest="test.manifest">

 2.manifest清單格式以下：

CACHE MANIFEST

#上面一句必須

#v1.0.0

#須要緩存的文件

CACHE:

a.js

b.css

#不須要緩存的文件

NETWORK:

*

#沒法訪問頁面

FALLBACK:

404.html

3.manifest文件的mime-type必須是 text/cache-manifest類型。

十一、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。

離線的狀況下，瀏覽器就直接使用離線存儲的資源。

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

cookie 是網站爲了標識用戶信息而存儲在本地（client side）上的數據，通常會加密

cookie數據始終在同源請求中傳遞，即在瀏覽器和服務器之間來回傳遞

seesionstorage 和 localstorage 不會把數據發到服務器，僅在本地保存

存儲大小，cookie的大小不能超過4k

sessionstorage 和 localstorage 的大小通常在5M以上，比cookie大的多

有效時間不一樣

localstorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據

sessionstorage 數據在當前瀏覽器窗口關閉後自動刪除

cookie  設置的cookie過時以前一直有效，即便窗口或者瀏覽器關閉

1三、iframe有那些缺點？

1.會產生不少頁面，不容易管理。

2.iframe框架結構有時會讓人感到迷惑，若是框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差。

3.代碼複雜，沒法被一些搜索引擎索引到，這一點很關鍵，如今的搜索引擎爬蟲還不能很好的處理iframe中的內容，因此使用iframe會不利於搜索引擎優化。

4.不少的移動設備（PDA 手機）沒法徹底顯示框架，設備兼容性差。

5.iframe框架頁面會增長服務器的http請求，對於大型網站是不可取的。 分析了這麼多，如今基本上都是用Ajax來代替iframe，因此iframe已經漸漸的退出了前端開發。

1四、WEB標準以及W3C標準是什麼?

Web標準是W3C組織和其它標準化組織制定的一套規範集合，包含了一系列標準：HTML、XHTML、Javascript以及CSS等。

1五、xhtml和html有什麼區別?

全部標籤都必須小寫

標籤必須成雙成對

標籤順序必須正確

全部屬性都必須使用雙引號

不容許使用target="_blank"

1六、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

    （1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。

    （2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

    （3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

    （4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

1七、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什麼區別？

塊級元素：
<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>

行內元素：
<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>

空元素（void）：
<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>

1八、HTML全局屬性(global attribute)有哪些

accesskey 規定激活元素的快捷鍵。

class 規定元素的一個或多個類名（引用樣式表中的類）。

contenteditable 規定元素內容是否可編輯。

contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。

data-* 用於存儲頁面或應用程序的私有定製數據。

dir 規定元素中內容的文本方向。

draggable 規定元素是否可拖動。

dropzone 規定在拖動被拖動數據時是否進行復制、移動或連接。

hidden 規定元素仍未或再也不相關。

id 規定元素的惟一 id。

lang 規定元素內容的語言。

spellcheck 規定是否對元素進行拼寫和語法檢查。

style 規定元素的行內 CSS 樣式。

tabindex 規定元素的 tab 鍵次序。

title 規定有關元素的額外信息。

translate 規定是否應該翻譯元素內容。

 

 

 

$CSS部分

一、css sprite是什麼,有什麼優缺點

CSS Sprite技術所白了就是圖片拼合技術，使用這個技術的優勢就是減小頁面加載時的瞬間HTTP請求併發數，提升了加載速度

缺點是這些被整合到一張圖片的各類小圖案後期維護修改比較麻煩，修改任意一個小圖案都須要修改這張整圖，同時還須要注意小圖片在這個整圖上的位置不能改變

二、display: none;與visibility: hidden;的區別

display:none 不爲被隱藏的對象保留其物理空間 visibility：hidden 爲被隱藏的對象保留其物理空間

也就是display:;當他的值變成block 的時候，它所在的結構纔會被加載進來。

而visibility就會在加載頁面的同時就已經把它加載進來了，由於他的值爲hidden的時候，它所佔的空間還在。

三、link與@import的區別

Link屬於html標籤，而@import是CSS中提供的

在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成後纔會加載引用的CSS

@import只有在ie5以上才能夠被識別，而link是html標籤，不存在瀏覽器兼容性問題

Link引入樣式的權重大於@import的引用（@import是將引用的樣式導入到當前的頁面中）

四、什麼是FOUC?如何避免

若是使用import方法對css進行導入,會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:

以無樣式顯示頁面內容的瞬間閃爍,

這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC.

五、如何建立塊級格式化上下文(block formatting context),BFC有什麼用

float的值不爲」none」 (如：float:left/right)

overflow的值不爲」visible」(如：overflow:hidden)

display的值爲「table-cell」,「table-caption」, or 「inline-block」中的任何一個

position的值不爲「static」或 「relative」中的任何一個(如：position:absolute)等

做用：  1.包含浮動元素

2.不被浮動元素覆蓋

七、清除浮動的幾種方式，各自的優缺點

父級div定義height，優勢：簡單，代碼少，容易掌握，缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題

結尾處加空div標籤clear:both，優勢：簡單，代碼少，瀏覽器支持好，不容易出現怪問題，缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很不爽。

父級div定義僞類:after和zoom，優勢：瀏覽器支持好，不容易出現怪問題，缺點：代碼多，很多初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持。

父級div定義overflow:hidden，優勢：簡單，代碼少，容易掌握，缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。

父級div定義overflow:auto，優勢：簡單，代碼少，瀏覽器支持好，缺點：內部寬高超過父級div時，會出現滾動條。

父級div也一塊兒浮動，缺點：會產生新的浮動問題。

父級div定義display:table缺點：會產生新的未知問題

結尾處加br標籤clear:both，不建議使用

八、爲何要初始化CSS樣式?

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

初始化CSS樣式主要是提升編碼質量，若是不初始化整個頁面作完很糟糕，重複的CSS樣式不少。去掉標籤的默認樣式如：margin,padding，其餘瀏覽器默認解析字體大小，字體設置。

九、css3有哪些新特性

1. CSS3實現圓角（border-radius），陰影（box-shadow），邊框圖片border-image

2. 對文字加特效（text-shadow、），強制文本換行（word-wrap），線性漸變（linear-gradient）

3.旋轉,縮放,定位,傾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

4. 增長了更多的CSS選擇器、多背景、rgba()；

5. 在CSS3中惟一引入的僞元素是 ::selection ；

6. 媒體查詢(@media)，多欄佈局（flex）

十、display有哪些值？說明他們的做用

十一、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

IE 的content部分包含了 border 和 pading;

標準 W3C 盒子模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

十二、CSS優先級算法如何計算？

!important >  id > class > tag

1三、對BFC規範的理解？

BFC中的元素的佈局是不受外界的影響（咱們每每利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）而且在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。

1四、談談浮動和清除浮動

 

1五、position的值， relative和absolute`定位原點是

relative（相對定位）：定位原點是元素自己所在位置；

absolute（絕對定位）：定位原點是離本身這一級元素最近的一級position設置爲absolute或者relative的父元素的左上角爲原點的

1六、display:inline-block 何時不會顯示間隙？(攜程)

父加上樣式　font-size:0;　

1七、PNG,GIF,JPG的區別及如何選

GIF

  • 8 位像素， 256 色
  • 無損壓縮
  • 支持簡單動畫
  • 支持 boolean 透明
  • 適合簡單動畫

JPEG

  • 顏色限於 256
  • 有損壓縮
  • 可控制壓縮質量
  • 不支持透明
  • 適合照片

PNG

  • 有 PNG8 和 truecolor PNG
  • PNG8 相似 GIF 顏色上限爲 256 ，文件小，支持 alpha 透明度，無動畫
  • 適合圖標、背景、按鈕

$JavaScript

一、閉包

閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域

優勢：封裝性，方便調用。能夠簡單理解成「定義在一個函數內部的函數「。

因此，在本質上，閉包是將函數內部和函數外部鏈接起來的橋樑。

缺點：在IE瀏覽器下會形成內存泄漏問題，其餘瀏覽器容易引發內存浪費問題。濫用閉包，會形成網頁的性能問題。

特性：

  • 函數內再嵌套函數
  • 內部函數能夠引用外層的參數和變量
  • 參數和變量不會被垃圾回收機制回收

二、說說你對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到 window 對象即被終止，做用域鏈向下訪問變量是不被容許的

簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

三、JavaScript原型，原型鏈 ? 有什麼特色？

每一個對象都會在其內部初始化一個屬性，就是 prototype (原型)，當咱們訪問一個對象的屬性時

若是這個對象內部不存在這個屬性，那麼他就會去 prototype 裏找這個屬性，這 個prototype 又會有本身的 prototype ，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念

關係： instance.constructor.prototype = instance.__proto__

特色：

JavaScript 對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變

當咱們須要一個屬性的時， Javascript 引擎會先看當前對象中是否有這個屬性， 若是沒有的

就會查找他的 Prototype 對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象

四、請解釋什麼是事件代理

  1. 事件代理（ Event Delegation ），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能
  2. 能夠大量節省內存佔用，減小事件註冊，好比在 table 上代理全部 td 的 click 事件就很是棒
  3. 能夠實現當新增子對象時無需再次對其綁定

五、Javascript如何實現繼承？

  • 構造繼承
  • 原型繼承
  • 實例繼承
  • 拷貝繼承

原型 prototype 機制或 apply 和 call 方法去實現較簡單，建議使用構造函數與原型混合方式

 

functionParent(){

       this.name = 'wang';

   }

 

   functionChild(){

       this.age = 28;

   }

   Child.prototype = new Parent();//繼承了Parent，經過原型

 

   var demo = new Child();

   alert(demo.age);

   alert(demo.name);//獲得被繼承的屬性

 }

 

六、談談This對象的理解

  • this 老是指向函數的直接調用者（而非間接調用者）
  • 若是有 new 關鍵字， this 指向 new 出來的那個對象
  • 在事件中，this 指向觸發這個事件的對象，特殊的是， IE 中的 attachEvent 中的 this老是指向全局對象 Window
  • 冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發
  • 捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發
  • DOM 事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
  • 阻止冒泡：在 W3c 中，使用 stopPropagation（） 方法；在IE下設置 cancelBubble = true
  • 阻止捕獲：阻止事件的默認行爲，例如 click - <a> 後的跳轉。在 W3c 中，使用 preventDefault（） 方法，在 IE 下設置 window.event.returnValue = false
  • 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
  • 屬性和方法被加入到 this 引用的對象中
  • 新建立的對象由 this 所引用，而且最後隱式的返回 this

七、事件模型

八、new操做符具體幹了什麼呢?

九、Ajax原理

Ajax 的原理簡單來講是在用戶和服務器之間加了—箇中間層( AJAX 引擎)，經過 XmlHttpRequest 對象來向服務器發異步請求，從服務器得到數據，而後用 javascrip t來操做 DOM 而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據

Ajax 的過程只涉及JavaScript 、XMLHttpRequest 和 DOM  。

XMLHttpRequest 是 aja x的核心機制 

 

// 1. 建立鏈接

   var xhr = null;

   xhr = new XMLHttpRequest()

   // 2. 鏈接服務器

   xhr.open('get', url, true)

   // 3. 發送請求

   xhr.send(null);

   // 4. 接受請求

   xhr.onreadystatechange = function(){

       if(xhr.readyState == 4){

           if(xhr.status == 200){

               success(xhr.responseText);

           } else { // fail

               fail && fail(xhr.status);

           }

       }

   }

 

十、如何解決跨域問題?

  • jsonp 、 iframe 、 window.name 、 window.postMessage 、服務器上設置代理頁面
  • 當即執行函數,不暴露私有成員

十一、模塊化開發怎麼作？

 

var module1 = (function(){

　　　　var _count = 0;

　　　　var m1 = function(){

　　　　　　//...

　　　　};

　　　　var m2 = function(){

　　　　　　//...

　　　　};

　　　　return {

　　　　　　m1 : m1,

　　　　　　m2 : m2

　　　　};

})();

 

十二、異步加載JS的方式有哪些？

  • defer，只支持 IE
  • async ：
  • 建立 script ，插入到 DOM 中，加載完畢後 callBack
  • 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
  • setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
  • 閉包使用不當

1三、那些操做會形成內存泄漏？

1四、XML和JSON的區別？

數據體積方面

JSON 相對 於XML 來說，數據的體積小，傳遞的速度更快些。

數據交互方面

JSON 與 JavaScript 的交互更加方便，更容易解析處理，更好的數據交互

數據描述方面

JSON 對數據的描述性比 XML 較差

傳輸速度方面

JSON 的速度要遠遠快於 XML

1五、談談你對webpack的見解

  • WebPack 是一個模塊打包工具，你可使用 WebPack 管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包 Web 開發中所用到的 HTML 、 Javascript 、 CSS 以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源， webpack 有對應的模塊加載器。 webpack 模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源
  • CommonJS 是服務器端模塊的規範， Node.js 採用了這個規範。 CommonJS 規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。 AMD 規範則是非同步加載模塊，容許指定回調函數
  • AMD 推薦的風格經過返回一個對象作爲模塊對象， CommonJS 的風格經過對 module.exports或 exports 的屬性賦值來達到暴露模塊對象的目的

1六、說說你對AMD和Commonjs的理解

1七、常見web安全及防禦原理

sql 注入原理

就是經過把 SQL 命令插入到 Web 表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令

總的來講有如下幾點

永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙 "-" 進行轉換等

永遠不要使用動態拼裝SQL，可使用參數化的 SQL 或者直接使用存儲過程進行數據查詢存取

永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接

不要把機密信息明文存放，請加密或者 hash 掉密碼和敏感的信息

XSS原理及防範

  • Xss(cross-site scripting) 攻擊指的是攻擊者往 Web 頁面裏插入惡意 html 標籤或者 javascript 代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取 cookie 中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點
  • 首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對 」<」,」>」,」;」,」’」 等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把 html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊

XSS防範方法

XSS與CSRF有什麼區別嗎？

XSS 是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。 CSRF 是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次 CSRF 攻擊，受害者必須依次完成兩個步驟

登陸受信任網站 A ，並在本地生成 Cookie

  • 在不登出 A 的狀況下，訪問危險網站 B
  • 服務端的 CSRF 方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數
  • 經過驗證碼的方法

CSRF的防護

1八、用過哪些設計模式？

工廠模式：

工廠模式解決了重複實例化的問題，但還有一個問題,那就是識別問題，由於根本沒法

主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是 new 關鍵字

構造函數模式

使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於

直接將屬性和方法賦值給 this 對象;

1九、爲何要有同源限制？

  • 同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議
  • 舉例說明：好比一個黑客程序，他利用 Iframe 把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過 Javascript 讀取到你的表單中 input 中的內容，這樣用戶名，密碼就輕鬆到手了。
  • offsetWidth/offsetHeight 返回值包含 content + padding + border ，效果與e.getBoundingClientRect()相同
  • clientWidth/clientHeight 返回值只包含 content + padding ，若是有滾動條，也 不包含滾動條
  • scrollWidth/scrollHeight 返回值包含 content + padding + 溢出內容的尺寸
  • 對象字面量： var obj = {};
  • 構造函數： var obj = new Object();
  • Object.create(): var obj = Object.create(Object.prototype);

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

2一、javascript有哪些方法定義對象

2二、常見兼容性問題？

png24 位的圖片在iE6瀏覽器上出現背景，解決方案是作成 PNG8

瀏覽器默認的 margin 和 padding 不一樣。解決方案是加一個全局的 *{margin:0;padding:0;} 來統一,，可是全局效率很低，通常是以下這樣解決：

 

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{

margin:0;

padding:0;

}

IE 下, event 對象有 x , y 屬性,可是沒有 pageX , pageY 屬性

Firefox 下, event 對象有 pageX , pageY 屬性,可是沒有 x,y 屬性.

2二、說說你對promise的瞭解

依照 Promise/A+ 的定義， Promise 有四種狀態：

pending: 初始狀態, 非 fulfilled 或 rejected.

fulfilled: 成功的操做.

rejected: 失敗的操做.

settled: Promise 已被 fulfilled 或 rejected ，且不是 pending

另外， fulfilled 與 rejected 一塊兒合稱 settled

Promise 對象用來進行延遲( deferred ) 和異步( asynchronous ) 計算

Promise 的構造函數

構造一個 Promise ，最基本的用法以下：

 

var promise = new Promise(function(resolve, reject){

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }

});

 

Promise 實例擁有 then 方法（具備 then 方法的對象，一般被稱爲 thenable ）。它的使用方法以下：

promise.then(onFulfilled, onRejected)

接收兩個函數做爲參數，一個在 fulfilled 的時候被調用，一個在 rejected 的時候被調用，接收參數就是 future ， onFulfilled 對應 resolve , onRejected 對應 reject

2三、你以爲jQuery源碼有哪些寫的好的地方

jquery 源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入 window 對象參數，可使 window 對象做爲局部變量使用，好處是當 jquery 中訪問 window 對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入 undefined 參數，能夠縮短查找 undefined 時的做用域鏈

jquery 將一些原型屬性和方法封裝在了 jquery.prototype 中，爲了縮短名稱，又賦值給了jquery.fn ，這是很形象的寫法

有一些數組或對象的方法常常能使用到， jQuery 將其保存爲局部變量以提升訪問速度

jquery 實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率

2四、vue、react、angular

Vue.js 
一個用於建立 web 交互界面的庫，是一個精簡的 MVVM 。它經過雙向數據綁定把 View 層和Model 層鏈接了起來。實際的 DOM 封裝和輸出格式都被抽象爲了 Directives 和 Filters

AngularJS 
是一個比較完善的前端 MVVM 框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能，模板功能強大豐富，自帶了豐富的 Angular 指令

react 
React 僅僅是 VIEW 層是 facebook 公司。推出的一個用於構建 UI 的一個庫，可以實現服務器端的渲染。用了 virtual dom ，因此性能很好。

2五、Node的應用場景

特色：

一、它是一個 Javascript 運行環境

二、依賴於 Chrome V8 引擎進行代碼解釋

三、事件驅動

四、非阻塞 I/O

五、單進程，單線程

優勢：

高併發（最重要的優勢）

缺點：

一、只支持單 核CPU ，不能充分利用 CPU

二、可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰

2六、談談你對AMD、CMD的理解

CommonJS 是服務器端模塊的規範， Node.js 採用了這個規範。 CommonJS 規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。 AMD 規範則是非同步加載模塊，容許指定回調函數

AMD 推薦的風格經過返回一個對象作爲模塊對象， CommonJS 的風格經過對 module.exports或 exports 的屬性賦值來達到暴露模塊對象的目的

2七、那些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

2八、web開發中會話跟蹤的方法有哪些

cookie

session

url 重寫

隱藏 input

ip 地址

2九、介紹js的基本數據類型

Undefined 、 Null 、 Boolean 、 Number 、 String

30、介紹js有哪些內置對象？

Object 是 JavaScript 中全部對象的父對象

數據封裝類對象： Object 、 Array 、 Boolean 、 Number 和 String

其餘對象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error

3一、說幾條寫JavaScript的基本規範？

不要在同一行聲明多個變量

請使用 ===/!== 來比較 true/false 或者數值

使用對象字面量替代 new Array 這種形式

不要使用全局函數

Switch 語句必須帶有 default 分支

If 語句必須使用大括號

for-in 循環中的變量 應該使用 var 關鍵字明確限定做用域，從而避免做用域污

3二、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

棧：原始數據類型（ Undefined ， Null ， Boolean ， Numbe r、 String ）

堆：引用數據類型（對象、數組和函數）

兩種類型的區別是：存儲位置不一樣；

原始數據類型直接存儲在棧( stack )中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；

引用數據類型存儲在堆( heap )中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其

在棧中的地址，取得地址後從堆中得到實體

 

3三、javascript建立對象的幾種方式？

javascript 建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用 JSON ；但寫法有不少種，也能混合使用

對象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

 

用 function 來模擬無參的構造函數

 

functionPerson(){}

    var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class

        person.name="Mark";

        person.age="25";

        person.work=function(){

        alert(person.name+" hello...");

    }

person.work();

 

 

用 function 來模擬參構造函數來實現（用 this 關鍵字定義構造的上下文屬性）

 

functionPet(name,age,hobby){

       this.name=name;//this做用域：當前對象

       this.age=age;

       this.hobby=hobby;

       this.eat=function(){

          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");

       }

    }

    var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象

maidou.eat();//調用eat方法

 

 

用工廠方式來建立（內置對象）

 

var wcDog =new Object();

     wcDog.name="旺財";

     wcDog.age=3;

     wcDog.work=function(){

       alert("我是"+wcDog.name+",汪汪汪......");

     }

     wcDog.work();

 

 

用原型方式來建立

 

function Dog(){

 

     }

     Dog.prototype.name="旺財";

     Dog.prototype.eat=function(){

     alert(this.name+"是個吃貨");

     }

     var wangcai =new Dog();

     wangcai.eat();

 

用混合方式來建立

 

function Car(name,price){

     this.name=name;

     this.price=price;

   }

    Car.prototype.sell=function(){

      alert("我是"+this.name+"，我如今賣"+this.price+"萬元");

     }

   var camry =new Car("凱美瑞",27);

   camry.sell();

 

3四、eval是作什麼的？

它的功能是把對應的字符串解析成 JS 代碼並運行

應該避免使用 eval ，不安全，很是耗性能（ 2 次，一次解析成 js 語句，一次執行）

由 JSON 字符串轉換爲JSON對象的時候能夠用 eval，var obj =eval('('+ str +')')

3五、null，undefined 的區別？

undefined 表示不存在這個值。

undefined :是一個表示」無」的原始值或者說表示」缺乏值」，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined

例如變量被聲明瞭，但沒有賦值時，就等於 undefined

null 表示一個對象被定義了，值爲「空值」

null : 是一個對象(空對象, 沒有任何屬性和方法)

例如做爲函數的參數，表示該函數的參數不是對象；

在驗證 null 時，必定要使用 === ，由於 == 沒法分別 null 和 undefined

3六、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？

[1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix) ，其中 radix 表示解析時用的基數。

map 傳了 3 個 (element, index, array) ，對應的 radix 不合法致使解析失敗。

3七、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？

use strict 是一種 ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使 JS 編碼更加規範化的模式,消除 Javascript 語法的一些不合理、不嚴謹之處，減小一些怪異行爲

3八、JSON 的瞭解？**

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式

它是基於 JavaScript 的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

JSON 字符串轉換爲JSON對象:

var obj =eval('('+ str +')');var obj = str.parseJSON();var obj = JSON.parse(str);

JSON 對象轉換爲JSON字符串：

var last=obj.toJSONString();var last=JSON.stringify(obj);

3九、js延遲加載的方式有哪些？

defer 和 async 、動態建立 DOM 方式（用得最多）、按需異步載入 js

40、同步和異步的區別?

同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做

異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容

4一、漸進加強和優雅降級

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

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

4二、defer和async

defer 並行加載 js 文件，會按照頁面上 script 標籤的順序執行

async 並行加載 js 文件，下載完成當即執行，不會按照頁面上 script 標籤的順序執行

4三、說說嚴格模式的限制

  • 變量必須聲明後再使用
  • 函數的參數不能有同名屬性，不然報錯
  • 不能使用 with 語句
  • 禁止 this 指向全局對象

4四、attribute和property的區別是什麼？

attribute 是 dom 元素在文檔中做爲 html 標籤擁有的屬性；

property 就是 dom 元素在 js 中做爲對象擁有的屬性。

對於 html 的標準屬性來講， attribute 和 property 是同步的，是會自動更新的

可是對於自定義的屬性來講，他們是不一樣步的

4五、談談你對ES6的理解

  • 新增模板字符串（爲 JavaScript 提供了簡單的字符串插值功能）
  • 箭頭函數
  • for-of （用來遍歷數據—例如數組中的值。）
  • arguments 對象可被不定參數和默認參數完美代替。
  • ES6 將p romise 對象歸入規範，提供了原生的 Promise 對象。
  • 增長了 let 和 const 命令，用來聲明變量。
  • 增長了塊級做用域。
  • let 命令實際上就增長了塊級做用域。
  • 還有就是引入 module 模塊的概念

$編程題

一、寫一個通用的事件偵聽器函數

// event(事件)工具集，來源：github.com/markyun

   markyun.Event = {

      

       // 視能力分別使用dom0||dom2||IE方式 來綁定事件

       // 參數： 操做的元素,事件名稱 ,事件處理程序

       addEvent : function(element, type, handler){

           if (element.addEventListener) {

               //事件類型、須要執行的函數、是否捕捉

               element.addEventListener(type, handler, false);

           } else if (element.attachEvent) {

               element.attachEvent('on' + type, function(){

                   handler.call(element);

               });

           } else {

               element['on' + type] = handler;

           }

       },

       // 移除事件

       removeEvent : function(element, type, handler){

           if (element.removeEventListener) {

               element.removeEventListener(type, handler, false);

           } else if (element.datachEvent) {

               element.detachEvent('on' + type, handler);

           } else {

               element['on' + type] = null;

           }

       },

       // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)

       stopPropagation : function(ev){

           if (ev.stopPropagation) {

               ev.stopPropagation();

           } else {

               ev.cancelBubble = true;

           }

       },

       // 取消事件的默認行爲

       preventDefault : function(event){

           if (event.preventDefault) {

               event.preventDefault();

           } else {

               event.returnValue = false;

           }

       },

       // 獲取事件目標

       getTarget : function(event){

           return event.target || event.srcElement;

       }

二、如何判斷一個對象是否爲數組

functionisArray(arg){

    if (typeof arg === 'object') {

        return Object.prototype.toString.call(arg) === '[object Array]';

    }

    return false;

}

三、冒泡排序

每次比較相鄰的兩個數，若是後一個比前一個小，換位置

 

var arr = [3, 1, 4, 6, 5, 7, 2];

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

    for(var j = 0; j < arr.length - 1; j++) {

        if(arr[j + 1] < arr[j]) {

            var temp;

            temp = arr[j];

            arr[j] = arr[j + 1];

            arr[j + 1] = temp;

        }

    }

}return arr;

}

console.log(bubbleSort(arr));

 

四、快速排序

  • 採用二分法，取出中間數，數組每次和中間數比較，小的放到左邊，大的放到右邊

 

var arr = [3, 1, 4, 6, 5, 7, 2];

functionquickSort(arr){

    if(arr.length == 0) {

        return [];    // 返回空數組

    }

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

    var c = arr.splice(cIndex, 1);

    var l = [];

    var r = [];

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

        if(arr[i] < c) {

            l.push(arr[i]);

        } else {

            r.push(arr[i]);

        }

    }

    return quickSort(l).concat(c, quickSort(r));

}

console.log(quickSort(arr));

 

五、編寫一個方法 求一個字符串的字節長度

假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

 

functionGetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

 

$其餘

一、談談你對重構的理解

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化， 在擴展的同時保持一致的UI

對於傳統的網站來講重構一般是：

表格( table )佈局改成 DIV+CSS

使網站前端兼容於現代瀏覽器(針對於不合規範的 CSS 、如對IE6有效的)

對於移動平臺的優化

針對於 SEO 進行優化

二、什麼樣的前端代碼是好的

  • 高複用低耦合，這樣文件小，好維護，並且好擴展。

三、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近

實現界面交互

提高用戶體驗

有了Node.js，前端能夠實現服務端的一些事情

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，與團隊成員， UI 設計，產品經理的溝通；

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

四、你以爲前端工程的價值體如今哪

爲簡化用戶使用提供技術支持（交互部分）

爲多個瀏覽器兼容性提供支持

爲提升用戶瀏覽速度（瀏覽器性能）提供支持

爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持

爲展現數據提供支持（數據接口）

五、平時如何管理你的項目？

先期團隊必須肯定好全局樣式（ globe.css ），編碼模式( utf-8 ) 等；

編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

頁面進行標註（例如 頁面 模塊 開始和結束）；

CSS 跟 HTML 分文件夾並行存放，命名都得統一（例如 style.css ）；

JS 分文件夾存放 命名以該 JS 功能爲準的英文翻譯。

圖片採用整合的 images.png png8 格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理；

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程