search

aszx87410 / frontend-intermediate-course

It's a free online course about some frontend tech including Ajax, CORS, gulp, webpack and so on.
266 stars 88 forks source link

[作業] 繳交 hw6 #91

Closed miau715 closed 7 years ago

miau715 commented 7 years ago

slack 帳號

miau

哪一個作業

  1. 返璞歸真：vanilla js

作業 Github 連結

https://github.com/miau715/frontend-intermediate-course/tree/master/answers/hw6

作業 Github Page 連結

https://miau715.github.io/frontend-intermediate-course/answers/hw6/index.html

其他補充說明

目前為止最痛苦的作業 +_+ 希望老師可以分享測試效能的工具，讓我們能看見努力後的成效究竟如何 XD

aszx87410 commented 7 years ago

其實改成 vanilla js，效能也不見得會提升多少，可能本來從 10ms 變成 9ms，使用者也不會有感覺XD 節省比較多的是檔案大小，少了一個 jQuery 的 library 就少了幾十 kb 另外，document.querySelector("body").className = document.querySelector("body").className.replace(new RegExp('(^|\\b)' + "loading".split(' ').join('|') + '(\\b|$)', 'gi'), ' ');這一段可讀性有點差，而且"loading".split(' ').join('|')這段的意義是？

miau715 commented 7 years ago

是直接照抄這邊的結果... http://youmightnotneedjquery.com/#remove_class 確實在這裡沒必要 = =;;; 如果不能省效能的話也太痛苦...而且節省檔案大小幾十kb也並不多不是嗎？ 覺得還不如做好圖片優化，能省更多 Orz

aszx87410 commented 7 years ago

噢噢那我理解了，他那邊這樣寫是因為可以支援一次 remove 多個，例如說loading loading2 其實效能還是有一點差啦，但規模太小看不出來，有點像是你一天節省一塊錢，一年也才節省三百多塊

幾十 kb 看起來是不多沒錯，所以像是這種優化都會考慮到使用場景 例如說你今天要寫一個網站是專門給網路速度比較慢的一些地方，可能那邊網路還是 2G 一秒下載速度最快才 10kb，50 kb 的檔案就要下載 5 秒，這個差距就非常大了

所以在我們現在這個專案上做這種優化確實沒太大用處，會出這作業主要是讓同學練習一下 以後有機會用到的話才知道該怎麼做 下一次作業開始就可以繼續用 jQuery 囉XD