AC 2017實錄（二）

04-25

第二次來Alloy Team的Conference了，依舊是乾貨滿滿。感謝老師們的精彩分享，下次再來就不是學生票了。從大二就開始追隨著大牛們的腳步，依然還是那句話：Be a warrior not a worrior。

0x004 高效H5動畫設計與性能優化

常用動畫方案

使用GIF（適合小icon）

優點：

圖片資源，開發簡單

缺點：

最多支持256種顏色

只支持全透明，不支持半透明

不適用於真彩色

長時間的動畫體積較大

使用Animated PNG

優點：

體積小

支持半透明

缺點：

支持度低

使用Video標籤（適合酷炫動畫）

優點：

可以通過設置autoplay自動播放

可以通過設置loop控制循環（一般大於12s）

缺點：

佔用帶寬較大（一般小於30s）

使用SVG（適合矢量動畫）

優點：

矢量圖，無失真

缺點：

難以實現點陣圖的效果

使用Canvas

優點：

可編程，獲得Context API

單個DOM元素，方便操作

WebGL加速

使用Javascript

優點：

可以通過DOM、CSS控制節點

可以通過setTimeout、setInterval維護時間和動畫速度

使用CSS

優點：

可以使用transition過渡

可以使用keyframes關鍵幀

瀏覽器會保證動畫的流暢性

瀏覽器會停止或降低不可見動畫的刷新（最小化不再播放）

性能評估

使用statsjs對比FPS

var stats = new Stats();stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: customdocument.body.appendChild( stats.dom );function animate() { stats.begin(); // 被監聽的code stats.end(); requestAnimationFrame( animate );}requestAnimationFrame( animate );

使用dev-tools的timeline

移動端適配

背景

背景為純色或漸變直接鋪滿
背景為單張大圖

主體

使用REM布局
屏幕居中縮放

邊緣元素

基於屏幕定位
使用transform的scale

性能優化

優化指標：

內存佔用
幀率

利用GPU

應該避免重繪和重排
應該避免width和height變化，使用transform的scale
應該避免margin的變化，使用transform的translate
元素創建後應該立刻設置transform:translateZ(0)或translate3D(0,0,0)
這樣元素會新建立一個獨立的層
使用will-change（不要濫用）

圖片壓縮

圖片壓縮：tinypng
圖片合併：東東
去除透明像素：TextureMerger

從合圖到壓縮

幀動畫要不要合圖

當合併後的圖片過大會引起顯卡罷工、丟幀
當請求數過多會浪費請求頭的傳輸

因此建議這樣解決：

HTTP2.0無需合圖
雪碧圖裁剪空白區域
使用zip壓縮

資源打包，減少請求數
避免單個大圖渲染瓶頸
使用jszip進行前端解壓
jszip解析出ArrayBuffer
URL.crateObjectURL()

export async functiono downloadZip(url) { let data = await new Promise(function(rs, rj) { JSZipUtils.getBinaryContent(url, function(err, result) { if (err) { throw err; } rs(result) }); }); let zip = await JSZip.loadAsync(data); let re = /(.jpg|.png|.gif|.ps|.jpeg)$/; let result = await Promise.all( Object.keys(zip.files) .filter(file => re.test(fileName.toLowerCase())) .map(async function(fileName)) { let file = zip.files[fileName]; let blob = await file.async(blob) return [ fileName, blob ] } )}

緩存策略

CDN部署，設置max-age
前端緩存

localStorage（空間小）
webSQL
indexedDB

我們可以通過以下流程圖，決定是否載入緩存：

預載入策略

可以使用web workers開一個線程，提前載入

精準控制

使用animationStart、animationEnd控制動畫開始和結束的回調

this.num.addEventListener(webkitAnimationEnd, () => { console.log(num is end)})

使用requestAnimationFrame控制瀏覽器幀率

高清屏幕適配

500px * 500px的原圖畫在250px * 250px的畫布上會模糊。

我們可以在convas上繪製500px * 500px的圖像再 scale(0.5)

0x005 ES2017時代的後函數式編程

這裡直接上大佬的地址吧，真的太清楚了

ES2017時代的後函數式編程

0x006 如何把自己構建成大型互聯網公司需要的前端人才

在校生

去大型互聯網公司，不要去創業公司

豐富的學習資源
活躍的技術交流
專註的前端研究

前端面試應該考什麼

個人基本信息（自我介紹）
前端基礎（綜合考察）

HTML

常用meta頭
語義化
HTML5新特性
HTML渲染解析知識

盒模型
動畫
彈性布局

javascript

事件模型
閉包和內存泄露
原型鏈
渲染樹
重繪
分層渲染

HTTP

HTTP狀態碼
不同請求類型
如何緩存
HTTP2

調試

如何抓包
如何debug
如何做移動端調試

移動Web開發

響應式布局
手勢和事件
如何提高渲染性能

項目經歷

react
vue
性能優化
安全問題

興趣愛好
收尾

舉例說明

這裡大佬舉了幾個基礎知識的例子，感覺都考過：

用戶從輸入url到顯示最終頁面，中間發生了什麼？
老闆反饋頁面打開白屏，而你的手機上是正常的，怎麼辦？
頁面上有個動畫一卡一卡的性能不行，怎麼優化？

還有幾個項目考點：

你為什麼用react而不用vue
在項目過程中使用vue遇到過什麼困難
你怎麼理解react的虛擬dom

總之，就是要對技術有熱情，要深入研究。不會不要緊，重要的是解決問題的思路和能力。

建議

補齊學好前端基礎
跟進新技術，多嘗試新語言
吃透項目中用到的技術，深入原理

初入職場

大佬認為，新人初入職場應該做好兩點準備：

技術準備

補齊基礎知識
單點深挖（達到瓶頸後再向廣度拓展，一專多長才有競爭力）
以技術項目優化練兵
多寫文章分享，形成影響力

思想準備

溝通能力

用溝通代替自作主張
多做反饋，主動反饋
及時拋出風險

正視資源不足，挑戰自我
問題到我為止，多做一點
培養高效的工作方法

社招跳槽

社招T3要達到騰訊高級前端工程師的要求。聽了一個高工的述職項目，感覺太深入了。不停的優化，很厲害，涉及的範圍也很廣。

大概可以選擇的方向：

性能優化
nodejs
構建工具
熱門框架
web安全
圖形動畫
web遊戲
RN

最後還是要感謝Alloy Team大牛們的精彩分享，剩下半個學期任重而道遠。Stay hungry stay foolish。