文章出處

先說背景吧:去年做了個項目,是一個財經資訊站,流量還湊合,但是由于技術比較舊,且有bug,所以公司決定對這個站進行改版.

 

……廢話不多說了,就說下這次新網站使用到的部分技術及開發中用到的工具(只說前端部分),這次新網站是本著網站使用穩定,提高可維護性思想進行開發的,所以選用的技術不是最新,最潮的,而是相對穩定的.

  舊網站 新網站
css 原生css 用到了less預處理
網站圖片 都是單張圖片 css sprite+iconfont
內容結構 拼接字符串 模板
列表頁優化 懶加載
cdn使用 一些庫和框架使用了cdn
股票組件 圖片 canvas
自動化 gulp
…… …… ……

其實這樣看看,網站也沒有用到什么高級前沿技術,只不過之前網站太low了,所以感覺任何一點優化都是前進了一大步!

 

總結了一下自己的體會,可能是老生常談的大道理,不過我覺得很重要:

 

1.編寫可維護的代碼的很重要,對自己對大家都好!

在看老網站代碼的時候,由于沒有代碼規范,所以不知道哪位前輩在寫js時在函數頭上聲明了一大堆變量:

其中幾個變量名叫:fstr,sstr,tstr,himg,mimg,fimg,bimg,simg,經過代碼分析終于知道這是第一個字符串,第二個字符串,第三個字符串,頭圖,中間圖,腳部圖,大圖,小圖的意思.

語義化命名真的很重要,其實bootstrap的命名方式就很好,比如btn-alert,語義化明顯.

 

2.團隊溝通很重要

jquery的思想是Write Less, Do More,其實我覺得在團隊化開發中應該是Say More,Write Less多一句溝通可能少寫好多無用的代碼.

 

3.大牛的文章以及經典的書上的建議不一定適用于每個項目

就像100年前的太祖放棄蘇聯權威人士的建議,自己提出的"農村保衛城市,武裝奪取政權"方針最終帶領中國人民走向勝利一樣,有時候權威人士的建議固然對,但它不一定適合每個項目.

 

然后說個細節吧:就是關于我負責做的列表頁,為了優化性能及體驗,本來是要做成異步無刷新瀑布流樣式的,就像知乎這種,滾動條一拉到底下就自動加載一些內容:

但是后來考慮了一下,不是所有的列表頁內容都不需要seo,如果重視seo的列表頁怎么辦,于是做出了兩套方案,一套是異步的,一套是同步的.

 

這一點其實是從京東學到的,之前逛京東的時候,翻看京東的商品評論列表,結果點下一頁后,發覺是異步刷新的,頁面沒跳轉,但是到了京東的商品列表頁一點擊下一頁就刷新跳轉了,后來想想雖然都是列表頁,但是因為業務場景不一樣,對seo要求不同.

 

其他技術細節有時間再更新~


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()