本期導讀：原創(chuàng)專題為大家?guī)韮蓚€css基本屬性的深入理解部宿、前端性能優(yōu)化的三個級別以及可以提高編程興趣的node爬蟲實現(xiàn)。語言基礎(chǔ)篇覆蓋flex布局鹉动、js的類以及頁面的高效適配等廊宪，值得細讀。工具框架篇也帶來了不少干貨姥闭，2017年應(yīng)該學習那些語言、框架和工具呢越走？最精彩的還是來自@昱宏的VR初探泣栈，文末我們這一年，歡迎賞鑒

原創(chuàng)專題

1）css - vertical-align & line-height理解@嚴曉娥

vertical-align & line-height是css當中再基本不過的兩個屬性，也許你每天都在用南片，但是你是否足夠了解它呢?

2）前端性能優(yōu)化的三個維度@曾文富

前端性能優(yōu)化可以分為三個level：靜態(tài)資源優(yōu)化掺涛、接口訪問優(yōu)化、頁面渲染速度優(yōu)化疼进，在操控門檻上依次遞增薪缆，優(yōu)化效果上越發(fā)沒有這么明顯，所以很多小團隊只會做到了第一個level

3）node爬蟲進階之——登錄@曾文富

http作為一種無狀態(tài)的協(xié)議伞广，客戶端和服務(wù)器端之間不會保持長連接拣帽。在一個一個相互獨立的請求響應(yīng)之間，服務(wù)器如何識別哪些接口是來自同一個客戶端嚼锄？

語言基礎(chǔ)

1）詳解 flex-grow 與 flex-shrink@謝燕

不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非為布局而設(shè)計的屬性來實現(xiàn)想要的布局——float减拭、inline-block、position区丑、甚至是 table 等拧粪。而使用這些屬性來實現(xiàn)各種布局效果，往往又會遇到相當多另外的坑：比如浮動的閉合沧侥、inline-block 的垂直對齊可霎、position 的定位原點以及 table 的不夠靈活等。

2）Chrome出了個小bug：論如何在Chrome下劫持原生只讀對象@負羽

眾所周知宴杀，雖然JavaScript是個很靈活的語言癣朗，瀏覽器里很多原生的方法都可以隨意覆蓋或者重寫，比如alert旺罢。但是為了保證網(wǎng)頁的安全性和網(wǎng)頁制作者的一定控制權(quán)旷余，有些瀏覽器對象是無法更改的，比如“window.location”對象扁达，或者對它們的更改是無效的正卧，比如”window.navigator”對象。然而罩驻，最近我發(fā)現(xiàn)Chrome出現(xiàn)了一個小“bug”，在Chrome 50+ 版本中护赊，通過一些技巧可以輕易地重寫這些對象惠遏，從而讓惡意代碼可以控制網(wǎng)頁編寫者的跳轉(zhuǎn)行為。

3）CSS技巧-rgba函數(shù)的妙用@謝于中 · 譯

新出現(xiàn)的 CSS 顏色配置函數(shù)是一項非常有意思的功能骏啰，它給予我們在瀏覽器中直接操縱顏色的能力节吮。例如，當鼠標懸停在按鈕上時判耕，可以使用color: color(black darkness(50%))改變顏色透绩，而不需要使用 Sass 這類 CSS 預(yù)處理器。

4）JavaScript寫類的前世今生@snandy

JavaScript 從誕生至今已經(jīng)走過了 20 年的歷程。它的前世(1995~2015年)是一個長達 20 年沒有類的世界帚豪，它的今生隨著 2015 年 6 月 ES6 的發(fā)布迎來了有類的時代碳竟。JavaScript 從無“類”到有“類”，經(jīng)歷了從 ES1 到 ES6 的階段狸臣。

5）如何打造一個高效適配的H5@風聆

以往拿到一份視覺稿要做頁面適配莹桅，通常都是針對不同分辨率尺寸做斷點寫 media query，然后看效果再微調(diào)烛亦。開發(fā)過程中視覺稿要是做了修改诈泼，修改的地方就得再走一遍分辨率測試和微調(diào)，這時想屎的心都有了煤禽。而且這些適配都是建立在已 知的分辨率尺寸庫上铐达，如果市面新出來一款分辨率尺寸機型，呵呵檬果，又要奔跑在測試微調(diào)路上黍匾。是不是能有用一套代碼就適應(yīng)各種分辨率窗口，那么就不會再有上面 這些煩惱火欧，且開發(fā)效率快和維護成本會降低很多妇斤。

工具框架

1）2017 年你應(yīng)該學習的編程語言、框架和工具@IT程序獅 · 譯

在過去的一年里知牌，軟件開發(fā)行業(yè)繼續(xù)大踏步地向前邁進祈争。回顧 2016 年角寸，我們看到了更多新興的流行語言菩混、框架和工具，它們改變著我們的工作方式扁藕，讓我們看到更多的可能沮峡。但在這個行業(yè)，緊隨潮流是很難的亿柑。所以在每年年底邢疙，我們都會給你提供一些建議，它涉及什么是最重要的望薄，以及你在未來一年中應(yīng)該學習什么疟游。

2）初識 Dva@pigcan

近期，我們在內(nèi)部做了一個類似 IDE 性質(zhì)的應(yīng)用痕支，基于 electron 和 dva颁虐，由于之前一直只關(guān)注 node 相關(guān)的開發(fā)者工具，并未太多接觸 React 等內(nèi)容卧须，所以這段時間過的有點煎熬同時也很興奮另绩，煎熬來源于非舒適區(qū)儒陨，而興奮來源于發(fā)現(xiàn)基于 dva + electron 給開發(fā)者工具帶來了更多的可能性。

3）2016年前端技術(shù)觀察@曹劉陽

這篇文章可能是火熱的前端圈里笋籽，潑向很多技術(shù)的一盆冷水蹦漠。我無意冒犯這些技術(shù)的傳道者，文章只關(guān)乎技術(shù)干签，不關(guān)乎人津辩。我對任何新技術(shù)于個人的成長都持肯定態(tài)度，對任何熱愛學習的同學都表示欣賞容劳。而技術(shù)選型要考慮個人開發(fā)還是團隊合作喘沿，Geek思維在團隊合作實戰(zhàn)時會有很多隱患。個人開發(fā)竭贩，我傾向于激進蚜印，團隊合作，我傾向于保守留量。

4） Webpack從入門到上線@會編程的銀豬

webpack是目前一個很熱門的前端打包工具窄赋，官網(wǎng)說得很清楚，webpack的出現(xiàn)就是要把requirejs干掉楼熄。同時它還提供了十分便利的本地開發(fā)的環(huán)境忆绰。網(wǎng)上并不容易找到一個講解得比較詳細完整的教程，本文結(jié)合實踐經(jīng)驗可岂，總結(jié)一套可用的開發(fā)和上線的配置和流程错敢。

5）原生應(yīng)用的末路2：啟示錄@主小席 · 譯

原生應(yīng)用面臨的最主要問題，就是來自蘋果應(yīng)用商店的安裝阻滯缕粹。因為安裝一款原生應(yīng)用總共需要約6次的點擊操作稚茅，而每次點擊都會導致近20%的用戶流失。用戶下決心安裝一款原生應(yīng)用平斩，比直接使用一款web應(yīng)用要困難得多亚享。安裝原生應(yīng)用，意味著用戶需要先點擊下載安裝绘面，然后等待下載完成欺税。這期間還要為該應(yīng)用所需要的本地空間和過分的權(quán)限憂心不已。很大一部分潛在用戶揭璃，甚至根本不會走到安裝這一步就已經(jīng)流失了晚凿。

前端視界

點擊鏈接可查看效果

1） 我們這一年 · VR@陳昱宏