軟件工程互聯(lián)網(wǎng)前端開發(fā)實(shí)習(xí)生實(shí)習(xí)報(bào)告一、摘要

2023年7月1日至2023年8月31日，我在XX公司擔(dān)任互聯(lián)網(wǎng)前端開發(fā)實(shí)習(xí)生。核心工作成果包括完成3個(gè)業(yè)務(wù)模塊的前端開發(fā)，獨(dú)立優(yōu)化首頁加載速度，使頁面首次加載時(shí)間從3.8秒降低至2.1秒，交互響應(yīng)速度提升30%；參與2次CodeReview，提出5項(xiàng)性能改進(jìn)建議被采納。專業(yè)技能應(yīng)用涵蓋ReactHooks、Webpack5配置、CSSGrid布局及Git協(xié)同開發(fā)。提煉出模塊化組件復(fù)用策略，通過封裝通用表單組件，將重復(fù)開發(fā)時(shí)間縮短60%。驗(yàn)證數(shù)據(jù)來源于實(shí)習(xí)期間提交的12份代碼提交記錄及3次性能測試報(bào)告。

二、實(shí)習(xí)內(nèi)容及過程

實(shí)習(xí)目的主要是想把學(xué)校學(xué)的那些前端基礎(chǔ)，實(shí)際應(yīng)用一下，看看自己在真實(shí)項(xiàng)目里能折騰出什么花樣。

實(shí)習(xí)單位是家做互聯(lián)網(wǎng)產(chǎn)品的大公司，技術(shù)棧挺新的，前后端分離，用React那套玩得挺溜，環(huán)境也搞得比較規(guī)范，CodeReview是標(biāo)配。

我主要跟著團(tuán)隊(duì)做新上線的電商平臺項(xiàng)目，負(fù)責(zé)幾個(gè)功能模塊的前端開發(fā)和優(yōu)化。7月10號開始接觸項(xiàng)目，7月20號左右獨(dú)立負(fù)責(zé)了商品詳情頁的改版。那塊兒之前用傳統(tǒng)方式寫，加載慢，交互不順暢，我就琢磨著怎么優(yōu)化。用了ReactHooks重構(gòu)了組件邏輯，把不必要的渲染給過濾掉，還跟后端同學(xué)溝通，把圖片資源做了懶加載處理。改完之后測試，首頁加載數(shù)據(jù)從3秒多快到2秒出頭，用戶滑動(dòng)瀏覽商品時(shí)卡頓感明顯減輕。8月5號左右，團(tuán)隊(duì)要求提升整體性能，我又花了兩周時(shí)間給Webpack打包配置做了調(diào)整，比如開啟了代碼分割，把公共庫單獨(dú)抽離出去，結(jié)果頁面首次加載速度又快了大概20%，包體積也小了1M多。期間還參與了用戶反饋的客服系統(tǒng)前端迭代，主要是用Grid布局重新排布了一下客服消息區(qū)域，讓信息層級更清晰。

遇到的最大挑戰(zhàn)是初期對業(yè)務(wù)邏輯不熟，導(dǎo)致開發(fā)時(shí)反復(fù)溝通需求，8月10號做的促銷活動(dòng)頁面，因?yàn)闆]完全理解活動(dòng)規(guī)則，返款計(jì)算邏輯寫錯(cuò)了，上線前一天才發(fā)現(xiàn)，挺鬧心的。后來每天上班前都會花半小時(shí)看產(chǎn)品文檔和之前的代碼，慢慢就摸清了套路。另一個(gè)是性能優(yōu)化，剛開始試各種方法效果不明顯，后來請教了帶我的師傅，才知道要抓準(zhǔn)瓶頸點(diǎn)，比如用PerformanceAPI定位到是某個(gè)遠(yuǎn)程API響應(yīng)慢，就協(xié)調(diào)后端同學(xué)優(yōu)化了數(shù)據(jù)接口。

實(shí)習(xí)成果主要是完成了商品詳情頁、客服系統(tǒng)、促銷活動(dòng)頁這幾個(gè)模塊的開發(fā)，頁面性能數(shù)據(jù)有提升，自己也熟悉了前端項(xiàng)目開發(fā)流程，從需求分析到代碼提交，還有測試、部署這些環(huán)節(jié)。收獲挺大的，知道了自己哪些地方做得還行，哪些還得繼續(xù)補(bǔ)。比如組件化開發(fā)那塊兒，我現(xiàn)在覺得挺重要的，能省不少事兒。

實(shí)習(xí)單位管理上吧，感覺新人培訓(xùn)機(jī)制可以再完善點(diǎn)，我入職時(shí)除了一個(gè)技術(shù)對接人，沒太多人帶，很多問題都是自己摸索或者去問群里的大佬。崗位匹配度上，雖然接觸了挺多實(shí)際工作，但感覺學(xué)校學(xué)的深度還是不夠，有些復(fù)雜的業(yè)務(wù)邏輯或者性能調(diào)優(yōu)，還是覺得力不從心。建議可以給新人配個(gè)專門的導(dǎo)師，定期講講項(xiàng)目架構(gòu)或者分享些技術(shù)經(jīng)驗(yàn)，這樣成長會更快些。還有可以搞個(gè)內(nèi)部技術(shù)分享會，讓不同團(tuán)隊(duì)的同學(xué)也交流交流，現(xiàn)在感覺挺局限的。

三、總結(jié)與體會

這8周實(shí)習(xí)，感覺像是從理論世界猛地扎進(jìn)了實(shí)踐海洋，收獲挺具體的。當(dāng)初去的時(shí)候，主要就是想看看自己學(xué)的那些HTML、CSS、JavaScript，在真實(shí)項(xiàng)目里怎么用，能不能把課堂上的知識轉(zhuǎn)化成點(diǎn)實(shí)際的東西。現(xiàn)在回頭看，確實(shí)這么回事。從7月1號到8月31號，跟著團(tuán)隊(duì)做電商平臺，獨(dú)立改商品詳情頁，那段時(shí)間天天對著瀏覽器開發(fā)者工具，調(diào)試到半夜是常事，但看到頁面速度從3秒多快到2秒出頭，心里還是挺有成就感的。這種成就感，是學(xué)校作業(yè)提交后點(diǎn)開網(wǎng)頁看到的“200OK”不一樣的。比如我通過調(diào)整Webpack配置，把包體積小了1M多，這直接反映在用戶加載頁面上，這種直接反饋帶來的滿足感，是實(shí)習(xí)最大的價(jià)值之一。它讓我明白，以前寫代碼可能更注重自己能不能跑通，現(xiàn)在會想用戶打開會不會慢，會不會用著難受。這種心態(tài)轉(zhuǎn)變，是從學(xué)生到準(zhǔn)職場人的標(biāo)志吧，責(zé)任感確實(shí)重了挺多。

這次經(jīng)歷也直接影響了我的職業(yè)規(guī)劃。我發(fā)現(xiàn)自己對性能優(yōu)化這塊挺感興趣，實(shí)習(xí)期間搞懂了ReactHooks怎么用，也接觸了Webpack5的一些高級配置，這讓我確定了后續(xù)要往這個(gè)方向深耕。之前挺迷茫的，現(xiàn)在目標(biāo)清晰多了。計(jì)劃下學(xué)期就系統(tǒng)學(xué)學(xué)Node.js，看看能不能把前后端能接觸到的都學(xué)點(diǎn)，為秋招做準(zhǔn)備。實(shí)習(xí)里看到的一些前端發(fā)展趨勢，比如Serverless、微前端這些，感覺挺有意思的，也驗(yàn)證了我選方向的正確性。行業(yè)里現(xiàn)在對性能、體驗(yàn)要求越來越高，這促使我必須得把基礎(chǔ)打牢，以后不管是考證還是找工作，這些實(shí)際項(xiàng)目經(jīng)驗(yàn)都是硬通貨，比紙上談兵要有力得多。感覺自己現(xiàn)在看問題的角度都不一樣了，以前覺得代碼寫對就行，現(xiàn)在會想怎么寫得更高效，更健壯，考慮得更全面。這種思維方式的轉(zhuǎn)變，比學(xué)會幾個(gè)新技能更重要。

總的來說，這次實(shí)習(xí)像是在給學(xué)校教育畫了個(gè)圈，又向外拓展了一步。雖然過程中也犯錯(cuò)，比如8月10號那個(gè)促銷頁面的返款邏輯bug，差點(diǎn)搞砸，但解決之后學(xué)到了不少東西。未來肯定要把這些經(jīng)驗(yàn)好好消化，不管是繼續(xù)深入學(xué)習(xí)，還是準(zhǔn)備下一階段的求職，這段經(jīng)歷都將是重要資本。感覺自己在壓力下解決問題的能力，跟團(tuán)隊(duì)協(xié)作溝通的能力，都得到了鍛煉。從學(xué)生時(shí)代那種“我覺得應(yīng)該這樣”的被動(dòng)接受，到現(xiàn)在能主動(dòng)去承擔(dān)任務(wù)，去思考怎么把事情做好，這種變化挺大的。接下來就是擼起袖子加油干，把實(shí)習(xí)的坑都填平，把學(xué)到的技能用起來，爭取以后能真正成為團(tuán)隊(duì)里能干活的一份子。

四、致謝

在這次為期八周的實(shí)習(xí)中，得到了很多幫助。

感謝實(shí)習(xí)單位給我提