Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Checkup your web pages

Checkup your web pages

2013/7/24 @ HP50

參考資訊:

* MetaCharsetAttribute (http://code.google.com/p/doctype-mirror/wiki/MetaCharsetAttribute)
* 怪異模式
 (http://zh.wikipedia.org/wiki/Quirks_mode)
* Using Self-Hosted Objects (
https://developers.facebook.com/docs/opengraph/using-objects/)
* html viewport meta 說明及淺見
 (http://blog.caesarchi.com/2012/05/html-viewport-meta.html)
* 瀏覽器的渲染原理簡介 (
http://coolshell.cn/articles/9666.html)
* Unused CSS (
http://unused-css.com/)
* CSS selector's specificity (http://www.w3.org/TR/css3-selectors/#specificity)
* Specificity Calculator
 (http://specificity.keegan.st/)
* Firebug Inspector (http://getfirebug.com/wiki/index.php/Inspector)
* OOCSS——概念篇 (http://www.w3cplus.com/css/oocss-concept)
* Web-Based Tools for Optimizing, Formatting and Checking CSS (
http://sixrevisions.com/css/css_code_optimization_formatting_validation/)
* Minimizing browser reflow (
https://developers.google.com/speed/articles/reflow)
* Progressive enhancement is still important
 (http://jakearchibald.com/2013/progressive-enhancement-still-important/)
* CSS Guidelines (https://github.com/chadluo/CSS-Guidelines/blob/master/README.md)

F830ec52d5bf72ee64fd1a43a6a82a49?s=128

大澤木小鐵

July 24, 2013
Tweet

Transcript

  1. 幫你的網頁 民 國 102 年 7 月 23 日 值

    日 生 : 小 鐵 做體檢
  2. 大澤木小鐵 Jace Ju jaceju

  3. 為網頁體檢的目的

  4. 為網頁體檢的目的 減少呈現問題

  5. 為網頁體檢的目的 減少呈現問題 加速網頁載入

  6. 為網頁體檢的目的 減少呈現問題 加速網頁載入 符合現行趨勢

  7. 開始檢查 http:/ /www.radompon.com

  8. 頁面變成亂碼 症狀1

  9. html

  10. html 網頁伺服器 header: Content-Type; text/html; charset=utf-8

  11. html 網頁伺服器 charset <meta charset="utf-8"> header: Content-Type; text/html; charset=utf-8

  12. html 網頁伺服器 charset 瀏覽器 <meta charset="utf-8"> header: Content-Type; text/html; charset=utf-8

  13. html 網頁伺服器 charset 瀏覽器 有些瀏覽器在沒看到 charset 前 會利用 title 做編碼判斷

    <meta charset="utf-8"> header: Content-Type; text/html; charset=utf-8
  14. 一律使用 UTF-8 設定網頁伺服器的預設編碼 使用正確的檔案編碼 (多數編輯器皆可設定) meta charset 放在 title 之前

    (或任何會包含中文字的標籤) 預防措施 <meta charset="utf-8"> <title>中文字</title>
  15. 表格中的圖片與 表格邊框有間隙 症狀2

  16. <!doctype html> <html> <body> <table cellspacing="0"> <tr> <td> <img src="..."

    alt=""> </td> </tr> </table> </body> </html> <html> <body> <table cellspacing="0"> <tr> <td> <img src="..." alt=""> </td> </tr> </table> </body> </html>
  17. None
  18. None
  19. <!doctype html> <html> <body> <table cellspacing="0"> <tr> <td> <img src="..."

    alt=""> </td> </tr> </table> </body> </html> <html> <body> <table cellspacing="0"> <tr> <td> <img src="..." alt=""> </td> </tr> </table> </body> </html>
  20. Standards Mode <!doctype html> <html> <body> <table cellspacing="0"> <tr> <td>

    <img src="..." alt=""> </td> </tr> </table> </body> </html> <html> <body> <table cellspacing="0"> <tr> <td> <img src="..." alt=""> </td> </tr> </table> </body> </html>
  21. 怪異模式 http:/ /zh.wikipedia.org/wiki/Quirks_mode Quirks Mode Standards Mode <!doctype html> <html>

    <body> <table cellspacing="0"> <tr> <td> <img src="..." alt=""> </td> </tr> </table> </body> </html> <html> <body> <table cellspacing="0"> <tr> <td> <img src="..." alt=""> </td> </tr> </table> </body> </html>
  22. Quirks Mode Standards Mode box model image in table (baseline)

    主要差異
  23. 一律用 HTML5 的 <!doctype html> (前面不要有任何字元) 在 img 樣式中加 display:

    block 幾乎對所有瀏覽器都能 開啟 Standard Mode 預防措施
  24. 把網頁網址貼在 Facebook 上時 沒有顯示圖片及簡短說明 症狀3

  25. Facebook Open Graph Using Self-Hosted Objects https:/ /developers.facebook.com/docs/opengraph/using-objects/

  26. 加上這幾行就對了。 <meta property="og:title" content="<網頁標題>" /> <meta property="og:type" content="website" /> <meta

    property="og:description" content="<網頁描述>" /> <meta property="og:url" content="<網頁網址>" /> <meta property="og:image" content="<代表圖片>" /> <meta property="og:site_name" content="<網站名稱>" /> 預防措施
  27. 在行動裝置上瀏覽時 總是無法顯示完整網頁 症狀4

  28. View-Port html viewport meta 說明及淺見 http:/ /blog.caesarchi.com/2012/05/html-viewport-meta.html http:/ /tableless.com.br/regra-viewport/

  29. 避免瀏覽器縮放不正確 <meta name="viewport" content=" width=device-width, initial-scale=1, maximum-scale=1"> 與裝置可視寬度同寬 初始縮放 100%

    最大可縮放為 100% 預防措施
  30. 頁面載到一半時 才開始套用樣式 症狀5

  31. CSS 來不及套用 瀏覽器的渲染原理簡介 http:/ /coolshell.cn/articles/9666.html html DOM Tree CSS Rule

    Tree 建構頁面 原因
  32. 儘可能改用外部 CSS 放在 head 中 不要加入太多無關此頁面 的 CSS 規則 Unused

    CSS http:/ /unused-css.com/ 預防措施
  33. CSS 規則寫了一堆 到底有沒有套用上去 症狀6

  34. CSS selector's specificity http:/ /www.w3.org/TR/css3-selectors/#specificity Specificity Calculator http:/ /specificity.keegan.st/

  35. Firebug Inspector http:/ /getfirebug.com/wiki/index.php/Inspector

  36. CSS 檔案模組化 透過工具或 Framework 內建 功能將 CSS 合併及壓縮 Web-Based Tools

    for Optimizing, Formatting and Checking CSS http:/ /sixrevisions.com/css/css_code_optimization_formatting_validation/ 預防措施
  37. 圖片載入速度總是很慢 症狀7

  38. 圖檔沒有優化 (PNG / JPEG / GIF) 圖檔沒有被瀏覽器快取 小圖太多,佔掉連線數 原因

  39. 使用縮圖 針對圖片內容優化 CSS Sprite 使用瀏覽器快取 CDN 預防措施

  40. 頁面在效能較差的電腦上 瀏覽感覺會很笨重 症狀8

  41. reflow

  42. 縮放視窗 改變字型的尺寸 透過某些行為變更了樣式 內容改變,例如新增或刪除 DOM 元素 動畫效果 reflow原因

  43. 儘可能固定元素寬高 HTML 儘可能不要太多層 避免複雜的 CSS 規則 避免頁面捲動時有固定 元素加上動畫 Minimizing browser

    reflow https:/ /developers.google.com/speed/articles/reflow 預防措施
  44. 擔心 IE6/7/8 使用者 看不到正確且完整的呈現 症狀9

  45. 走火入魔 想盡辦法讓 IE6/7/8 使用者 也看得到相同的畫面 加了太多外掛反而讓頁面 反應越來越遲頓 使用者真的在乎嗎?

  46. 數字背後的意義 嫌升級麻煩或是沒辦法自行升級?

  47. Progressive enhancement 功能易用性 >> 畫面完整性 預防措施 Progressive enhancement is still

    important http:/ /jakearchibald.com/2013/progressive-enhancement-still-important/
  48. 前端問題多 同事仍需努力