、請談談你對性能優化的認識？

網頁內容

減少http請求次數

80%的響應時間花在下載網頁內容(images, stylesheets, javascripts,scripts, flash等)。減少請求次數是縮短響應時間的關鍵！可以通過簡化頁面設計來減少請求次數，但頁面內容較多可以采用以下技巧。

圖片顯示效果如左圖

減少DNS查詢次數

DNS查詢也消耗響應時間，如果我們的網頁內容來自各個不同的domain (比如嵌入了開放廣告，引用了外部圖片或腳本)，那么客戶端首次解析這些domain也需要消耗一定的時間。DNS查詢結果緩存在本地系統和瀏覽器中一段時間，所以DNS查詢一般是對首次訪問響應速度有所影響。下面是我清空本地dns后訪問博客園主頁dns的查詢請求。

緩存Ajax

Ajax可以幫助我們異步的下載網頁內容，但是有些網頁內容即使是異步的，用戶還是在等待它的返回結果，例如ajax的返回是用戶聯系人的下拉列表。所以我們還是要注意盡量應用以下規則提高ajax的響應速度。

延遲加載

這里討論延遲加載需要我們知道我們的網頁最初加載需要的最小內容集是什么。剩下的內容就可以推到延遲加載的集合中。

Javascript是典型的可以延遲加載內容。一個比較激進的做法是開發網頁時先確保網頁在沒有Javascript的時候也可以基本工作，然后通過延遲加載腳本來完成一些高級的功能。

延遲加載

這里討論延遲加載需要我們知道我們的網頁最初加載需要的最小內容集是什么。剩下的內容就可以推到延遲加載的集合中。

Javascript是典型的可以延遲加載內容。一個比較激進的做法是開發網頁時先確保網頁在沒有Javascript的時候也可以基本工作，然后通過延遲加載腳本來完成一些高級的功能。

2、如何避免XSS？

禁止危險腳本

IE8是第一款內置了XSS腳本攔截保護的瀏覽器。谷歌的Chrome也會緊隨其后推出類似功能。這兩款瀏覽器都會首先查看來自某個Web服務器的腳本是否是惡意的——如果是，就攔截它。在今年4月的黑帽歐洲2010大會上，研究專家David Lindsay和Eduardo Vela Nava卻演示了一種可以破除這種攔截的辦法，不過谷歌已經修復了Chrome中的這個漏洞。微軟則在今年1月（補丁MS10-002）和3月（MS10-018）也已解決了大部分問題，并計劃在6月修復第3個漏洞，所以在你讀到這篇文章的時候，破除XSS腳本攔截的問題可能已經完全解決了。

Firefox的用戶則可以利用免費的NoScrpit附加組件有選擇地攔截腳本。比如說，你可以放行一段Flash視頻，而同時攔截該網站上的其他腳本組件。IE和Chrome在攔截可疑腳本方面沒有這么細的粒度——它們是要么全攔截，要么全不攔截。

NoScrpit也有一個問題，那就是大多數用戶并不喜歡放行個別腳本的做法，因為這樣會帶來不便。不過攔截和放行今后可能會成為你的第二天性。你還可以對某個特定網站上的所有腳本進行認證，無論是為了一次性訪問還是今后的所有訪問，這樣的認證如今在IE 8和chrome中也可以做了，使得防范XSS攻擊實現更加可能。

3、平時如何管理項目？

所謂項目，簡單地說，就是在既定的資源和要求的約束下，為實現某種目的而相互聯系的一次性工作任務。一般來說，項目具有如下的基本特征：

1）明確的目標其結果只可能是一種期望的產品，也可能是一種所希望得到的服務。

2）獨特的性質每一個項目都是唯一的。

3）資源成本的約束性每一項目都需要運用各種資源來實施，而資源是有限的。

4）項目實施的一次性項目不能重復。

5）項目的不確定性在項目的具體實施中，外部和內部因素總是會發生一些變化，因此項目也會出現不確定性。

4、請談談項目的迭代周期？

軟件項目開發，一般都會采用增量、迭代、（或者叫進化、演化、演進）的軟件開發模型，眾多的軟件開發模型大多是以經典的瀑布模型為基礎進行改進、變形，改進原則是：增加客戶在整個項目周期中的參與度，降低軟件開發過程中的風險，增強軟件項目的后期可維護性。

不同的軟件開發模型，迭代周期長短也不相同，有的是一個月，有的是兩周，我們一般都是根據實際情況確定，一個周期完成，將項目成果（可運行的軟件）提交給用戶（或進行內部評審），通過后就進入下一個迭代開發周期

5、工作中用過什么構建工具？

答：用過gulp。

第一步：安裝node和npm,搭建node環境。

第二步：安裝gulp

第三步：新建Gulpfile文件，運行gulp

安裝依賴，提醒下，如果以上命令提示權限錯誤，需要添加 sudo 再次嘗試。

Gruntfile維護起來那么困難，有幾個原因：

配置和運行分離

程序員都知道，變量的聲明和使用挨在一起，最方便理解和修改。但Gruntfile里，配置Task和調用它們的地方離得很遠，極大地增加了心智負擔

每個插件做的事太多

每個Task的結果必須寫到磁盤文件，另一個Task再讀，損害性能倒是小事，更麻煩的是讓整個過程變復雜了。就像一個個小作坊，來料加工又返回給客戶，這中間的溝通成本、出錯機會都大大增加。配置項過多做事多了，配置項自然也多。至少輸入和輸出的位置得配吧。每個插件的配置規則還不盡相同。用每個插件，都得去學習一番。

6、談談你對模塊化的理解？

什么是模塊化？

? 模塊化就是為了減少系統耦合度，提高高內聚，減少資源循環依賴，增強系統框架設計。

? 讓開發者便于維護,同時也讓邏輯相同的部分可復用

? 模塊化開發：針對js、css，以功能或業務為單元組織代碼。js方面解決獨立作用域、依賴管理、

api暴露、按需加載與執行、安全合并等問題，css方面解決依賴管理、組件內部樣式管理等問題。

任何事物都有一個過程，那么模塊化的過程通俗點講就是：

模塊化的過程就是：

? 1、拆分

將整個系統按功能,格式,加載順序,繼承關系分割為一個一個單獨的部分.

注意:拆分的粒度問題,可復用問題,效率問題.如何這些問題處理的不好，就有可能出現不想要的后果。

將功能或特征相似的部分組合在一起,組成一個資源塊.

將每個資源塊按找需求,功能場景以及目錄約束放到固定的地方以供調用.

模塊的歷程

模塊化的發展也是從草根一步一步走過來的。從最開始到現在成熟方案：

1. namespace

2. sass,less

3. AMD&CMD

4. html模版

5. grunt,gulp,webpack

6. FIS,YUI,KISSY

7、平時都用什么第三方框架？

jQuery、Bootstrap、angularjs、vue、underscore、seajs、RequireJS…

8、請描述一下cookie，sessionStorage和localStorage的區別？

答：cookies兼容所有的瀏覽器，Html5提供的storage存儲方式。

? Document.cookie

? Window.localstorage

? Window.sessionstorage

cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

9、如何使用緩存？

可以基于http的頭信息控制緩存

ajax請求對早期的IE瀏覽器默認就是緩存的，可以通過時間戳防止緩存

10、談談你對預加載的理解？

Web預加載指的是在網頁全加載完成之前，在頁面優先顯示一些主要內容，以提高用戶體驗。對于一個較龐大的網站，如果沒有使用預加載技術，用戶界面就會長時間顯示一片空白，直到資源加載完成，頁面才會顯示內容。

例如，可以通過js預先從服務加載圖片資源(動態創建Image，設置src屬性)，只要瀏覽器把圖片下載到本地，就會被緩存，再次請求相當的src時就會優先尋找瀏覽器緩存，提高訪問速度。

11、緩存和預加載的區別是什么？

緩存就是把請求過的數據緩存起來，下次請求的時候直接使用緩存內容，提高響應速度

預加載指的是提前把需要的內容加載完成，訪問的時候可以明天提高響應效率，比如圖片的預加載（可以提前加載一定數量的圖片，當用戶訪問圖片的時候一般只看前幾張，由于是預加載好的，所以速度比較快）

12、圖片如何壓縮？

可以使用一些在線的圖片壓縮工具

優先用 png 而不是 gif

壓縮 png

去掉 jpg 的 metadata

壓縮 gif 動畫

嘗試使用 png8

避免使用 AlphaImageLoader

壓縮動態生成的圖像

使 favicon 更小 可緩存

使用 CSS Sprites

13、壓縮文件有哪些方法？

使用Grunt、Sass、ant壓縮

14、如何區分靜態頁面和動態頁面？

答：要區分這兩個，最簡單的方法就是看后綴了，動態網頁網址中有兩個標志性的符號“?”和“&”（有的可能沒有&），這個問號和&就是用來帶參數的。現在幾乎愛所有的網頁都是動態網頁。

15、字符串拼接和模板引擎，項目中會如何操作？模板引擎會不會利于SEO優化？

簡單的數據渲染，拼接字符串即可，稍微復雜的業務邏輯使用前端模板引擎，過于復雜的頁面基本上使用后臺渲染的方式；模板引擎會影響SEO優化，為了解決這個問題，需要關注SEO的頁面最好采用后臺渲染的方式。

16、前臺兼容性問題有哪些？

答：主要是常用瀏覽的（前端）API差異，渲染差異，等等

17、你如何對網站的文件和資源進行優化?期待的解決方案包括？

答：文件合并

文件最小化/文件壓縮

使用CDN托管

緩存的使用

18、內存泄漏怎么理解？

答： IE6時代有bug，閉包會造成內存泄漏，這個現在已經無須考慮了。

其次，閉包本身不會造成內存泄漏，但閉包過多很容易導致內存泄漏。

這句話很矛盾，技術上講，閉包是不會造成內存泄漏的，瀏覽器的bug除外。但是，閉包會造成對象引用的生命周期脫離當前函數的上下文，因此，如果不仔細考慮閉包函數的生命周期，的確有可能出現意料之外的內存泄漏，當然，從嚴格意義上講，這是程序員自己的bug，而不是閉包的錯。

19、微格式到底是做啥用？

答：是開放的數據格式，面向的是普通用戶，任何用戶可以透過簡單的程序讀取微格式內容。而不是像Flickr、Amazon、Google等提供特定的面向技術人員的API（一般基于XML-PRC、REST，相對復雜）。RSS具有微格式的部分優點，但限制還是比較多的，比如有限的元數據（標題、描述、URL等），不能更好地描述語義，不太容易與已存在的工具結合等。用微格式可以來聚合外部Blog，Flickr，YouTube，MapQuest，甚至MySpace里的內容。

微格式實際就是為現有的(X)HTML元素添加元數據和其他屬性，增強語義。

20、懶加載是用滾輪判斷高度好還是用插件？

使用插件比較好，插件考慮的問題比較全面，僅僅通過滾輪高度判斷很容易導致一些副作用（比如一次性請求多次）

21、如何緩存整個頁面，在沒有網絡的時候可以來回的跳轉？

使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。

如需啟用應用程序緩存，請在文檔的 <html> 標簽中包含 manifest 屬性。

每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。

manifest 文件的建議的文件擴展名是：".appcache"。

manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。

manifest 文件可分為三個部分：

CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存

NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存

FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

實例 - 完整的 Manifest 文件

22、CDN是啥？

CDN的全稱：是Content DeliveryNetwork，即內容分發網絡，加速的意思，那么網站CND服務就是網站加速服務。

CDN加速原理：CDN加速將網站的內容緩存在網絡邊緣（離用戶接入網絡最近的地方），然后在用戶訪問網站內容的時候，通過調度系統將用戶的請求路由或者引導到離用戶接入網絡最近或者訪問效果最佳的緩存服務器上，有該緩存服務器為用戶提供內容服務；相對于直接訪問源站，這種方式縮短了用戶和內容之間的網絡距離，從而達到加速的效果。

CDN的特點：

1、本地加速 提高了企業站點(尤其含有大量圖片和靜態頁面站點)的訪問速度，并大大提高以上性質站點的穩定性

2、鏡像服務 消除了不同運營商之間互聯的瓶頸造成的影響，實現了跨運營商的網絡加速，保證不同網絡中的用戶都能得到良好的訪問質量。

3、遠程加速 遠程訪問用戶根據DNS負載均衡技術 智能自動選擇Cache服務器，選擇最快的Cache服務器，加快遠程訪問的速度

4、帶寬優化 自動生成服務器的遠程Mirror(鏡像)cache服務器，遠程用戶訪問時從cache服務器上讀取數據，減少遠程訪問的帶寬、分擔網絡流量、減輕原站點WEB服務器負載等功能。

5、集群抗攻擊 廣泛分布的CDN節點加上節點之間的智能冗于機制，可以有效地預防黑客入侵以及降低各種D.D.o.S攻擊對網站的影響，同時保證較好的服務質量。

23、瀏覽器一次可以從一個域名下請求多少資源？

瀏覽器的并發請求數目限制是針對同一域名的，同一時間針對同一域名下的請求有一定數量限制，不同瀏覽器這個限制的數目不一樣，超過限制數目的請求會被阻塞；

目前的話，所有瀏覽器的并發數目一般限制在10以內。

24、什么是垃圾回收機制（GC）？

早期的計算機語言，比如C和C++，需要開發者手動的來跟蹤內存，這種機制的優點是內存分配和釋放的效率很高。但是它也有著它的缺點，程序員很容易不小心忘記釋放內存，從而造成內存的泄露。

新的編程語言，比如JAVA, C#， javascript, 都提供了所謂“垃圾回收的機制”，運行時自身會運行相應的垃圾回收機制。程序員只需要申請內存，而不需要關注內存的釋放。垃圾回收器(GC)會在適當的時候將已經終止生命周期的變量的內存給釋放掉。GC的優點就在于它大大簡化了應用層開發的復雜度，降低了內存泄露的風險。

25、image和canvas在處理圖片的時候有什么區別？

image是通過對象的形式描述圖片的

canvas通過專門的API將圖片繪制在畫布上

26、簡述移動開發的注意點,如何做好不同手機的適配,你以前的項目是怎么做的?

1、單獨做移動端項目，采用百分比布局

2、采用響應式的方式做適配

27、響應式布局的時候，輪播圖使用兩張不同的圖片去適配大屏幕和超小屏幕，還是一張圖片進行壓縮適配不同終端，說明原因？

最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕，這樣可以針對不同設備的屏幕大小，來加載響應的圖片，減少超小屏幕設備的網絡流量消耗，加快響應速度，同時防止圖片在大屏幕下分辨率不夠導致失真的問題。

28、http和tcp有什么區別？

TPC/IP協議是傳輸層協議，主要解決數據如何在網絡中傳輸，是一種“經過三次握手”的可靠的傳輸方式；

HTTP協議即超文本傳送協議(Hypertext Transfer Protocol )，是應用層協議，是Web聯網的基礎，也是手機聯網常用的協議之一，HTTP協議是建立在TCP協議之上的一種應用。

29、向git中添加一個文件并commit，然后push到remote server,請寫出相關命令？

$ git add README.md
$git commit -m "add README.md"
$ git push origin master

30、請把以下HTML文檔翻譯成MarkDown格式？

<h3>Header</h3>

<p>Hello world!<a>Google</a></p>

<ol>

<li>NumberOne</li>

<li>NumberTwo</li>

</ol>

### Header

Hello world

1. Number One

2. Number Two

35、設計模式有哪些？列舉你在前端開發工作中自己應用到或者了解到其他框架所用到的設計模式？

單例、工廠、觀察者、適配器、代理模式

36、請描述你熟悉的語言的垃圾回收(GC)機制，他們對循環引用是如何處理的？如何查找內存泄漏(MemoryLeak)?

JavaScript的垃圾回收機制主要是根據數據是否還存在引用，沒有引用的數據空間可能在某個時間被回收；在java中垃圾回收機制采用對象遍歷來解決循環引用；windows的任務管理器就可以查看到內存泄露

31、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?

答：Ie(Ie內核) 火狐（Gecko）谷歌（webkit） opear(Presto)

32、寫出幾種IE6 BUG的解決方法？

答：1.雙邊距BUG float引起的使用display

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

3.超鏈接hover 點擊后失效使用正確的書寫順序 link visitedhover active

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

5.Png 透明使用js代碼改

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

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

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

33、圖片優化

項目中圖片處理相關的優化，項目中用到的優化方案，圖片大小達到多少的時候選擇處理？

答：1、首先了解在web開發中常見的圖片有那些格式。

JPG 通常使用的背景圖片，照片圖片，商品圖片等等。這一類型的圖片都屬于大尺寸圖片或較大尺寸圖片一般使用的是這種格式。

PNG 這種格式的又分為兩種一種PNG-8，一種 PNG-24。

PNG-8格式不支持半透明，也是IE6兼容的圖片存儲方式。

PNG-24圖片質量要求較高的半透明或全透明背景，保存成PNG-24更合適（為了兼容IE可以試用js插件pngfix）一般是背景圖標中使用的多。

GIF 這種格式顯而易見的是在需要gif動畫的時候使用了。

2．優化方案

l 樣式代替圖片

例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對于那些低端瀏覽器，我們并不會完全拋棄他們，“漸進增強”則是一個很好的解決方案。

l 精靈圖

CSS Sprites，將同類型的圖標或按鈕等背景圖合到一張大圖中，減少頁面請求。

l 字體圖標

Icon Font，將圖標做成字體文件。優點是圖標支持多個尺寸，兼容所有瀏覽器，減少頁面請求等。美中不足的是只支持純色的icon。SVG，對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！

l Base64

將圖片轉化為base64編碼格式，資源內嵌于CSS或HTML中，不必單獨請求。

Base64格式

data:[][;charset=][;base64],

Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAA L...."); }

Base64 在HTML中的使用

<imgwidth="40"height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

l 圖片響應式

通常圖片加載都是可以通過lazy加載的形式來的，那么可以在加載的時候來判斷屏幕的尺寸來達到加載大圖還是小圖的目的來達到優化。

34、你知道有哪些方法可以提高網站的性能？

答：我們從兩個方面來講：

1. 資源加載

CSS頂部, JS底部

CSS JS文件壓縮

盡量使用圖片使用精靈圖，字體圖標

圖片加載可通過懶加載的方式。

總之就是減少資源體積減少資源請求次數。

2. 代碼性能

Css:

使用CSS縮寫，減少代碼量；

減少查詢層級：如.header .logo要好過.header .top .logo；

減少查詢范圍：如.header>li要好過.header li；

避免TAG標簽與CLASS或ID并存：如a.top、button#submit；

刪除重復的CSS；

….

Html:

減少DOM節點：加速頁面渲染；

正確的閉合標簽：如避免使用<div/>，瀏覽器會多一個將它解析成<div\></div\>的過程；

減少頁面重繪。比如給圖片加上正確的寬高值：這可以減少頁面重繪，

……

Js：

盡量少用全局變量；

使用事件代理綁定事件，如將事件綁定在body上進行代理；

避免頻繁操作DOM節點；

減少對象查找，如a.b.c.d這種查找方式非常耗性能，盡可能把它定義在變量里；

Angular、主流框架和服務器相關問題

1、 ng-app是什么？

答：

ng-app 指令用于告訴 AngularJS 應用當前這個元素是根元素。

所有 AngularJS 應用都必須要要一個根元素。

HTML 文檔中只允許有一個 ng-app 指令，如果有多個 ng-app 指令，則只有第一個會被使用。

2、說說MVC和MVVM分別是什么？

MVC全名是Model View 。是Controller模型(model)－視圖(view)－控制器(controller)的縮寫

MVVM是Model-View-ViewModel的簡寫

3、?g是什么？

在Node.js中-g表示全局安裝模塊

4、自定義指令的類型（E，A，C，M）？

元素（E）、屬性（A）、類（C）、注釋（M）

5、$scope和自定義指令里的scope有啥區別？

$scope 對象在 AngularJS 中充當數據模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全與通常意義上的數據模型一樣,因為 $scope 并不處理和操作數據,它只是建立了視圖和 HTML 之間的橋梁,讓視圖和Controller 之間可以友好的通訊.

自定義指令里的scope表示指令的作用域，它有三個可選值：true、false、對象{}

6、Ionic中的路由？

Ionic也是基于Angular的，使用的是ui-router,

ui-router的核心理念是將子視圖集合抽象為一個狀態機，導航意味著 狀態的切換,Ionic之所以沒有使用Angular官方的ngRoute,是回ngRoute缺少一些高級的特性，比如視圖命名,視圖嵌套。

7、filter？

過濾器

8、ng-bind？

ng-bind 指令告訴 AngularJS 使用給定的變量或表達式的值來替換 HTML 元素的內容。

如果給定的變量或表達式修改了，指定替換的 HTML 元素也會修改。

9、說一說link？

link中可以拿到scope和controller，可以與scope進行數據綁定，與其他指令進行通信。

10、為什么angular不推薦使用dom操作？

Angular倡導以測試驅動開發，在的service或者controller中出現了DOM操作，那么也就意味著的測試是無法通過的

使用Angular的其中一個好處是啥，那就是雙向數據綁定，這樣就能專注于處理業務邏輯，無需關系一堆堆的DOM操作。如果在Angular的代碼中還到處充斥著各種DOM操作，那為什么不直接使用jquery去開發呢

11、看過Angular的源碼嗎，它是怎么實現雙向數據綁定的？

angular對常用的dom事件，xhr事件等做了封裝， 在里面觸發進入angular的digest流程。

在digest流程里面， 會從rootscope開始遍歷， 檢查所有的watcher

12、講講promise:{

promise:null;;

｝？

13、ui-router 和 ng-router區別？

AngularJS的ng-route模塊為控制器和視圖提供了[Deep-Linking]URL

ui-router的核心理念是將子視圖集合抽象為一個狀態機，導航意味著 狀態的切換。

14、什么是指令？

指令是指示計算機執行某種操作的命令,它由一串二進制數碼組成。一條指令通常由兩個部分組成:操作碼+地址碼。

15、service服務三種方式是什么？

angularjs 中可通過三種（$provider,$factory,$service）方式自定義服務

16、gulp任務都是怎么定義，怎么執行的？

通過 gulp.task方法定義任務,在項目中新建gulpfile.js文件，書寫代碼,如:

var gulp=require(‘gulp’)

gulp.tasks(

‘script’ // 任務名

,function(){

// 在這里寫任務需要執行的代碼

});

在命令輸入`gulp 任務`,可以執行所在目錄gulpfile.js文件中的任務。

17、Bootstrap中最多可以分多少列？lg、md、sm、xs這幾個屏幕寬度的界限是多少？

12列

.col-xs- 超小屏幕手機 (<768px)

.col-sm- 小屏幕平板 (≥768px)

.col-md- 中等屏幕桌面顯示器 (≥992px)

.col-lg- 大屏幕大桌面顯示器 (≥1200px)

18、angular中方法apply和digest區別？

當數據出現沒有經過angular但是發生改變的情況下，需要調用apply。Apply的范圍比較廣，只執行一次，但是digest針對某一元素執行多次。

20、ng-show/hide和ng-if的區別是什么？

Show/hide是顯示隱藏，if是是否存在某一部分

21、react虛擬DOM運行機制是什么？

在React中，render執行的結果得到的并不是真正的DOM節點，結果僅僅是輕量級的JavaScript對象，我們稱之為virtual DOM。虛擬dom

22、react中prop和state的區別？

需要理解的是，props是一個父組件傳遞給子組件的數據流，這個數據流可以一直傳遞到子孫組件。而state代表的是一個組件內部自身的狀態（可以是父組件、子孫組件）。

23、redux的原理？

Redux 把一個應用程序中，所有應用模塊之間需要共享訪問的數據，都應該放在 State 對象中。這個應用模塊可能是指 React Components，也可能是你自己訪問 AJAX API 的代理模塊，具體是什么并沒有一定的限制。State 以 “樹形” 的方式保存應用程序的不同部分的數據。這些數據可能來自于網絡調用、本地數據庫查詢、甚至包括當前某個 UI 組件的臨時執行狀態（只要是需要被不同模塊訪問）、

24、node常用模塊？

http fs path url Buffer process

25、了解npm，spm，nodejs嗎，請簡要描述？

NPM便于JavaScript開發者共享和重用代碼，它可以很容易地更新你的代碼；再分享。是全球最大的開源庫生態系統。

SPM是淘寶社區電商業務（xTao）為外部合作伙伴（外站）提供的一套跟蹤引導成交效果數據的解決方案。

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。它使我們能夠在本地運行javascript

26.請列舉在內網的兩臺服務器中拷貝文件的方法？用Shell腳本解答數據庫？

scp -P 1234 -r test_folderuser@192.168.1.20:~

主要就是scp命令的使用

28、請描述你所熟悉的Web服務器框架(如Django)作為一個成熟的Web框架，需要提供哪些重要的功能模塊？

提供了網站開發的常用模塊：處理用戶請求、操作數據庫、模板渲染、配置文件管理等

29、服務器Node.js和瀏覽器js的區別是什么？Node.js把js從客戶端遷移了到服務端、主要做了哪些工作？為什么說Node.js適合做高并發的互聯網應用？

Node采用一系列“非阻塞”庫來支持事件循環的方式。本質上就是為文件系統、數據庫之類的資源提供接口。Node.js 使用事件驅動，非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設備上運行數據密集型的實時應用。

網絡相關問題

1、請解釋下列術語：UrlEncode,Utf8,JSON,UTC,MD5？

Urlencode：將字符串以url形式編碼（在編程語言中通常都有實現該功能的內置函數或者API）。

Utf8：是一種針對Unicode的可變長度字符編碼，主要用于在網頁上顯示各國語言字符

2、請解釋GET/POST的區別，以及請求參數放到url里和放到body里面的區別？

Post與Get區別：

GET請求，請求的數據會附加在URL之后，以?分割URL和傳輸數據，多個參數用&連接。URL的編碼格式采用的是ASCII編碼，而不是uniclde，即是說所有的非ASCII字符都要編碼之后再傳輸。

POST請求：POST請求會把請求的數據放置在HTTP請求包的包體中。上面的item=bandsaw就是實際的傳輸數據。

因此，GET請求的數據會暴露在地址欄中，而POST請求則不會。

傳輸數據的大小

在HTTP規范中，沒有對URL的長度和傳輸的數據大小進行限制。但是在實際開發過程中，對于GET，特定的瀏覽器和服務器對URL的長度有限制。因此，在使用GET請求時，傳輸數據會受到URL長度的限制。

對于POST，由于不是URL傳值，理論上是不會受限制的，但是實際上各個服務器會規定對POST提交數據大小進行限制，Apache、IIS都有各自的配置。

安全性

Get是Form的默認方法，安全性相對比較低。

請求參數放到url里和放到body里面的區別

首先，參數的存放位置我們無法直接指定，而是不同的請求方法參數傳遞的方式不同。

常用的HTTP請求主要為GET請求和POST請求兩種，GET請求的參數會通過以跟隨在URL后邊以鍵值對的方式進行傳遞（例：key1=a&key2=b&key3...)；而POST請求的參數會通過HEADER進行傳遞。考慮到安全性的問題，可以確定兩者都不安全，原因是HTTP請求可以被輕易抓包和截獲，其中的請求參數值自然會很容易被獲取。

3、請列舉出常用的Http Header，Cookie是怎么實現的？

Content-Length，請求、響應體的數據字節大小

Accept-Encoding，請求頭，可接受的文本壓縮算法，如： gzip, deflate

Accept-Language，請求頭，支持語言，客戶端瀏覽器的設置，如：zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3

User-Agent，請求頭，瀏覽器信息，

Cookie，請求頭，服務器或客戶端在上次設置的COOKIE，包括作用域名(.360buy.com)，過期時間，鍵與值。

Referer，從一個連接打開一個新頁面，新頁面的請求一般會加此信息，標名是從哪里跳過來的，所有的頁面的打開歷史鏈就可被挖掘出來，有利于分析用戶行為與CPS分成

Cookie在瀏覽器本地會有一個文件存儲數據，通信的時候通過請求頭和響應頭傳遞數據

4、請解釋下列返回碼的含義：200,302,400,403,500,502

200：請求成功

302：請求的資源臨時從不同的 URI響應請求。(資源臨時重定向)

400：錯誤請求（請求的參數錯誤或者服務器不理解請求的語法）

402：10.4.3 402 Payment Required This code is reserved for future use.

該狀態碼是為了將來可能的需求而預留的。

500：服務器端錯誤

502：網關或代理無效/無響應，網絡錯誤

5、長連接和短連接的區別

HTTP協議目前常用的有哪幾個？KEEPALIVE從哪個版本開始出現的？

到現在http出現了 1.0和 1.1版本

Keep-Alive是從1.1默認就支持了。

1、什么是Keep-Alive模式？

我們知道HTTP協議采用“請求-應答”模式，當使用普通模式，即非KeepAlive模式時，每個請求/應答客戶和服務器都要新建一個連接，完成之后立即斷開連接（HTTP協議為無連接的協議）；當使用Keep-Alive模式（又稱持久連接、連接重用）時，Keep-Alive功能使客戶端到服務器端的連接持續有效，當出現對服務器的后繼請求時，Keep-Alive功能避免了建立或者重新建立連接。

http 1.0中默認是關閉的，需要在http頭加入"Connection: Keep-Alive"，才能啟用Keep-Alive；http 1.1中默認啟用Keep-Alive，如果加入"Connection: close "，才關閉。目前大部分瀏覽器都是用http1.1協議，也就是說默認都會發起Keep-Alive的連接請求了，所以是否能完成一個完整的Keep-Alive連接就看服務器設置情況。

2、啟用Keep-Alive的優點

從上面的分析來看，啟用Keep-Alive模式肯定更高效，性能更高。因為避免了建立/釋放連接的開銷。

6、從服務器考慮提高網站性能

答：業界常用的優化WEB頁面加載速度的方法（可以分別從頁面元素展現，請求連接，css,js,服務器等方面介紹）？

對于服務器方面前端能做的工作：

使用CDN加速，使用戶從離自己最近的服務器下載文件；

減少Cookie的大小，使用無cookie的域，客戶端請求靜態文件的時候，減少 Cookie 的反復傳輸對主域名的影響；

為文件頭指定Expires，使內容具有緩存性；

前端優化:DNS預解析提升頁面速度

<link rel="dns-prefetch" />

<link rel="dns-prefetch" />

服務器端能做的工作：

負載均衡，分布式存儲，提升服務器性能等等。

7、什么是Daemon進程？

答：Daemon()程序是一直運行的服務端程序，又稱為守護進程。通常在系統后臺運行，沒有控制終端，不與前臺交互，Daemon程序一般作為系統服務使用。Daemon是長時間運行的進程，通常在系統啟動后就運行，在系統關閉時才結束。一般說Daemon程序在后臺運行，是因為它沒有控制終端，無法和前臺的用戶交互。Daemon程序一般都作為服務程序使用，等待客戶端程序與它通信。我們也把運行的Daemon程序稱作守護進程。

8、優化一個以I/O為瓶頸的程序，以下哪些方法效果比較顯著，Why?

a) 增加CPU數目

b) 提高CPU主頻

c) 增大內存的容量

d) 采用多線程

e) 采用異步I/O和多路(Multlplex)I/O

f) 對每次I/O進行Bath訪問(多次I/O合并一次完成)

c、e、d、f提升的效果會比較顯著

c通過將數據預讀取到內存中（建立內存池）的方式，提高訪問時候的效率，有效減少磁盤IO讀寫次數

9、設計一個系統，實現統計網站中每個URL訪問到的次數(pv)，以及訪問的獨立用戶數(uv)，其中每個獨立網頁以URL為key，每個獨立用戶以ip為key？

10、什么是內存對象的序列化(Serialiization)？為什么要序列化？請描述你熟悉的網絡傳輸序列化(Serialiization)框架或格式(Server)？

把對象轉換為字節序列的過程稱為對象的序列化

序列化主要用于網絡傳輸數據及將數據保存在硬盤上

常見的序列化以后的格式有：XML Jason ，但它們都是字符串

項目相關問題

1、請談下團購倒計時如何實現？

團購倒計時頁面端的效果比較好實現，主要是樣式和時間的操作，重要的考慮時間要和服務器端同步，其實這個效果也可以基于服務器端推送技術來實現

2、輪播圖有哪幾種？如何實現？

純css可以實現輪播圖；js實現輪播圖

3、如何實現數組去重？

a.最簡單的可以直接利用ES5的indexOf方法。

functiondupRemove(arr) {

var tmp=[]; //一個新的臨時數組

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

// 判斷tmp數組中是否存在arr中第i元素，如果不存在則添加到tmp數據組。

if(tmp.indexOf(arr[i])==-1) {

tmp.push(arr[i]);

}

}

returntmp;

}

b.

b.還有一種比較有意思的寫法

function dupRemove (arr) {

var tmp=[];

for (vari=0, l=arr.length; i < l; i++) {

for (varj=i + 1; j < l; j++) {

if (arr[i]===arr[j]) {

j=++i;

}

}

tmp.push(arr[i]);

}

return r;

}

4、寫一個方法獲取url中？號后面的參數，并將參數對象化?

function getSearch (url) {

varreg_url=/^[^\?]+\?([\w\W]+)$/,

reg_params=/([^&=]+)=([\w\W]*?)(&|$|#)/g,

arr_url=reg_url.exec(url),

ret={};

if(arr_url && arr_url[1]) {

var str_params=arr_url[1], result;

while((result=reg_ params.exec(str_ params)) !=null) {

ret[result[1]]=result[2];

}

}

returnret;

}

程序題

1、var a=[];

a[0]=0;a[1]=1;a[4]=4;

請問a.length的值是多少？a[3]的輸出結果是什么？

5 undefined

2、var a=[5,6];

var b=a;

b[0]="hello";

alert(a[0]);

請問值是多少？

"hello"

3、typeof(null),typeof(undefined),typeof(NaN),typeof(NaN==NaN),說出上面代碼執行結果？

object

undefined

number

boolean

4、function doSomething(){

for(var i=0; 4 > i; i++) {

var k=100;

aMrg +=’,’ + (k + i);

}

}

var k=1,aMrg=k;

doSomething();

aMrg +=k;

log(aMrg);

1,100,101,102,1031

5、請寫出下面輸出的值

Console.log(undefined || 1);//值___1__

Console.log(null || NaN);//值__NaN___

Console.log(0 && 1);//值__0___

Console.log(0 && 1 || 0);//值__0___

6、看下列代碼，<p>標簽內的文字是什么顏色的？紅色

<style>

.classA{color: blue};

.classB{color: red};

</style>

<body>

<p class=”classB classA”>123</p>

</body>

7、var a=[5,6];

var b=a;

b[0]=“hello”;

alert(a[0]);

值是多少？

"hello"

8、你面前有一座高塔，這座高塔有N(N > 100)個臺階，你每次只能往前邁1個或者2個臺階，請寫出程序計算總共有多少種走法？

這個案例滿足斐波那契定律 1，1，2，3，5，8，13，21, 34, 55, 89, 144

9、請閱讀下面的CSS代碼

#left {

color: white !important;

}

#container #left {

color: red;

}

#left {

color: green !important;

}

.container #left {

color: blue;

}

則在如下html中

<div class=”container” id=”container”>

<span id=”left”>left</span>

</div>

#left最終color屬性值為？綠色

10、下面這段代碼想要循環延時輸出結果0 1 2 3 4，請問輸出結果是否正確，如果不正確說明為什么，并修改循環內的代碼使其輸出正確的結果。

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

setTimeout (function () {

console.log(i + ‘’);

},100*i);

}

不正確，先執行FOR循環。for循環完成后，在去執行setTimeout。但是這個時候I已經是5了，所以輸入了5次5

11、完成函數showlmg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示

<body>

<script type=”text/javascript”>

Function showImg (oSel) {

};

</script>

<img id=”pic” src=”img1.jpg” width=”200” height=”200”>

<br/>

<selectid=”sel” οnchange=”showImg(this)”>

<optionvalue=”img1”>城市生活</option>

<optionvalue=”img2”>都市早報</option>

<optionvalue=”img3”>青山綠水</option>

</select>

</body>

答案說明：當select發生改變的時候調用showImg函數，實參為this（select對象本身），可以通過select對象的屬性來為pic的src賦值實現圖片切換

12、完成foo()函數的內容，要求能彈出對話框提示當前選中的是第幾個單選框

<html>

<head>

<meat http-equiv=”Content-Type”content=”text/html; charset=utf-8”>

</head>

<body>

<scripttype=”text/javascript”>

functionfoo() {

};

</script>

<form name=”form1” οnsubmit=”retuen foo()”>

<inputtype=”radio” name=“radioGroup”>

<input type=”radio” name=“radioGroup”>

<inputtype=”radio” name=“radioGroup”>

<input type=”radio” name=“radioGroup”>

</form>

</body>

</html>

題粗的有問題，onsubmit只有在提交的時候才會觸發這里面沒有submit按鈕，在提交事件觸發的時候遍歷哪個input表單是選中狀態然后alert粗來

13、計算下面程序運行結果

var msg=‘hello’;

function great(name, attr) {

name=‘david’;

var greating=msg + name + ‘!’;

var msg=‘您好’;

For (var i=0 ; i < 10;i++) {

var next=msg + ‘您的id是’ + i*2 + i;

}

console.log(arguments[0]);

console.log(arguments[1]);

console.log(greating);

console.log(next);

}

geat(‘Tom’);

答案：david //參數1

hellowworld 01.html:20 undefined //參數2 未傳入為未定義

hellowworld 01.html:21 undefineddavid! //name雖然是參數但是參數重新賦值為david了msg因為變量聲明提升所以值為undefined

您好您的id是189//因為number+string=string所以for循環最后一次聲明next=****18+9

14、下面這段JS輸出什么，并簡述為什么？

function Foo() {

var i=0;

return function () {

console.log(i++);

}

}

var f1=Foo(),

f2=Foo();

f1();

f1();

f2();

console.log(i);

0 //f1=Foo() 相當于f1賦值為函數Foo()的返回值f1=function（）{

console.log(i++)

}

1 //因為f1=了一個function所以有了作用域，f2和f1不同，不在一個內存中

0

報錯 //i為Foo內部的變量全局不可訪問，全局中沒有i變量所以會報錯

15、請寫出下面輸出的值

a) varnum=1;

var fun=function () {

console.log(num);//值___undefined___

var num=2;

console.log(num);//值___2___

}

fun();

b) varnum=1;

function fun () {

console.log(num);//值___1____

num=2;

console.log(num);//值___2____

}

fun();

16、寫出以下程序執行的結果

1)var a=10;

a.pro=10;

console.log(a.pro + a);

NAN number對象不可以定義私有屬性 namber+非數字和字符的值就等于NaN

2)var s=‘hello’;

s.pro=‘world’;

console.log(s.pro + s); //undefinedhello s位字符串，字符串不可以自定義屬性，所以s.pro為undefined 字符串做加運算會強制拼接位字符串

3)console.log(typeof fn);

function fn() {};

var fn;

//function 函數提升優先于變量提升

4)var f=true;

If(f===true) {

var a=10;

}

function fn() {

var b=20;

c=30;

}

fn();

console.log(a);

//10

17、請看如下的代碼，寫出結果

var a=5,b=3;

function test() {

alert(b++);

var a=4;

alert(--a);

alert(this.a);

}

1)tese(),三次alert()的值依次是什么？335 435 535

2)new test()，三次alert()的值依次是什么？ 33undefined 43undefined53undefined //this更改了指向原來是指向window 用了new關鍵字后指向test test木有a屬性所以為undefined

18、p最后顯示什么顏色。怎么讓p的顏色變成黑色，并簡要說明css選擇器優先級關系

<style>

#classA{color:yellow};

p.classB(color:red);

</style>

<body>

<p id=”classA” class=”classB”>123</p>

</body>

//p#classA{color：black}

19、關于正則表達式聲明6位數字的郵編，一下代碼正確的是(C)

A.var reg=/\d6/;

B.var reg=\d{6}\;

C.var reg=/\d{6}/;

D.var reg=new RegExp (“\d{6}”);

20、關于JavaScript里xml處理，一下說明正確的(A)

A.xml是種可擴展標記語言，格式更規范，是作為未來html的替代 //貌似XML是被替代的

B.Xml一般用于傳輸和存儲數據，是對html的補充，兩者的目的不同

C.在JavaScript里解析和處理xml數據時，因為瀏覽器的不同，其做法也不同

D.在IE瀏覽器里處理xml，首先需要創建ActiveXObject對象

21、請選擇對javascript理解有誤的(B)

A.javascript是網景公司開發的一種基于事件和驅動網頁腳本語言

B.JScript是javascript的簡稱 //微軟自己的瀏覽器才支持

C.FireFox和IE存在大量兼容性問題的主要原因在于他們對javascript的支持不同

D.AJAX技術一定要使用javascript技術

22、在Jquery中下面哪一個是用來追加到指定元素的末尾(B)

A.inserAfter()

B.Append()

C.appendTo()

D.After()

23、在javascript中定義變量var a=”35”,var b=“7”運算a % b 的結果為(C)

A.357

B.57

C.0

D.5

24、下面哪個屬于javascript的字符型C

A.False

B.你好

C.“123”

D.Null

25、下面哪個屬于javascript的布爾值(C)

A.1.2

B.”true”

C.false

D.null

26、請選擇結果為真的表達式(C)

A.null instanceof Object

B.Null===undefined;

C.null==undefined

D.NaN==NaN

27、下列運算方式不屬于邏輯運算的是(D)

A.!a

B.a&&b

C.a||b

D.a>b

28、聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是(D)

A.var obj=[name : “zhangsan” ,show: function(){alert(name);}];

B.Var obj={name : “zhangsan”,show: “alert(this.name)”};

C.Var obj={name : “zhangsan”,show: function () {alert(name);}};

D.Var obj={name : “zhangsan”,show: function () {alert(this.name);}}

29、以下過于Array數組對象的說法不正確的是(C)

A.對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序函數的參數

B.reverse用于對數組數據的倒序排列

C.向數組的最后位置加一個新元素，可以用pop方法 //push吧

D.unshift方法用于向數組刪除一個元素

30、要將頁面的狀態顯示”已經選中該文本”，下列JavaScript語句正確的是(A)

A.window.status=“已經選中該文本”

B.Document.status=“已經選中該文本”

C.Window.screen=“已經選中該文本”

D.Document.screen=“已經選中該文本”

31、點擊頁面的按鈕，使之打開一個新窗口，加載一個頁面，以下JavaScript代碼中可執行的是(D)

A.<input type=”button” value=”new”οnclick=”open(‘new.html’,’_blank’)”>

B.<input type=”button” value=”new”οnclick=”window.location=’new.html’;”>

C.<input type=”button” value=”new”οnclick=”location.assign(‘new.html’);”>

D.<form target=”_blank” action=”new.html”>

<input type=”submit” value=”new”>

</form>

32、下面的JavaScript語句中，實現檢索當前頁面中的表單元素中的所有文本框，并將它們全部清空(B)

A.for(var i=0; i <form1.elements.length; i++) {

if(form1.elements[i].type==”text”)

form1.elements[i].value=“”;

}

B.for (var i=0; i < document.forms.length;i++) {

if(forms[0].elements[i].type==“text”)

form[0].elements[i].value=“”;

}

C.if(document.form.elements.type==“text”)

form.elements[i].value=“”;

D.for(var i=0; i <document.forms.length;i++) {

for(var j=0;j <document.forms[i].elements.length;j++) {

if(document.forms[i].elements[j].type==“text”)

document.forms[i].elements[j].value=“”;

}

}

33、在表單(form1)中有一個文本框元素(fname)，用于輸入電話號碼，格式如：010-82668155，要求前3位是010，緊接一個”-”，后面是8位數字。要求在提交表單時，根據上述條件驗證該文本框中輸入內容的有效性，下列語句中(A)能正確實現以上功能

A.var str=form1.fname.value;

If(str.substr(0,4)!=”010-”||str.substr(4).length!=8||isNaN(parseFloat(str.substr(4))))

Alert(“無效的電話號碼！”);

B.var str=form1.fname.value;

If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))

Alert(“無效的電話號碼！”);

C.var str=form1.fname.value;

If(str.substr(0,3)!=”010-”||str.substr(3).length!=8||isNaN(parseFloat(str.substr(3))))

alert(“無效的電話號碼！”);

D.var str=form1.fname.value;

If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))

alert(“無效的電話號碼！”);

34、關于正則表達式聲明6位數字的郵編，一下代碼正確的是(C)

A.var reg=/\d6/;

B.var reg=\d{6}\;

C.var reg=/\d{6}/;

D.var reg=new RegExp (“\d{6}”);

35、下面關于cookie的說明正確的是(D)

A.Cookie設置的過期時間為3600s是指60分鐘過期

B.Cookie設置的過期時間為3600s是指只要在間隔60分鐘內有動作時就不過期

C.Cookie保存在服務器端

D.Cookie保存在用戶本地

36、使用js代碼實現，將下面段落中含有的鏈接替換成可直接點擊打開的鏈接

<p id=”text”>這個段落里有鏈接

比如：http://www.abc.comm/和https://www.github.com/都是鏈接。

可是他們顯示在網頁中是，鏈接不可點，還得復制粘貼到地址欄打開，好麻煩

</p>

37、寫一個方法獲取url？后面的參數，并將參數對象化。

function parseQueryString(url){

var params={};

var arr=url.split("?");

if (arr.length <=1)

return params;

arr=arr[1].split("&");

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

var a=arr[i].split("=");

params[a[0]]=a[1];

}

return params;

}

var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";

var ps=parseQueryString(url);

console.log(ps["key1"]);

38、Node.js中，一段訪問redis的代碼如下

var redis=require(‘redis’);

var client=redis.createClient();

client.set(‘key’, ‘value’, function (err,data) {

if(err) {

console.error(err.message);

process.exit(1;)

}

cilent.get(‘key’,function(err,data) {

if(err) {

console.error(err.message);

return;

}

console.log(data);

process.exit(0);

})

});

請用Promise的異步調用方式重寫

請用ES6 yield的異步調用方式重寫

在經歷了多個異步回調之后，如果拿到完整的堆信息(stack trace)?

39、用你認為合適的數據庫產品，請設計數據結構，并完成一下方法(Server)；

1.當出現一次網頁瀏覽的時候，請實現函數click(url, ip)

2.請實現查詢函數pv(url)以及uv(url)

40、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之后關閉窗口

<html>

<head>

<script type=”text/javasccript”>

Function closeWin() {

}

</script>

</head>

<body>

<input type=”button” value=”關閉窗口” οnclick=”closeWin()” />

</body>

</html>

41、請用JavaScript實現，控制一個文本框只能輸入正整數，如輸入不符合條件則文本全部字體標紅，要求寫出完整的文本框HTML代碼和JavaScript邏輯代碼？

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="utf-8">

<title>只能輸入正整數</title>

</head>

<body>

<inputid="txt" type="text">

<script>

var txt=document.getElementById('txt');

var color=window.getComputedStyle(txt,'').color

txt.addEventListener('keyup',function() {

var reg=newRegExp("^[0-9]*$");;

console.log(reg.test(this.value));

if(reg.test(this.value)){

this.style.color=color;

}else{

this.style.color='red';

}

});

</script>

</body>

</html>

42、請對以下代碼進行優化

var wrap=document.getElementById(“wrap”);

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

var li=document.createElement(“li”);

var text=document.createTextNode(“hello” + i);

li.appendCChild(text);

wrap.appendChild(li);

}

43、請看下面的HTML，寫出您的CSS使左邊元素寬度為200px保持不變，右邊元素隨瀏覽器大小自適應

<div class=”outer”>

<div class=”left”></div>

<div class=”right”></div>

</div>

非技術問題

1、請概述一下你上家公司中項目的具體情況(工作所使用的技術,業務流程,周期,)？

我在上家公司做的的網站pc端頁面的開發與維護。

主要技術：利用div+css布局，對用戶注冊頁面開發，利用ajax技術與后臺進行數據交互，使用Validation插件進行表單驗證；使用bootstrap/zepto框架開發移動端頁面，解決移動端設備的適配問題；側邊菜單欄的開發;利用css3完成輪播圖動畫

業務流程：根據需求分析，進行詳細的總體設計，產生各欄目文件夾的結構圖，根據美工的表現需要，設計靜態網頁和其它動態頁面界面框架，程序員進行代碼開發，做一些必要的測試，由項目組共同聯調測試，發現bug，完善一些具體的細節。

周期：3個月

2、常用調試和優化工具？

Firebug+YSlow+其它Firefox擴展

瀏覽器自帶工具，IE Developer Toolbar，OperaDragonfly

Fiddler

HTTP Analyzer

HttpWatch

Web Developer

Web Accessibility Toolbar

3、什么叫代碼部署？如何部署？

代碼部署就是把開發好的網站代碼放到應用服務器上對外提供服務、部署方式根據編程語言的不同而不同，但是大體的流程是一致的，生產環境主要是通過命令加配置文件的形式進行部署

4、新技術通過哪些渠道了解和學習？

優秀的博客，githup，http://www.daqianduan.com

5、對于前端這個崗位，興趣的比例占多少？

70%

6、前端到底工作內容是什么？和UI有什么區別？

Web前端：主要講UI提供的設計圖，編碼成靜態html，實現所有特效;并負責所有交互的對接，對js要求較高

UI:主要對移動端和網頁的設計

7、你當時進公司時是以什么身份進的，實習生嗎？

是軟件工程師，進公司之后直接上崗開發

8、工作中如果出現空檔期的時候，你們都在做些什么？

答：空檔期的話大家就都學習，學一些新的技術，也可以跟著js大神學習嘛，不過空檔期的情況也很少，一般就幾天。

9、平常在公司有做網頁制作嗎

答：如果實在忙的時候，我也幫制作師制作一些網頁。

10、忙的時候，會幫網頁制作做到什么程度，百分之多少？

答：一般忙的時候，我會先完成我自己的工作，像一些JS的特效和交互之后，再去幫網頁制作，大概是10%。

11、你在你做過的哪個項目調試中，遇到了哪些比較深刻的部分，說一說。

你發現到解決這個問題用了多久？

答：通過你描述的問題難度，和你發現到解決問題的時間，看你js程度。

12、身為一位web前端工程師，你肯定知道現在最流行的前端技術有哪些吧？請例舉3例？

瀏覽器兼容性，hack技術,Node.js

13、現有2個空水壺，容積分別為5升和6升，如何利用這兩水壺取出3升水，假設水無限？

假設有A,B兩只壺，A壺的容積為5升，B壺的容積為6升，

第一步：將B壺裝滿水，倒入A壺中，此時A壺滿，B壺還剩一升

第二步：將A壺水到掉，將B壺水倒入,此時A壺為一升，B壺空

第三步：將B壺裝滿，倒入A壺中，此時A壺滿，B壺還剩兩升

第四步：重復第二步的操作，此時A壺剩兩升，B壺空

第五步：重復第三步的操作，此時A壺滿，B壺還剩三升

14、小明有100元去買汽水，汽水三元一瓶，正好小店有個促銷活動，就是一個空瓶可以換1元錢，假設小明足夠能喝，問他最多可以喝多少瓶汽水，還剩多少錢或空瓶？

49瓶汽水，還剩1元

---------------------

作者：約德爾蒙

來源：CSDN

原文：https://blog.csdn.net/gyq04551/article/details/55254359

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

TML:

1.對WEB標準以及W3C的理解與認識

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性;

2.xhtml和html有什么區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言

最主要的不同：

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

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用于聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基于框架的html文檔

加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入

區別 ：同時加載

前者無兼容性，后者CSS2.1以下瀏覽器不支持

Link 支持使用javascript改變樣式，后者不可

6.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?

標簽選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標簽選擇

后者優先級高

7.前端頁面有哪三層構成，分別是什么?作用是什么?

結構層 Html 表示層 CSS 行為層 js

8.css的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

10.寫出幾種IE6 BUG的解決方法

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

2.像素問題 使用float引起的 使用dislpay:inline -3px

3.超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active

4.Ie z-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)

11.標簽上title與alt屬性的區別是什么?

Alt 當圖片不顯示是 用文字代表。

Title 為該屬性提供信息

12.描述css reset的作用和用途。

Reset重置瀏覽器的css默認屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統一

13.解釋css sprites，如何使用。

Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

14.瀏覽器標準模式和怪異模式之間的區別是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可顯示為什么模式

15.你如何對網站的文件和資源進行優化?期待的解決方案包括：

文件合并

文件最小化/文件壓縮

使用CDN托管

緩存的使用

16.什么是語義化的HTML?

直觀的認識標簽 對于搜索引擎的抓取有好處

17.清除浮動的幾種方式，各自的優缺點

1.使用空標簽清除浮動 clear:both(理論上能清楚任何標簽，，，增加無意義的標簽)

2.使用overflow:auto(空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE)

3.是用afert偽元素清除浮動(用于非IE瀏覽器)

18、常用那幾種瀏覽器測試?有哪些內核(Layout Engine)?

瀏覽器：IE，Chrome，FireFox，Safari，Opera。

內核：Trident，Gecko，Presto，Webkit。

19、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)

行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。

塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。

兼容性：display:inline-block;*display:inline;*zoom:1;

20、 清除浮動有哪些方式?比較好的方式是哪一種?

(1)父級div定義height。

(2)結尾處加空div標簽clear:both。

(3)父級div定義偽類:after和zoom。

(4)父級div定義overflow:hidden。

(5)父級div定義overflow:auto。

(6)父級div也浮動，需要定義寬度。

(7)父級div定義display:table。

(8)結尾處加br標簽clear:both。

比較好的是第3種方式，好多網站都這么用。

21、box-sizing常用的屬性有哪些?分別有什么作用?

box-sizing: content-box|border-box|inherit;

content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

22、Doctype作用?標準模式與兼容模式各有什么區別?

告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

23、HTML5 為什么只需要寫 ?

HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)。

而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

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

(1)link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;

(2)頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3)import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

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

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

26、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

(1)繪畫 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;

(4)sessionStorage 的數據在瀏覽器關閉后自動刪除;

(5)語意化更好的內容元素，比如 article、footer、header、nav、section;

(6)表單控件，calendar、date、time、email、url、search;

(7)新的技術webworker, websocket, Geolocation;

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

當然也可以直接使用成熟的框架、比如html5shim，

JavaScript:

1.解釋jsonp的原理，以及為什么不是真正的ajax?

動態創建script標簽，回調函數

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)

3. bind函數的兼容性

用法:

bind()函數會創建一個新函數, 為綁定函數。當調用這個綁定函數時,綁定函數會以創建它時傳入bind方法的第一個參數作為this,傳入bind方法的第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數.

一個綁定函數也能使用new操作符創建對象：這種行為就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。

4. 解釋下事件代理

事件委托利用了事件冒泡, 只指定一個事件處理程序, 就可以管理某一類型的所有事件.

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

html 代碼效果預覽

• 
  
• Li 2
• Li 3
• Li 4
• Li 5
• Li 6
• Li 7

javascript 代碼效果預覽

//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，除法散列法

最直觀的一種，上圖使用的就是這種散列法，公式： 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節點。

hello

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(){});他的作用或者意義就是:在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操作符

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添加到作用域鏈的頂端

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動畫：使用定時器 setTimeout和setInterval

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()

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

可以自定義一個函數

.border-radius(@values) {

-webkit-border-radius: @values;

-moz-border-radius: @values;

border-radius: @values;

}

div {

.border-radius(10px);

}

32.eval是做什么的?

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

應該避免使用eval，不安全，非常耗性能(2次，一次解析成js語句，一次執行)。

33. 圖片預加載的實現

使用jQuery圖片預加載插件Lazy Load

1.加載jQuery, 與jquery.lazyload.js

2.設置圖片的占位符為data-original, 給圖片一個特別的標簽,比如class=".lazy"

3.然后延遲加載: $('img.lazy').lazyload();這個函數可以選擇一些參數:

3.1.圖片預先加載距離：threshold，通過設置這個值，在圖片未出現在可視區域的頂部距離這個值時加載。

3.2.事件綁定加載的方式：event

3.3.圖片限定在某個容器內：container

使用js實現圖片加載: 就是new一個圖片對象, 綁定onload函數, 賦值url

用CSS實現圖片的預加載

寫一個CSS樣式設置一批背景圖片，然后將其隱藏

改進: 使用js來推遲預加載時間, 防止與頁面其他內容一起加載

用Ajax實現預加載

其實就是通過ajax請求請求圖片地址. 還可以用這種方式加載css,js文件等

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

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

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

即: 綁定在被點擊元素的事件是按照代碼順序發生，其他元素通過冒泡或者捕獲“感知”的事件，按照W3C的標準，先發生捕獲事件，后發生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。

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

35. js中怎么實現塊級作用域?

使用匿名函數, (立即執行函數)

(function(){...})()

使用es6

塊級作用域引入了兩種新的聲明形式,可以用它們定義一個只存在于某個語句塊中的變量或常量.這兩種新的聲明關鍵字為:

let: 語法上非常類似于var, 但定義的變量只存在于當前的語句塊中

const: 和let類似,但聲明的是一個只讀的常量

使用let代替var可以更容易的定義一個只在某個語句塊中存在的局部變量,而不用擔心它和函數體中其他部分的同名變量有沖突.在let語句內部用var聲明的變量和在let語句外部用var聲明的變量沒什么差別,它們都擁有函數作用域,而不是塊級作用域.

36. 構造函數里定義function和使用prototype.func的區別?

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

2. 但是如果prototype的屬性是對象的話，所有實例也會共享一個對象(這里問的是函數應該不會出現這個情況)，如果其中一個實例改變了對象的值，則所有實例的值都會被改變。同理的話，如果使用prototype調用的函數，一旦改變，所有實例的方法都會改變。——不可以對實例使用prototype屬性，只能對類和函數用。

37. js實現對象的深克隆

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

于是克隆也會分為兩類:

淺度克隆：原始類型為值傳遞, 對象類型仍為引用傳遞

深度克隆：所有元素或屬性均完全復制, 與原對象完全脫離, 也就是說所有對于新對象的修改都不會反映到原對象中

西安尚學堂 http://www.xasxt.com/

?

Java零基礎就業班 最新開班日期：9月24日

上課地址：陜西省西安市高新區科技二路西安軟件園天澤大廈五樓

咨詢電話：029-62258374 QQ 2145598324

?

?

招生對象：

1. 零計算機編程基礎學

2. 對行業不滿意人士

3. 跨專業編程愛好者

4. 在校大學生實訓

?

Java零基礎班，10年 Java 以上開發經驗技術講師、架構師、行業大牛，親自純面授課程，手把手教你寫編程。

?

9月新班免費試聽課程已就緒，7天免費聽課，體驗Java樂趣。