手機(jī)-QQ-React-Web極致優(yōu)化課件

1、手機(jī) QQ React Web極致優(yōu)化Try to be the best個(gè)人簡(jiǎn)介個(gè)人信息- 李成熙，AlloyTeam- 2014年底加入騰訊- 群活動(dòng)、家校群、互動(dòng)直播- Github: /lcxfs1991工作方向- 前端工程化、自動(dòng)化- 性能優(yōu)化- Hybrid, React Native主要內(nèi)容為什么選React如何用React更好地實(shí)現(xiàn)功能如何基于React做好優(yōu)化為什么選 React項(xiàng)目背景交接的項(xiàng)目一直使用著“三無框架”無測(cè)試用例、無充分論證、無人維護(hù)開發(fā)效率、維護(hù)效率 低React特性組件化單向數(shù)據(jù)流Virtual Dom及增量更新生態(tài)圈大JSXLearn Once, Wri

2、te Everywhere如何用React更好地實(shí)現(xiàn)功能React 全家桶構(gòu)建工具 = gulp + webpack統(tǒng)一狀態(tài)管理= redux + reselect開發(fā)效率提升 = redux-dev-tools + hot-reload路由控制器 = react-router構(gòu)建工具 webpack優(yōu)化基礎(chǔ)篇 webpack使用優(yōu)化（react篇） 公共css/img/jsreact/react-dom/其它第三方庫頁面邏輯index.html頁碼邏輯公共component/邏輯redux actiondump component注冊(cè)state及調(diào)用action的方法smart compon

3、ent數(shù)據(jù)處理中心區(qū)分dev/prod入口初始化數(shù)據(jù)/redux中間件調(diào)用主入口html文件構(gòu)建工具構(gòu)建工具 - 目錄結(jié)構(gòu) smart component (container), 處理statedump component 處理渲染同一組件的js, css和img放在一起如果無法使用服務(wù)器構(gòu)建，開發(fā)時(shí)請(qǐng)讓小伙伴統(tǒng)一開發(fā)路徑webpack-md5-hash解決路徑不同，hash不同的問題構(gòu)建工具 - 生產(chǎn)上線區(qū)分開發(fā)與生產(chǎn)環(huán)境 生產(chǎn)環(huán)境的時(shí)候會(huì)自動(dòng)去掉xxx != process.env.NODE_ENV包含的代碼構(gòu)建工具 - 生產(chǎn)上線若要兼容Android 4.0，babel編譯使用es20

4、15-loose而不是es2015的presetUncaught TypeError: Cannot assign to read only property _esModule of #。構(gòu)建工具 - 兼容性構(gòu)建工具 - 兼容性統(tǒng)一狀態(tài)管理 redux 狀態(tài)/數(shù)據(jù)管理框架 最大優(yōu)勢(shì)集中管理記錄歷史便于擴(kuò)展 自己處理state遇到的問題父子、兄弟組件狀態(tài)/數(shù)據(jù)傳遞復(fù)雜結(jié)構(gòu)數(shù)據(jù)更新問題 （不重新渲染/過多重復(fù)渲染）統(tǒng)一狀態(tài)管理 redux 分散管理：觀察者模式統(tǒng)一狀態(tài)管理 redux 集中管理：redux統(tǒng)一狀態(tài)管理 redux 記錄歷史flux store中同時(shí)保存狀態(tài)和改變狀態(tài)的邏輯統(tǒng)一狀態(tài)

5、管理 redux 記錄歷史redux 將兩者分開了統(tǒng)一狀態(tài)管理 redux 便于擴(kuò)展flux 打log需要在每個(gè)store中console.log，入侵了業(yè)務(wù)代碼統(tǒng)一狀態(tài)管理 redux 便于擴(kuò)展redux引入了middleware機(jī)制，成功解耦統(tǒng)一狀態(tài)管理 redux store.js統(tǒng)一狀態(tài)管理 redux reducers.js統(tǒng)一狀態(tài)管理 redux configureStore.js統(tǒng)一狀態(tài)管理 redux connect.js統(tǒng)一狀態(tài)管理 redux 組合在一起Root.jsIndexWrapper開發(fā)效率提升 react-hot-loader 讓react開發(fā) live relo

6、ad 搭配webpack.HotModuleReplacementPlugin使用開發(fā)效率提升 redux-devtools 移動(dòng)端慎用，易造成卡頓 可以考慮Chrome插件redux-devtools-extension路由控制器 react-router Single Page Application PC 家校群有使用 移動(dòng)端面臨2個(gè)問題1. 分頁面太多，保留每個(gè)分頁的dom，數(shù)量龐大造成的性能問題2. 切換不保留dom，每次增刪也很消耗性能如何基于 React 做好優(yōu)化How to be niubiReact優(yōu)化的三大方向 狀態(tài)/數(shù)據(jù)管理優(yōu)化 渲染性能優(yōu)化 首屏性能優(yōu)化 狀態(tài)管理優(yōu)化

7、數(shù)據(jù)扁平化狀態(tài)管理優(yōu)化 新舊數(shù)據(jù)都應(yīng)該是獨(dú)立的拷貝 淺拷貝: Object.assign, 深拷貝: immutable/lodash.merge狀態(tài)管理優(yōu)化 多個(gè)reducers處理同一個(gè)action/reactjs/redux/issues/601狀態(tài)管理優(yōu)化 一個(gè)reducer的數(shù)據(jù)依賴于另外一個(gè) 最簡(jiǎn)單粗暴的辦法，在connect.js中處理狀態(tài)管理優(yōu)化 一個(gè)reducer的數(shù)據(jù)依賴于另外一個(gè) Reselect 若數(shù)據(jù)不變，能幫助緩存渲染性能優(yōu)化 React大部份性能問題都?xì)w因于重復(fù)渲染大部份人關(guān)注這里也會(huì)引發(fā)性能問題目的是要減少Data Diff渲染性能優(yōu)化 直觀看出重復(fù)渲染你可以在

8、每個(gè)component的render里，放一個(gè)console.log(xxx component)。然后觸發(fā)一個(gè)action，若幾乎全部的component都打出這個(gè)log，表明都重復(fù)渲染比較嚴(yán)重了渲染性能優(yōu)化 家校群列表頁性能問題 - 某些機(jī)型長(zhǎng)列表滾動(dòng)卡頓渲染性能優(yōu)化核心： 拷貝數(shù)據(jù) + 數(shù)據(jù)比較 數(shù)據(jù)拷貝：尋找數(shù)據(jù)拷貝類庫數(shù)據(jù)比較： shouldComponentUpate生命默認(rèn)返回true，這表示要求組件更新。若返回false，則不更新。渲染性能優(yōu)化 方法一：immutable + immutable-pureRender 使用1. redux-immutable + immutab

9、le2. 原有redux需要改造，使用immutable api3. pureRender重寫掉shouldComponentUpdate，進(jìn)行data diff- 若是es5寫法，可以用使mixin- 若是es6/es7寫法，需要使用decorator，在js的babel loader里面，新增plugins: transform-decorators-legacy。其es6的寫法是渲染性能優(yōu)化 方法二：lodash.merge+ non-immutable-pureRender 原因：1. 尋求性能稍遜，但也能接受，同時(shí)減少包大小的方案2. immutable引入，給js bundle增加

10、50kb。lodash.merge引入只需要20kb。渲染性能優(yōu)化 - Android表現(xiàn)優(yōu)化前ImmutableLodash.merge22fps43fps42fps渲染性能優(yōu)化 - iOS表現(xiàn)優(yōu)化前ImmutableLodash.merge30多fps50多fps50多fps渲染性能優(yōu)化 - 其它小Tips請(qǐng)慎用setState，因其容易導(dǎo)致重新渲染請(qǐng)將方法的bind一律置于constructor請(qǐng)只傳遞component需要的props，避免其它props變化導(dǎo)致重新渲染（慎用spread attributes）請(qǐng)盡量使用const element渲染性能優(yōu)化 - 其它小Tips Rea

11、ct移動(dòng)web極致優(yōu)化首屏性能優(yōu)化 React自身較大，在首屏渲染的時(shí)候，對(duì)比其它框架并無優(yōu)勢(shì)FrameworkMinimized SizeReact15.3146kbVue1.075kbRiot2.621kbAngular1.5156kb首屏性能優(yōu)化 針對(duì)有cgi請(qǐng)求，需要吐大量數(shù)據(jù)的頁面 同構(gòu)直出 有幾點(diǎn)值得說明1. 比改造以前的項(xiàng)目，做直出更容易2. 減少的是首屏顯示時(shí)間，而非首屏可交互時(shí)間3. 頁面吐出html字符串之后，還需要在客戶端，加載react包，進(jìn)行事件綁定4. 做bigPipe之類的優(yōu)化較難5. 考慮好頁面的PV與服務(wù)器的負(fù)載首屏性能優(yōu)化 React同構(gòu)直出性能優(yōu)化57.5

12、%首屏性能優(yōu)化 React同構(gòu)直出性能優(yōu)化首屏性能優(yōu)化 React同構(gòu)直出文章React同構(gòu)直出優(yōu)化總結(jié)騰訊新聞React同構(gòu)直出優(yōu)化實(shí)踐首屏性能優(yōu)化 首屏沒cgi拉取，但包較大的 拆包 家校群布置頁首屏性能優(yōu)化 拆包 一般來說，都是利用webpack結(jié)合react-router進(jìn)行拆包首屏性能優(yōu)化 拆包 不用react-rotuer，如何拆包？首屏性能優(yōu)化 拆包 不用react-rotuer，如何拆包？首屏性能優(yōu)化 非基礎(chǔ)功能，如運(yùn)營(yíng)活動(dòng) 輕量化類react方案 Preact 壓縮后只有10kb, gzip后3kb1. 開源社區(qū)有較多star（認(rèn)可）2. 較好的性能和兼容性3. api跟React接近4. 足夠的框架周邊，配置redux，router等使用，還有同構(gòu)直出的插件5. 團(tuán)隊(duì)成員有能力維護(hù)的Preact - React的輕量解決方