對前端頁面的優化小計

做前端也算10來年了,針對Js及頁面相關的功能,基本上知道一些優化,現在做一個簡單的總結,這是我個人對互聯網的一些理解,當然有強人有更好規範,值得我們去學習

1.因爲根據瀏覽器的加載方式不同,儘量不讓head中出現js的加載,如果是在head中的話,這樣頁面會在等待js下載完成後再進行加載

2.在頁面元素呈現之前加載所有需要的css,因爲頁面(差不多所有的瀏覽器都是加載一部分內容就通過樣式表進行渲染,所以當然越早加載越好。

3.俗話說得好,互聯網時代字節就是金錢,所以儘量要保持最少的傳輸量,對於程序級別那自然就是css,及js的壓縮了,所以在項目發佈時,一定要進行壓縮。

4.保持儘量少的js及css文件引用,因爲多一個引用,就多一個請求,那怕請求的文件內容很少,多一次不如少一次,當然非互聯網項目,這些可能可以不用考慮,畢竟一個web系統在牛X的機器上面跑着,也沒有幾個人用,是體現不出來的。

5.當然就是現在的DNS預加載處理了,DNS Prefetch 因爲本人做的項目資源基本上都是同一域名,而且現在的訪問不太,沒有使用,不做評價,但是有很多網站訪問量很大的,都採用了,所以我們當然,可以相信,還是有好處的。

6。當然就是div+css的方式顯示頁面了,用div+css方式顯示頁面,不是因爲我們有多愛他,而是因爲如果是table方式的話,兩種寫法的加載方式不同,div是局部加載,如果配上1,2點的話,頁面的顯示效果更好了。

7.就是針對圖片的顯示處理Baseline JPEG和Progressive JPEG,這個需要js的支持,或者專門的代碼來實現,簡單說明一下,我們大多數的圖片處理都是basline方式的就是圖片是一行一行的加載的,而Progressive jpeg就是我們平時看到的很我外國網站上面實現在的開始模糊慢慢清晰的圖片,效果有在google搜索下有很多對比,大家都知道progress jpeg顯示效果好,但是我們一般針對圖片都是用c的像素級別來處理以保證圖片處理的速度及效果,我沒有找到開源的,所以在此不討論該實現,當然用C#比較好實現progressive jpeg,誰叫C#不是什麼服務器都可以用呢,所以就是採用js來針對baseline的圖像做預處理,就是說在要顯示圖片的地方先用一個加載的樣式,佔位,用js new Image(),指向你要顯示的圖片,待圖片加載完成後,在原來要顯示圖片的位置,顯示出加載完成的圖片。

8.其它的一些常用的優化,屬於程序員經常要考慮的,比方法,減少算法的運行次數,減少內存中對像的數量等,在寫代碼時,尤其是前端代碼一定要注意。

希望這些簡單的總結,對我們的工作帶來益處。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章