1. 2019阿里前端面試題
干開發也有不少年頭了，其實每個開發人員應該都有總結和寫技術點的習慣，俗言說得好「好記性不如一個爛筆頭」。
我是一枚女程序猿，很少發文章，並且我深知這是不對的，不管好與壞分享出來大家一起討論，總會把不好的變成好的，窄路變成寬路。哎，可能個人使然，但是發表出來的還是很少，都是在自己的工作筆記里每次記錄著技術心得和一些總結。總覺得發表出來萬一不好，被人取笑了怎麼辦。總之是一個愛多想的女程序員。
最近我以前一個同事在找工作，她面試了阿里，然後跟我聊了聊，說讓我多發表自己的文章，建立自己的社區，最好再多參與一些開源項目或者在git上多建一些自己的項目。這話我以前也聽過，但是就是執行上不徹底啊。
這不，我現在必須把自己以前寫好的或者接下來的每一點技術總結也好 經驗總結也好，都想寫出來，就當不為別人看，為自己也行！
話不多說了，她給我發了一道她面試阿里的題。我自己做了做。這是我目前想到的思路和寫法。歡迎有更好更優的方案發出來。我也可以學習。謝謝~
題目：
篩選筆試題 (請在半小時內完成):
var arr = [
{name:'小米1', value: 1, type: 2, date: '2018-06-07T08:00:01.589Z' },
{name:'錘子T1', value: 1, type: 2, date: '2018-06-07T08:10:01.589Z' },
{name:'小米2', value: 1, type: 4, date: '2018-06-07T20:00:01.589Z' },
{name:'小米2', value: 4, type: 4, date: '2018-06-07T20:10:21.189Z' },
{name:'小米4', value: 1, type: 4, date: '2018-06-07T08:00:01.560Z' },
{name:'小米4', value: 2, type: 4, date: '2018-06-07T08:10:31.584Z' },
{name:'小米6', value: 1, type: 3, date: '2018-06-07T08:00:01.589Z' },
{name:'小米5s',value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },
{name:'錘子T2', value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },
{name:'錘子T1', value: 4, type: 4, date: '2018-06-07T08:06:01.589Z' },
{name:'魅藍note5', value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },
{name:'魅藍note2', value: 5, type: 4, date: '2018-06-02T08:07:01.589Z' },
{name:'魅藍note2', value: 6, type: 4, date: '2018-06-07T08:00:01.589Z' },
{name:'魅藍note3', value: 1, type: 4, date: '2018-06-05T08:00:01.589Z' },
{name:'魅藍note', value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },
{name:'oppor9', value: 7, type: 4, date: '2018-06-04T08:04:01.588Z' },
{name:'華為p9', value: 1, type: 4, date: '2018-06-02T08:00:01.577Z' },
{name:'華為p9', value: 2, type: 4, date: '2018-06-07T08:00:01.110Z' },
{name:'華為p10', value: 1, type: 1, date: '2018-06-07T08:00:01.534Z' }
];
/**
* 請用您認為最優化的方式，將arr中的type為4的數據過濾出來，
* 然後按相同的 name + date（按天）合並value（value累加），
* 然後按 value 降序(從大到小)排序，
* 最後每行按照 "${name},${本地日期},售出${sum(value)}部" 的格式，如："小米2,2017年06月08日,售出5部", 列印(console.log)出來。
* 可以使用第三方js庫，可以使用es6。
* 請在半小時內完成。
要求最後輸出結果樣例如下:
oppor9,2017年06月04日,售出7部
魅藍note2,2017年06月07日,售出6部
魅藍note2,2017年06月02日,售出5部
小米2,2017年06月08日,售出5部
......
*/
function printArray(arr){
}
我的解答：
function printArray(arr){
const res = arr.filter(function(item, index, arr){
item.date = item.date.split('T')[0]
return item.type === 4
})
console.log(res)
const newArr = []
const temp = {}
for(const i in res) {
const key = `${res[i].name}@${res[i].date}`
if (temp[key]) {
temp[key] += res[i].value
} else {
temp[key] = res[i].value
}
}
console.log(temp)
for (const key in temp) {
const tempObj = {}
tempObj.name = key.split('@')[0]
tempObj.date = key.split('@')[1]
tempObj.value = temp[key]
newArr.push(tempObj)
}
console.log(newArr)
function compare(prop) {
return function(a, b){
const value1 = a[prop]
const value2 = b[prop]
return value2 - value1
}
}
newArr.sort(compare('value'))
console.log(newArr)
newArr.forEach((item, index) => {
const printStr = `${item.name},${item.date.split('-')[0]}年${item.date.split('-')[1]}月${item.date.split('-')[2]}日,售出${item.value}部`
console.log(printStr)
})
}
printArray(arr)
我有注意到時間那有點差異，題目數組里給的是2018，讓最後列印出來是2017年，我自己覺得是列印錯了。如果在現場我估計我會再問一下面試官這里是否不一樣。如果真不一樣，程序里在處理一下就行了
好了，此題完結。
2. 阿里前端面試題（1）——解構/非同步/markdown語法解析
a. 不完全解構，也會成功，不會報錯
b. 只要支持 Iterator 介面，都可以被解構賦值
c. null 可以替代默認值，而成功的解構賦值
d. 解構中不定參數可以出現在除第一個以外的其他位置
e. 解構是先找到同名屬性，然後再賦給對應的變數
f. 默認值可以引用解構賦值的其他變數，但該變數必須已經聲明
(d)
迭代一個對象的屬性
不定參數只能放在最後一個位置
a. 在JavaScript中，任務被分為兩種，一種宏任務（MacroTask），一種叫微任務（MicroTask），setTimeout 屬於微任務
b. setTimeout(func, 500) 會精確的在 500ms 後執行 func
c. Promise、generator、async/await 都是非同步解決方案
d. process.nextTick、Promise 都屬於 node 中的微隊列
e. 瀏覽器的 Event Loop 和 node 的 Event Loop 是不同的，實現機制也不一樣
f. 在 node 中setTimeout 和 setImmediate 執行階段是一致的
(c,d,e)
解析：f 兩者的執行順序要根據當前的執行環境才能確定
（那怎麼知道主線程執行棧為空啊？js引擎存在monitoring process進程，會持續不斷的檢查主線程執行棧是否為空，一旦為空，就會去Event Queue那裡檢查是否有等待被調用的函數）
https://juejin.im/post/59e85eebf265da430d571f89
Markdown 是非常受技術人員喜歡的一種文本格式，請使用 JavaScript 來實現 marked 方法來進行 markdown 文本的 HTML 渲染，可以滿足以下需求：
function marked(str) {
// your code here
}
marked('@@whatever@@').trim() // <p><blink>whatever</blink></p >
marked(' abc @@def@@ ghi ').trim() // <p><em>abc</em> <blink>def</blink> <strong>ghi</strong></p >
marked('@@ cool @@').trim() // <p><blink><strong>cool</strong></blink></p >
可以實現題目中的要求，但是還不能滿足「@@abc」這樣缺少對應字元串的情況
3. 對web前端開發的認識和理解,這個要怎麼回答
WEB前端是由網頁設計與製作發展而來的，隨著工作的細化，需要有人完成美工圖到網頁的製作，從而出現了WEB前端開發這個詞。WEB前端開發主要是使用HTML、CSS、JavaScript技術，將美工提供的美工圖轉化為網頁。同時，需要顧及SEO以及後台的數據。WEB前端，相當於是一個連接美工、後台以及用戶的中間平台。
4. 如果進阿里前端，代碼能力得達到什麼程度
因為之前淘寶或部分商業公司,代碼能力能夠滿足業務的需要可以勉強通過,現在要求,可以滿足未來業務的需要,至於未來的業務需求,它需要你有一定的商業思維,站在技術的角度尋找更多的可能性和結合點。例如，如果你需要能夠覆蓋你的業務，你必須能夠獨立地覆蓋它。一些新技術如果對業務有幫助，就可以集成。
我接下來的幾個項目，包括一個要求是視頻監控，之前的老師是用微軟的ActiveX，因此只能使用IE瀏覽器。我感覺很糟糕，所以老師推薦的「高級」技術越多，使用VLC構建視頻轉碼伺服器，然後使用WEB RTC進行處理，使用HTML 5視頻元素進行顯示，這種兼容性和可擴展性遠高於ActiveX。在此基礎上還對機會進行了研究，包括項目的信息傳遞，地理定位需求也盡可能地使用流行的方式。
5. 前端面試一問三不知怎麼辦
前端面試一問三不知的時候，千萬別慌亂，可以先停一停和面試官說這個問題你需要思考一下再回答，或者說你因為太緊張之類的一時想不起來答案。
有些面試官會直接電話過去要求面試，由於面試者(尤其是學生)處於弱勢方，可能並不會拒絕面試要求，但並不意味著面試者處於最佳的物理和精神狀態下，有可能會導致面試者不能很好的發揮自己原有的實力。所以如果面試官突然打電話過來。
沒有準備好的話，不要怕冒犯面試官，一定要另外約個時間，面試官肯定會再打過來的。遭到否定面試官有可能會否定你描述的一些東西，有可能是你字眼寫的太過，比如將「熟悉」的東西寫成了「精通」，勾起了面試官的「好奇」。
有可能故意試壓，考驗你的反應，但遇到否定的時候，不要急於反駁或者是手足無措，而是詢問自省和主動討論。氣場不和有的面試官性格嚴謹沉悶，而面試者可能思維活躍，整個面試過程可能會變成面試官不停的打斷面試者讓其思維聚焦。
而面試者感到思維不停被打斷，很是氣惱，影響發揮。這種情況不可避免，但遇到這樣的面試官，請保持謙和的態度，重點是展示自己技術的廣度、深度，氣場不和並不會產生決定性的影響，面試官也不會因為這樣的原因而給與錯誤的評判。
盡量留下好的印象。結束通知有的面試官會在面試結束後說：「我的問題問完了，如果有進一步消息的話，我們會再聯系你」。面試的大部分結果，其實當場就出來了，如果你感覺給出結果的時間點不夠明確，可以反問他：「如果三天內沒有聯系，是不是就代表沒有通過？」省得讓你懷有不確切的希望。
最後，還可以挽留下面試官，講講這場面試中你的一些疑惑，獲得面試官的反饋，也可以知道自己目前哪一方面做得不足。面試中面對不會的問題面試中遇到問題不會回答，這是非常正常的，畢竟大家在學習過程中遇到的問題，跟我們在工作中遇到的問題是非常不一樣的。
除此之外，我們看問題的角度，也是有差別很大的。舉個例子，很多人都在看ReactFiber，但是如果問你們，為什麼要有Fiber這個東西，可能很多人都回答不上來，因為大家只在社區裡面看到說，Fiber是怎麼工作的啊。
但是為什麼要有Fiber？如果沒有會怎樣，而這種思考，其實是非常底層的。我相信，很多人可能都沒有思考過。那如果遇到的問題不會，你可以先選擇不會，說我覺得自己沒有信心能答出這個問題，當然我更希望聽到你說。
我現在不會，但是你給我兩分鍾思考一下，我想一下這個問題有沒有答案？我覺得這是一個很好的思考習慣，首先你在面對不會的東西是坦然的，我當下不會，很正常，我之前沒有思考過這個問題嘛，那我們再花兩分鍾思考一下。
給一個初步的答案。所以說遇到問題，也不用不會就不會，也可以有一個積極的方式回應。從面試官的角度來說，面試中考察的題目，並不是僅僅考察這道題目本身，題目的對錯並不跟最終結果直接掛鉤。面試官更希望以題目為契機。
考察面試者分析問題，解決問題的能力，以及交流過程中所體現的邏輯推理和思維方式等。跟面試官聊業務業務跟項目是完全不一樣的東西，業務認知和思考也是很重要的一個考察點，這方面面試官可能會問兩個點：業務場景和技術突破。
業務場景：面試官會詢問面試者他們的產品、業務模式、商業模式等，了解下面試者對於產品的誕生、定位、發展的認知。技術突破：技術與業務相結合這點在阿里也是一直在說但鮮有人做的非常好的地方，所以有的時候也會考察面試者。
看看他們所做的技術是如何從業務出發、給業務帶來了哪些改變以及如何去評估兩者之間產生的結果。面試結束反向互動面試官在掛斷之前，基本會給與候選人反問的機會，一般會表述為「你有什麼要問我的嗎」？無論面試的怎樣。
都希望你能說出心中的疑惑，比如面試中的某個題目、整體的評價反饋、你的建議或者了解所負責的業務，所在的團隊等等，而從面試官的角度來看，如果候選人願意反問你問題，至少能證明他是個好學的人。所以不要放棄這個互動的機會。
面試反饋每場面試結束後，面試官都會在系統里留下面試反饋，如果面試失敗，簡歷會放在人才庫里，很多人會在其中撈取簡歷，以後的面試官也可以看到之前所有的面試記錄，之所以講到這一點，是希望大家在面試中能夠保持謙和積極的心態。
認真面對每一場面試，即使這場面試沒有成功，但如果展示了好的品質，也會增加被發掘的機會，為你以後面試成功鋪路。保持聯絡如果跟面試官聊的比較好，可以請求加個微信之類的，面試是一個長期的事情，哪怕此次面試沒有通過。
以後還可能面試進來的，與面試官保持聯絡。前端面試題筆記面試會了，面試題也不能落下，這套面試筆記除了有CSS、JS、Vue、React、性能優化、伺服器埠、設計模式、數據結構和演算法面試題外，加了手寫代碼面試題。
這下面試官讓我們寫代碼也不怕啦！CSS問題flex布局css3的新特性img中alt和title的區別用純CSS創建一個三角形如何理解CSS的盒子模型？如何讓一個div水平居中如何讓一個div水平垂直居中如何清除浮動。
6. Web前端崗位面試題有哪些
前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML
1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？
二、css
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
11、一個滿屏 品 字布局 如何設計?
三、常見兼容性問題？
1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
3、為什麼要初始化CSS樣式。
4、absolute的containing block計算方式跟正常流有什麼不同？
5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
8、CSS權重優先順序是如何計算的？
9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
10、移動端的布局用過媒體查詢嗎？
11、使用 CSS 預處理器嗎？喜歡那個？
12、CSS優化、提高性能的方法有哪些？
13、瀏覽器是怎樣解析CSS選擇器的？
14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
15、margin和padding分別適合什麼場景使用？
16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
17、元素豎向的百分比設定是相對於容器的高度嗎？
18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
23、你對line-height是如何理解的？
24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
25、怎麼讓Chrome支持小於12px 的文字？
26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
28、position:fixed;在android下無效怎麼處理？
29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
30、display:inline-block 什麼時候會顯示間隙？(攜程)
31、overflow: scroll時不能平滑滾動的問題怎麼處理？
32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
35、style標簽寫在body後與body前有什麼區別？
四、JavaScript
1、介紹JavaScript的基本數據類型。
2、說說寫JavaScript的基本規范？
3、JavaScript原型，原型鏈 ? 有什麼特點？
4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
5、Javascript如何實現繼承？
6、Javascript創建對象的幾種方式？
7、Javascript作用鏈域?
8、談談This對象的理解。
9、eval是做什麼的？
10、什麼是window對象? 什麼是document對象?
11、null，undefined的區別？
12、寫一個通用的事件偵聽器函數(機試題)。
13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
15、什麼是閉包（closure），為什麼要用它？
16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
17、如何判斷一個對象是否屬於某個類？
18、new操作符具體幹了什麼呢?
19、用原生JavaScript的實現過什麼功能嗎？
20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
21、對JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
23、js延遲載入的方式有哪些？
24、Ajax 是什麼? 如何創建一個Ajax？
25、同步和非同步的區別?
26、如何解決跨域問題?
27、頁面編碼和被請求的資源編碼如果不一致如何處理？
28、模塊化開發怎麼做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）規范區別？
30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
31、讓你自己設計實現一個requireJS，你會怎麼做？
32、談一談你對ECMAScript6的了解？
33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
34、非同步載入的方式有哪些？
35、documen.write和 innerHTML的區別?
36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
37、.call() 和 .apply() 的含義和區別？
38、數組和對象有哪些原生方法，列舉一下？
39、JS 怎麼實現一個類。怎麼實例化這個類
40、JavaScript中的作用域與變數聲明提升？
41、如何編寫高性能的Javascript？
42、那些操作會造成內存泄漏？
43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
47、jquery.extend 與 jquery.fn.extend的區別？
48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
53、針對 jQuery性能的優化方法？
54、Jquery與jQuery UI有啥區別？
55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
57、jQuery和Zepto的區別？各自的使用場景？
58、針對 jQuery 的優化方法？
59、Zepto的點透問題如何解決？
60、jQueryUI如何自定義組件?
61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
63、移動端最小觸控區域是多大？
64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
69、解釋JavaScript中的作用域與變數聲明提升？
70、那些操作會造成內存泄漏？
71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
72、Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解釋一下 Backbone 的 MVC 實現方式？
74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
78、簡述一下 Handlebars 的基本用法？
79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
檢測瀏覽器版本版本有哪些方式？
81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
7. 為什麼選擇web前端
很多人選擇WEB前端，可能是因為WEB前端容易入門，而且不需要太多專業基礎。隨著前端的人才越來越逗，企業面試要求也越來越高，進階高級前端需要學習更多的技術，不斷積累技術經驗。
前端就是用戶可見部分的優化、交互功能開發，隨著軟體WEB化，Html5前端開發技術的發展，前端的技術方向越來越多，可開發解決的功能很多。
web前端有廣闊的發展空間，app、小程序、移動端、pc端等都是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
在互聯網行業，前端有WEB前端、HTML前端等，隨著互聯網技術發展，就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。
HTML前端開發
與Web前端開發不同的是，使用HTML5不僅僅可以開發前端，還有網頁游戲，手機APP，使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發，而未來可能會有更多的功能分支並入HTML5標准。web前端工程師
這個方向是目前從事Web前端開發的主要就業方向
Web架構師
薪資普遍比較高，技術要求高，掌握多種技能，包括：後端技術、DBA、Platform等等，甚至包括網站優化SEO技術。
數據方向
數據研發這個是在Web開發的基礎上用數據附能，懂可視化的一定是有前端能力的，懂hadoop的一定java要熟悉，屬於Web開發的拓展方向。
大前端方向
比如阿里，在大量實踐rn和weex;由於公司內部安卓/ios式微，一定程度上，前端把ios和安卓收編了，統稱大前端。
圖形學方向
前端自然是與圖形學有千絲萬縷的聯系，除了上面提到了可視化，還有相關3d引擎的開發工作。做這一行要求也非常高了，圖形學相關的演算法，3d引擎的開發，這都需要圖形學相關知識。
8. 大廠的前端面試難嗎
分享給你一些面試題
一面
小米的面試官給人的感覺很親切很真誠，是一個體驗很不錯的面試。
css 實現圖片自適應寬高
講 flex，手寫出 flex 常用的屬性，並且講出作用
BFC 是什麼
項目裡面的前端鑒權是怎麼實現的？
vue 裡面的虛擬 dom 是怎麼回事？
vue 雙向綁定講一講
手寫函數防抖和函數節流
講講常用的 es6 語法，比如 let、promise、class 等等
瀏覽器渲染過程，迴流重繪等等，load、DOMContentLoaded 等等事件的觸發順序
從小米應用商店裡面隨便找了一個需求讓我現場實現，寫偽代碼
講項目裡面的鑒權和圖片懶載入怎麼實現的
講 vue-lazyloader 的原理，手寫偽代碼
講 express 框架的設計思想
線上日誌是如何處理的
講事件循環
講 nodejs 的 eventEmitter 的實現
講項目裡面做的事情
講 vue 的響應式原理、依賴收集、監聽數組、虛擬 dom 等等
講 express 的中間件系統是如何設計的
現場從小米應用商店中找出一個需求現場實現，說思路，寫關鍵的代碼
四面
講 vue-lazyloader 源碼以及設計
使用 es5 實現 es6 的 class
websocket 握手過程
瀏覽器的事件循環和 nodejs 事件循環的區別
跨域以及解決辦法
手寫一段小演算法
JavaScript 的 sort 方法內部使用的什麼排序？
講項目裡面幹了啥
vue-lazyloader 怎麼實現的
vue 的響應式系統、虛擬 dom
函數式編程
手寫了一個演算法題
講講項目裡面做了什麼
vue 原理，和 react 的區別（其實我沒怎麼用過 react）
JavaScript 非同步的處理方式，現場出了一個問題，使用 promise 實現
講項目模塊規劃、項目如何部署、如何優化等等
手寫函數的防抖
手寫一道演算法題
講講項目
手寫一道演算法題
講項目
前端持久化的方式、區別
vue-lazyloader 的原理
怎麼配 webpack
手寫 vue 雙向綁定
講 es6 的一些特性，並且現場出了幾個代碼片段，說結果
手寫一道演算法題
http 狀態碼
講項目
vue-router 的原理
項目中怎麼用的 webpack，怎麼優化
講 express 的設計原理
手寫一道演算法題
講項目
手動實現 parseInt
講 tcp/ip 網路層、三次握手，為什麼不能兩次握手
講 vue 原理
手寫一道演算法題
手寫 vue 的 mixin 方法
手寫 promise 的 all 方法
現場出了一個移動端的小需求
講項目
項目裡面用 nodejs 做了啥
抽取了哪些 vue 組件
講項目
手寫實現 promise
騰訊-地圖（跪）
騰訊兩個部門面試都會先做一套筆試題，筆試題基本就是一些常見的前端問題以及演算法題
講項目，對項目提了一些問題
怎麼判斷一個點是否在圓形內、正方形內
對筆試題
筆試題
沒了
講項目
vue 響應式原理，什麼是 mvvm
es6 使用過的特性
flex 常見的屬性
css 選擇器的優先順序
抽取過哪些 vue 組件
講項目
express 設計原理，面試官對動態路由匹配一直追問下去，但是這里的源碼設計我確實是忘了，一路討論下去扯到了字元串的前綴樹…
實現一個事件發布訂閱類，其實就是 eventEmitter
講項目
事件循環
回調函數的壞處
vue 裡面哪兒不會用到雙向綁定
講項目
如何抽取公共組件的
vue 的響應式原理
如何實現一個可設置過期時間的 localStorage
實現一個發布訂閱系統，包括 on、emit、off 等等
一道智力題
軟體工程思想、設計模式等等
async/await 代碼片段，說輸出結果
講項目
講 lazyloader 實現
用 docker 做了什麼
用 webpack 做了什麼
手寫一個演算法題
講 flex
vue 響應式原理
es6
JavaScript 非同步
優化項目
vue 原理，包括計算屬性、依賴收集等等
用 JavaScript 的非同步實現 sleep 函數
演算法題
手寫快排，時間復雜度，優化
手寫實現 jsonp
項目部署，線上問題等等
websocket 握手過程
對 vuex 的理解，單向數據流
設計一個單點登錄的系統，類似阿里系那種
手寫一個演算法
實現一個聯想搜索組件
手寫函數防抖和節流
講項目
講 vue 的 響應式系統，講了好久，從渲染 watcher 到虛擬 dom，面試官還跟我討論了好久
忘了
講項目
忘了
websocket 握手過程
tcp/ip 網路層，http 的特點
http 強行使用 udp 能實現嗎？
vue 原理
webpack 熱更新原理，使用過的插件
原型、閉包、跨域
手寫了一道演算法題
二面
三面
百思編程（過）
這個公司是獵頭推薦的，CEO 比較強勢，也算比較有趣。
一面
二面
這一面是 CEO 面，主要問了我的職業規劃等等問題，在我沒有表現出很強的要去該公司的意願後，直接給我送走了…
ponyAI-基礎架構（過）
一面
二面
這輪面試時從美國打電話過來的，事後才知道是 Google 的前端…
三面
四面
洋錢罐（過）
一面
二面
創新奇智（過）
一面
二面
這一面居然遇到了前同事…寫了一些筆試題，問了一些問題！
三面
猿輔導（跪）
猿輔導好像總共就一面，期間一些實現方式和面試官有爭議（沒有沖突）。
一面
搜狐-垂直媒體部門（過）
一面
二面
三面
騰訊-天天快報（跪）
也是先做了一套筆試題，但是令人尷尬的是，面試官覺得我快排寫錯了，然而我只是在原地快排沒有申請額外空間…
網路-網路雲（過）
這個部門今年據說升為一級部門了，好像還挺不錯的~
一面
二面
三面
三面是山大老學長，聊了一些業務上的事情~
搜狗-手機搜狗（過）
搜狗一面的體驗比較差，面試官給人的感覺不太好…
一面
二面
忘了…
快手-商業化（過）
一面
二面
今日頭條-廣告系統（過）
一面
二面
三面
四面
五面
OPPO 成都研發中心（過）
一面
二面
百詞斬（跪）
首先會在線做一道演算法題，挺簡單的，百詞斬感覺掛的稀里糊塗的…
一面
為什麼面這么多公司
因為我是實習直接轉正的，也沒參加過秋招，所以對自己在市場上是個怎樣的實力沒有一個清晰的了解，而且我也想多了解一下其他公司在做什麼，於是就盡量的多面，不過說實話面試確實挺累的。
9. 有哪些經典的 Web 前端或者 JavaScript 面試筆試題
Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
頁面導入樣式時，使用link和@import有什麼區別？
介紹一下你對瀏覽器內核的理解？
常見的瀏覽器內核有哪些？
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
簡述一下你對HTML語義化的理解？
HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
請描述一下 cookies，sessionStorage 和 localStorage 的區別？
iframe有那些缺點？
Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
HTML5的form如何關閉自動完成功能？
如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
webSocket如何兼容低瀏覽器？(阿里)
頁面可見性（Page Visibility）API 可以有哪些用途？
如何在頁面上實現一個圓形的可點擊區域？
實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
tite與h1的區別、b與strong的區別、i與em的區別？
CSS
介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
CSS選擇符有哪些？哪些屬性可以繼承？
CSS優先順序演算法如何計算？
CSS3新增偽類有那些？
如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
display有哪些值？說明他們的作用。
position的值relative和absolute定位原點是？
CSS3有哪些新特性？
請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
用純CSS創建一個三角形的原理是什麼？
一個滿屏 品 字布局 如何設計?
常見兼容性問題？
li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
為什麼要初始化CSS樣式。
absolute的containing block計算方式跟正常流有什麼不同？
CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
對BFC規范(塊級格式化上下文：block formatting context)的理解？
CSS權重優先順序是如何計算的？
請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
移動端的布局用過媒體查詢嗎？
使用 CSS 預處理器嗎？喜歡那個？
CSS優化、提高性能的方法有哪些？
瀏覽器是怎樣解析CSS選擇器的？
在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
margin和padding分別適合什麼場景使用？
抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
元素豎向的百分比設定是相對於容器的高度嗎？
全屏滾動的原理是什麼？用到了CSS的那些屬性？
什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
如何修改chrome記住密碼後自動填充表單的黃色背景 ？
你對line-height是如何理解的？
設置元素浮動後，該元素的display值是多少？（自動變成display:block）
怎麼讓Chrome支持小於12px 的文字？
讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
position:fixed;在android下無效怎麼處理？
如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
display:inline-block 什麼時候會顯示間隙？(攜程)
overflow: scroll時不能平滑滾動的問題怎麼處理？
有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
style標簽寫在body後與body前有什麼區別？
JavaScript
介紹JavaScript的基本數據類型。
說說寫JavaScript的基本規范？
JavaScript原型，原型鏈 ? 有什麼特點？
JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
Javascript如何實現繼承？
Javascript創建對象的幾種方式？
Javascript作用鏈域?
談談This對象的理解。
eval是做什麼的？
什麼是window對象? 什麼是document對象?
null，undefined的區別？
寫一個通用的事件偵聽器函數(機試題)。
[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
什麼是閉包（closure），為什麼要用它？
javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
如何判斷一個對象是否屬於某個類？
new操作符具體幹了什麼呢?
用原生JavaScript的實現過什麼功能嗎？
Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
對JSON的了解？
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
js延遲載入的方式有哪些？
Ajax 是什麼? 如何創建一個Ajax？
同步和非同步的區別?
如何解決跨域問題?
頁面編碼和被請求的資源編碼如果不一致如何處理？
模塊化開發怎麼做？
AMD（Moles/Asynchronous-Definition）、CMD（Common Mole Definition）規范區別？
requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
讓你自己設計實現一個requireJS，你會怎麼做？
談一談你對ECMAScript6的了解？
ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
非同步載入的方式有哪些？
documen.write和 innerHTML的區別?
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
.call() 和 .apply() 的含義和區別？
數組和對象有哪些原生方法，列舉一下？
JS 怎麼實現一個類。怎麼實例化這個類
JavaScript中的作用域與變數聲明提升？
如何編寫高性能的Javascript？
那些操作會造成內存泄漏？
JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
jquery中如何將數組轉化為json字元串，然後再轉化回來？
jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
jquery.extend 與 jquery.fn.extend的區別？
jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
談一下Jquery中的bind(),live(),delegate(),on()的區別？
JQuery一個對象可以同時綁定多個事件，這是如何實現的？
是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
針對 jQuery性能的優化方法？
Jquery與jQuery UI有啥區別？
JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
jquery 中如何將數組轉化為json字元串，然後再轉化回來？
jQuery和Zepto的區別？各自的使用場景？
針對 jQuery 的優化方法？
Zepto的點透問題如何解決？
jQueryUI如何自定義組件?
需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
移動端最小觸控區域是多大？
jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
解釋JavaScript中的作用域與變數聲明提升？
那些操作會造成內存泄漏？
JQuery一個對象可以同時綁定多個事件，這是如何實現的？
Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
解釋一下 Backbone 的 MVC 實現方式？
什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
簡述一下 Handlebars 的基本用法？
簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
檢測瀏覽器版本版本有哪些方式？
我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
其他問題
原來公司工作流程是怎麼樣的，如何與其他人協作的？如何誇部門合作的？
你遇到過比較難的技術問題是？你是如何解決的？
設計模式 知道什麼是singleton, factory, strategy, decrator么?
常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？
頁面重構怎麼操作？
列舉IE與其他瀏覽器不一樣的特性？
99%的網站都需要被重構是那本書上寫的？
什麼叫優雅降級和漸進增強？
是否了解公鑰加密和私鑰加密。
WEB應用從伺服器主動推送Data到客戶端有那些方式？
對Node的優點和缺點提出了自己的看法？
你有用過哪些前端性能優化的方法？
http狀態碼有那些？分別代表是什麼意思？
一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）
部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法？
從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?
除了前端以外還了解什麼其它技術么？你最最厲害的技能是什麼？
你用的得心應手用的熟練地編輯器&開發環境是什麼樣子？
對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
你怎麼看待Web App 、hybrid App、Native App？
你移動端前端開發的理解？（和 Web 前端開發的主要區別是什麼？）
你對加班的看法？
平時如何管理你的項目？
說說最近最流行的一些東西吧？常去哪些網站？
如何設計突發大規模並發架構？
說說最近最流行的一些東西吧？常去哪些網站？
是否了解開源的工具 bower、npm、yeoman、grunt、gulp，一個 npm 的包里的 package.json 具備的必要的欄位都有哪些？（名稱、版本號，依賴）
每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關系也應該非常清晰，隨著功能和迭代次數越來越多，你會如何去保持這個狀態的？
Git知道branch, diff, merge么?
如何設計突發大規模並發架構？
當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎？
說說最近最流行的一些東西吧？平時常去哪些網站？
知道什麼是SEO並且怎麼優化么? 知道各種meta data的含義么?
移動端（Android IOS）怎麼做好用戶體驗?
簡單描述一下你做過的移動APP項目研發流程？
你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用？
你認為怎樣才是全端工程師（Full Stack developer）？
介紹一個你最得意的作品吧？
你有自己的技術博客嗎，用了哪些技術？
對前端安全有什麼看法？
是否了解Web注入攻擊，說下原理，最常見的兩種攻擊（XSS 和 CSRF）了解到什麼程度？
項目中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決？。
最近在學什麼東西？
你的優點是什麼？缺點是什麼？
如何管理前端團隊?
最近在學什麼？能談談你未來3，5年給自己的規劃嗎？
10. 華為筆記本電腦管家在哪裡
Copyright © 1999-2020, CSDN.NET, All Rights Reserved
登錄
落魄潦倒️前端~
關注
5G來了，對前端開發有哪些影響？？？ 原創
2019-08-27 13:10:45
4點贊
落魄潦倒️前端~
碼齡3年
關注
5G來了，對前端開發有哪些影響？？？
一、職能概覽
1.前端工程師首先是個程序員，其次也是個軟體工程師，他們工作在離用戶最近的地方，負責人機交互和用戶體驗，雖然叫「前端」，但其實他們的工作邊界其實已經很寬了。
2.展望未來，我想前端的工作會繼續分化，也會繼續融合，分工是工業革命以來社會高效協作的主要推動力，以後很長一段時間應該也會維持這種形態，融合的原始推動力也是提高效率。分化和融合是不斷的演化和互吸收轉化的，不過核心的東西我想還是不會有太大變化。
二、觀點
1.繼續分化（領域、行業、技術棧）
2.繼續融合（端技術、Web全棧技術、人工智慧與端技術）
3.核心不變（計算機科學本質、軟體工程思想與實踐、程序員職業素養）
1. 繼續分化
領域
1）、前端領域會繼續分化，例如阿里內部的前端就已經有中後台、圖形、端技術、泛Node、開發者服務5個大方向了，每個大方向也會細分，舉一些例子：
2）、中後台：有雲控制台、信息&資產管理平台、內部研發&項目管理平台、人工智慧&機器學習平台、數據研發分析平台，企業內部信息平台等。具體產品如阿里雲控制台、ERP、PAI、DeepInsight、阿里內外、Basecamp等。
3）、圖形：有基礎圖形庫、3D圖形、數據可視化、流程圖等。具體產品如G2、DataV、阿里雲城市大腦、滴滴智能交通調度圖、雙十一大屏等。
4）、端技術：有移動端（iOS、Android、MobileWeb、PWA、小程序）、PC端（客戶端、Web端）、觸屏電腦、各種監控大屏、智能手錶手環，智能汽車&家居屏幕等。具體產品如淘寶支付寶的App、PC主站、移動H5站，阿里郎、VS Code、雙十一大屏、UC瀏覽器UWP版本、各種智能手錶、手環、汽車、家居屏幕等。
5）、泛Node：有工具鏈、Web框架、IoT、客戶端（Electron、NW）等。具體產品如DEF/Atool/F2E-Test（阿里前端開發者工具）、Egg.js、阿里雲的IoT應用、VS Code等。
6）、開發者服務：有應用開發運維平台、組件市場等。具體產品如阿里雲的應用搭建平台Boat、Fusion-Design組件市場，支付寶小程序開發者工具等。
行業
2B
信息管理、財務、建築、航天、水利、金融、製造等傳統行業軟體以及阿里提出的五新：新零售，新製造，新金融，新技術和新能源，新技術賦能傳統行業
SAAS軟體及服務：如Teambition、Trello、釘釘企業版、Basecamp、Growing.io
2C
移動App：如微信、微博
PC工具應用：如Google Doc
產品展示類網站：如阿里雲、支付寶官網
技術棧 React（Native）
Angular（NativeScript）
Vue（Weex）
2. 繼續融合
端技術
前端、客戶端技術思想的融合
組件化（組件化搭建頁面）
組件生命周期鉤子函數（如iOS ViewController）
MV*（如MVVM設計就來源於微軟客戶端開發框架）
大前端的統一
虛擬DOM技術：React/ReactNative/ReactCanvas
各種移動設備內核和引擎的統一：WebKit/V8
Web技術文檔的統一：Mozilla Web Docs
Web全棧技術
前端、後端技術思想的融合
MV*（如前端的第一個MVC框架Backbone.js就來自於Ruby on Rails開發者）
AOP、依賴注入（Angular）
GraphQL（sql）
IndexedDB（Database）
人工智慧與端技術
人工智慧、前端技術的融合
端是最終觸達用戶的節點
端數據採集->後端機器學習、數據分析->智能推薦呈現
物聯網、前端技術的融合
智能家居/汽車/工業設備可能是有屏幕的，同時可以基於如JerryScript這樣的JS執行引擎使用Node.js開發聯網應用
3. 核心不變
計算機科學本質/軟體工程思想與實踐/程序員職業素養。
計算機科學基礎：如基本的操作系統概念和計算機組成原理，演算法和數據結構基礎等等。
軟體工程思想與實踐：如軟體開發模式，設計模式，架構思維，自動化思維，單元測試集成測試，UML等等。
程序員職業素養：如對代碼整潔和可讀性的追求，對軟體開發的熱情，對編程技藝的自我提升等等。
三、前端的未來
那些生存空間越來越小的產業
小規模移動App：移動App市場被一些巨頭把持，小規模App生存空間越來越小
PC信息導航類網站（網址、購物、論壇、生活）：現在移動優先，而且有智能推薦，並且是強社交
無界面交互
Web前端能做一些事，主要是大前端的范疇
會話式界面（視頻語音會話、語音搜索：WebRTC，開源語音庫：Common Voice）
感官式界面（視覺：WebAR/WebVR）
無界面，未來會有大量IoT設備（IoT有自己的通信協議和規范，前端的工作是在用戶看不見的後台）
富界面交互
大量工作需要前端來做：
日常辦公軟體（復雜應用，並且慢慢從桌面程序演化為Web）：Office、Email、文檔管理、產品設計、項目管理、代碼編輯器
大數據/AI配套軟體（復雜應用，並且慢慢從桌面程序演化為Web）：需要大量的後台系統來做數據分析/機器學習
播放器/游戲：H5代替Flash，如Web Audio、Web Video、Canvas
容器/DSL/內核/小程序：支付寶/微信/釘釘容器，內核（也就是UC、QQ瀏覽器內核），及其自定義DSL（如果將來手機的底層能力都可以上浮到小程序，很有想像空間）
產品信息展示類網站（炫酷應用）：各種智能設備官網、大企業官網
總結：
1.新的交互場景：繼移動互聯網之後，物聯網的發展將帶來新的應用場景，包括智能家居，可穿戴設備等領域將帶來大量的前端開發需求。前端將不限於傳統的PC屏幕和各種尺寸的手機屏幕，這意味著前端工程師的戰場將更加多樣化，復雜化。
2.新的交互形式：新的場景必然帶來交互方式的改變，不論是傳統的PC還是新出現的手機和pad設備，都是基於數遍或者觸摸等接觸式的操作，新的場景可能帶來聲音，動作等新的交互方式，也變得更加復雜。
3.大有可為同時責任重大：之前界限分明的前端開發和後端開發，未來開始模糊，前端工程師承擔的角色不斷擴大。此外，javascript開始向嵌入式領域進軍，前端的應用領域進一步拓展。從趨勢上來看，開發團隊的人員配置都前端傾斜，包括android開發、iOS開發、PC開發和如火如荼小程序開發。
以此同時，對安全，可靠等的要求越來越高，這都對前端開發提出新的和更為嚴格的要求。
科技行業發展日新月異，前端工程師們應該及早准備，時刻關注變化，因為很可能一不留神就掉隊了，誰叫我們是無敵的前端呢！
展開全文
點擊下方打開CSDN，閱讀體驗更佳
Tensorflow2項目實戰課程
Tensorflow2.0介紹： tensorflow是GOOGLE在2015年底發布的一款深度學習框架，也是目前全世界用得最多，發展最好的深度學習框架。2019年3月8日，GOOGLE發布最新tensorflow2版本。新版本的tensorflow有很多新特徵，更快更容易使用更人性化。但是老版的tensorflow程序在新版本中幾乎都無法繼續使用，所以我們有必要學習新版tensorflow2的新用法。 課程介紹： 我們的這門課程適合小白學習，也適合有基礎的同學學習。課程會從0開始學習，從python環境安裝，python入門，numpy，pandas，matplotlib使用，深度學習基礎，一直講到tensorflow基礎，進階，項目實戰。不管你是0基礎小白，想進入AI行業，還是有一定基礎，想學習最新的tensorflow2的使用，都適合我們這門課程。 講師介紹： 覃秉豐，物理系畢業轉AI行業，想轉行同學可以找我聊聊。機器學習、深度學習神經網路領域多年研究開發授課經驗，精通演算法原理與編程實踐；曾完成過多項圖像識別、目標識別、語音識別等企業項目，一線實戰經驗豐富；長期為多家包括世界五百強在內的大型企業總部做人工智慧技術內訓服務（中國移動、中國銀行，華夏銀行，中國太平洋，國家電網、中海油等）。上課特點：公式盡量一個一個符號推，代碼盡量一行一行講，希望所有人都能學有所得。
瀏覽器打開
從入門到精通，Java學習路線導航（附學習資源）
引言 最近也有很多人來向我"請教"，他們大都是一些剛入門的新手，還不了解這個行業，也不知道從何學起，開始的時候非常迷茫，實在是每天回復很多人也很麻煩，所以在這里統一作個回復吧。 Java學習路線 當然，這里我只是說Java學習路線，因為自己就是學Java的，對Java理當很熟悉，對於其它方面，我也不是很了解。 基礎階段 首先是基礎階段，在基礎階段，我們必須掌握Java基礎，Mysql資料庫，Ora...
瀏覽器打開
展望5G對web前端發展的影響
展望5G對web前端發展的影響 我是一個5G小白， 但是5G浪潮的來臨讓全世界都為之關注， 各個國家都在爭奪它的主導權。 它對軟體行業影響是巨大的，深遠的， 甚至會導致行業的重新洗牌，和很多技術工種的興衰。 所以我們這些開發者不得不去關注它。 那麼5G對web前端開發又有什麼樣的影響呢？ 網上各大論壇都有關於5G的帖子，據說理論下載速度達到 1.25G每秒。 我是做前端開發的，一個前端項目的本地文...
瀏覽器打開
如果5G時代到來了，普通人有哪些創業機會？
5G時代來了，帶著"5G改變社會"的願景來了，可能會對現在的各個行業都會有很大的沖擊，但是使用個人可以創業，還要看你的資金、人脈和底蘊了。 5G之中有三大應用場景，三者結合應用可以給很多垂直行業帶來新的變化。 三大應用場景分別是eMBB(增強型移動寬頻),對應的是高達10Gbps的下載速度；URLLC(超高可靠低時延)，對應的是逼近100%的高可靠性以及低至1ms的時延； mMTC(海量...
瀏覽器打開
對於Web前端開發而言,5G時代的到來會有什麼影響?_xiaox...
以上就是我整理的5G時代的到來對Web前端開發的三個影響。隨著5G技術的逐漸發展和成熟,未來大量的應用場景都需要前端進行呈現,所以未來前端開發將得到更多的重視。想要...
5G對web前端發展的影響_lin123_00的博客
web前端全棧資料粉絲福利(面試題、視頻、資料筆記、進階路線) 5G對web前端開發又有什麼樣的影響呢? 網上各大論壇都有關於5G的帖子,據說理論下載速度達到 1.25G每...
程序員該如何轉型 5G 開發？
作者|COCO 責編 | 胡雪蕊 出品 | CSDN （CSDNnews） 最近聽了幾位社招新進同事的述職，問了他們同樣一個問題：從原來的軟體開發崗位轉到現在的5G開發，你們覺得最大的難點在哪裡？幾位新同事紛紛表示：感覺自己要補課的內容實在是太多了，操作系統、網路協議，到處都是難點。其實這幾位同事的經歷和遇到的問題都非常有代表性：由於做開發不懂業務，故大部分碼農都是一顆顆螺絲釘，鉚在...
瀏覽器打開
5G技術將影響哪個行業的發展？
作為全球移動互聯網大會（GMIC）的頂尖合作夥伴，Qualcomm（美國高通公司）已連續三年亮相GMIC活動。Qualcomm中國區董事長孟朴將在全球領袖峰會期間發表主題演講。帶來關於Qualcomm
瀏覽器打開
5G時代,對學習Web前端開發有哪些影響?_web前端開發學習...
5G對IT行業的影響是首當其沖的,那麼對於Web前端開發而言,5G時代的到來會有什麼影響呢?下面,就給大家分享5G時代下對Web前端學習會有哪些影響。
5G通信對於前端會產生哪些影響_qf2019的博客_5g給前端...
5G通信將對前端的發展產生比較顯著的影響,一方面基於5G通信可以構建更多的交互場景,可以構建對於帶寬要求更高的場景,這會對用戶的使用體驗產生較為積極的影響,另...
前端工程師的未來在哪裡？
阿里妹導讀：很多童鞋在上次的問卷調查里表示，希望多推出一些前端方向的內容。今天為大家分享一篇關於前端工程師職業發展的文章，拋磚引玉，期待與大家一起交流探討。我是成曰，目前在螞蟻金服數據平台部任職前端工程師，從事數據中台產品的研發。目前對前端架構與質量、用戶體驗、TypeScript比較感興趣。以下我說的都是個人觀點，比較宏觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。 職
瀏覽器打開
未來的前端工程師
作者簡介：aoto 螞蟻金服·數據體驗技術團隊 以下我說的都是個人觀點，比較宏觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。 職能概覽 前端工程師首先是個程序員，其次也是個軟體工程師，他們工作在離用戶最近的地方，負責人機交互和用戶體驗，雖然叫「前端」，但其實他們的工作邊界其實已經很寬了。展望未來，我想前端的工作會繼續分化，也會繼續融合，分工是工業革命以來社會高效...
瀏覽器打開
好程序員分享5G對web前端發展的影響 - qq_35970166的博...
5G來了,對前端開發有哪些影響???一、職能概覽1.前端工程師首先是個程序員,其次也是個軟體工程師,他們工作在離用戶最近的地方,負責人機交互和用戶體驗,雖然叫「前...
5G時代對前端開發的改變_.olofmeister的博客
5G時代對前端開發的影響 這里我們就不過多的介紹5g了 , 因為我覺得這是大家都有關注過的話題 但我相信一句話:過去和現在所經歷的互聯網繁榮都是4G對3G的顛覆!
程序員生活指南：5G對web前端發展的影響，前端工程師的前景未來
5G浪潮的來臨讓全世界都為之關注，各個國家都在爭奪它的主導權。它對軟體行業影響是巨大的，深遠的，甚至會導致行業的重新洗牌，和很多技術工種的興衰。所以我們這些開發者不得不去關注它。 5G對web前端開發又有什麼樣的影響呢？ 網上各大論壇都有關於5G的帖子，據說理論下載速度達到 1.25G每秒。一個前端項目的本地文件往往不會超過100M，裡面最大的文件就是多媒體，圖片視頻，更多的動態文件會通過圖片伺服器傳輸。 我們正常使用現在的4G網路打開一個APP主頁往往需要2-3秒的時間，首次打開頁面需要等待載入，如果有
瀏覽器打開
對於Web前端而言，5G時代的到來會有哪些影響呢？
隨著工信部正式向三大運營商和廣電頒發5G牌照，中國正式進入5G商用時代。對於身處IT行業，與5G密切相關的Web前端而言，5G給Web前端又會帶來哪些影響呢？怎樣才能保持優勢成為高薪前端工程師呢？且看下面的分析。 一、5G的到來對Web前端有何影響？ 1、新的開發場景，帶來大量的前端開發需求和挑戰 隨著5G標準的落地應用，在移動互聯網領域將會出現新的開發場景（與物聯網結合），包括智能家居，可穿戴...
瀏覽器打開
5G 會給前端開發帶來怎麼樣的變化?_qq_33834489的博客
5G 會給前端開發帶來怎麼樣的變化? 物聯網、車聯網、自動駕駛、神經網路、AR / MR……這些領域都對數據帶寬有著非常高的需求,4G 時代的網速還不足以滿足大...
寫評論
評論
3