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

網頁內容

減少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

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

們有時會會在處理vue項目的時候，遇到數據變化了，但是視圖并沒有實時渲染的情況

vue視圖為什么不渲染頁面的原因

當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器

這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數據對象時 getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口

每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

1.視圖不更新情況一

數組數據變動：我們使用某些方法操作數組，變動數據時，有些方法無法被vue監測，有些可以

1.哪些方法使數組變化，可以被vue檢測到

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

filter(), concat(), slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組

2.Vue 不能檢測以下變動的數組：

① 當你利用索引直接設置一個項時，vm.items[indexOfItem] = newValue

② 當你修改數組的長度時，例如： vm.items.length = newLength

2.視圖不更新情況二

第二種視圖不更新情況是Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性

解決辦法

然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上

Vue.set(vm.someObject, 'b', 2)

或者

this.$set(this.someObject,'b',2) （這也是全局 Vue.set 方法的別名）

有時你想向一個已有對象添加多個屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，這樣添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) // 深拷貝

3.視圖不更新情況三（異步更新隊列）

在最新的項目中我遇到了一個特別詭異的情況，就是數據第一次的獲取到了，也渲染了，但是第二次之后數據只有在再一次渲染頁面的時候更新，并不能實時更新

你渲染的數據是你上一次選擇的數據，并不是本次選擇的數據，俗稱“慢一拍”

現在我們就來了解一下這個問題

可能你還沒有注意到，Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。

如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。

這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。

然后，在下一個的事件循環“tick”中，

Vue 刷新隊列并執行實際 (已去重的) 工作。

Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。

雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。例如：

因為 $nextTick() 返回一個 Promise 對象，所以你可以使用新的 ES2016 async/await語法完成相同的事情：

有想學習前端或者轉行的朋友歡迎私信小編“學習”，內有全套前端開發視頻教學資料，