In the Making of Mnjul’s Intimate Home 4931 (IX)

上一篇在這裡喔。

因為現在做前端工程師,所以又來幫網站做一些有的沒的的更新。

  • 再做更多最佳化 jQuery selector,能少 query 就少 query,能 cache 就 cache。
  • 載入畫面跟背景音樂/雨聲的所有 loader 現在都改用 jQuery Deferred 來做 synchronization barrier,code 一整個乾淨很多。
  • 只用一次的 function 會用完就刪掉。
  • 盡量不用 jQuery 加字串建 DOM element,而直接用 document.createElement
  • 用了 ES5 的一些 array functions,像是 Array.prototype.forEach,來取代簡單的 for(;;)for(in)。主要還是覺得「語感」比較好,實際上的效能搞不好還變差咧。但我現在這份工作做了一陣子,也變得跟 timdream 一樣,提倡少花心思在 micro-optimization。
  • 減少了對大量 children 加同一個 class 或是 CSS 的情形,盡量把 class 放在 common ancestor,而用 CSS rule 讓所有 children 都有那個 style。特別是需要對每頁內容指定白/藍/紫冷色的時候。
  • 另外如果有太多 children 需要 bind 同一種 event,就 bind 到 common ancestor 上。也就是 jQuery.on() delegation。
  • 不知從何時開始的 webkit 版本開始可以對 webfont 吃 text-rendering: optimizeLegibility;,就用了。
  • 有一些本來用 jQuery 手動添加的文字改用 CSS :after:before
  • 我 CSS 內不合 syntax 的自定變數 改用 CSS variable 來定義。不過實際上還是用 JS 取代,只是這樣 CSS 本身可以符合 syntax。
  • CSS linear-gradient 的語法改用「新」語法。
  • 修了一個起風的時候雨會直接消失的 bug。
  • 修了漸進載入 Fragments 跟 Shards 的時候會不小心 re-serialize & re-parse HTML & jQuery object 的 bug。
  • 改用 animationend/transitionend event 來決定 code 要幹嘛,而不是用 setTimeout,或是用 jQuery animation 的 callback ( 後者也是因為我想要用 native CSS animation )。
  • 因為 -moz-user-select 的行為有變,我本來的 CSS rule 等於沒效。修了這個 bug 之後,現在有正確套用到所有的元素了。欸,這該不會跟 Firefox OS 2.1 跟 2.2 的 text-selection 有關係吧。
  • devicePixelRatio 現在沒有被我的 python minifier 給吃掉了。

說真的,因為平常工作只要針對 Gecko tune 就好,實際上自己的網站要相容各種瀏覽器,版本也不能太新,還真是不少挑戰。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *