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)

大澤木小鐵

July 24, 2013
Tweet

More Decks by 大澤木小鐵

Other Decks in Technology

Transcript

  1. 幫你的網頁 民

    102

    7

    23







    做體檢

    View full-size slide

  2. 大澤木小鐵
    Jace Ju
    jaceju

    View full-size slide

  3. 為網頁體檢的目的

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 頁面變成亂碼
    症狀1

    View full-size slide

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

    View full-size slide

  10. html
    網頁伺服器
    charset

    header:
    Content-Type; text/html;
    charset=utf-8

    View full-size slide

  11. html
    網頁伺服器
    charset
    瀏覽器

    header:
    Content-Type; text/html;
    charset=utf-8

    View full-size slide

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

    header:
    Content-Type; text/html;
    charset=utf-8

    View full-size slide

  13. 一律使用 UTF-8
    設定網頁伺服器的預設編碼
    使用正確的檔案編碼
    (多數編輯器皆可設定)
    meta charset 放在 title 之前
    (或任何會包含中文字的標籤)
    預防措施

    中文字

    View full-size slide

  14. 表格中的圖片與
    表格邊框有間隙
    症狀2

    View full-size slide

  15. Standards Mode























    View full-size slide

  16. 怪異模式
    http:/
    /zh.wikipedia.org/wiki/Quirks_mode
    Quirks Mode Standards Mode























    View full-size slide

  17. Quirks Mode Standards Mode
    box model
    image in table (baseline)
    主要差異

    View full-size slide

  18. 一律用 HTML5 的
    (前面不要有任何字元)
    在 img 樣式中加 display: block
    幾乎對所有瀏覽器都能
    開啟 Standard Mode
    預防措施

    View full-size slide

  19. 把網頁網址貼在 Facebook 上時
    沒有顯示圖片及簡短說明
    症狀3

    View full-size slide

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

    View full-size slide

  21. 加上這幾行就對了。






    預防措施

    View full-size slide

  22. 在行動裝置上瀏覽時
    總是無法顯示完整網頁
    症狀4

    View full-size slide

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

    View full-size slide

  24. 避免瀏覽器縮放不正確

    與裝置可視寬度同寬
    初始縮放 100%
    最大可縮放為 100%
    預防措施

    View full-size slide

  25. 頁面載到一半時
    才開始套用樣式
    症狀5

    View full-size slide

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

    View full-size slide

  27. 儘可能改用外部 CSS
    放在 head 中
    不要加入太多無關此頁面
    的 CSS 規則
    Unused CSS
    http:/
    /unused-css.com/
    預防措施

    View full-size slide

  28. CSS 規則寫了一堆
    到底有沒有套用上去
    症狀6

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. CSS 檔案模組化
    透過工具或 Framework 內建
    功能將 CSS 合併及壓縮
    Web-Based Tools for Optimizing, Formatting and
    Checking CSS
    http:/
    /sixrevisions.com/css/css_code_optimization_formatting_validation/
    預防措施

    View full-size slide

  32. 圖片載入速度總是很慢
    症狀7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 儘可能固定元素寬高
    HTML 儘可能不要太多層
    避免複雜的 CSS 規則
    避免頁面捲動時有固定
    元素加上動畫
    Minimizing browser reflow
    https:/
    /developers.google.com/speed/articles/reflow
    預防措施

    View full-size slide

  38. 擔心 IE6/7/8 使用者
    看不到正確且完整的呈現
    症狀9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Progressive enhancement
    功能易用性 >> 畫面完整性
    預防措施
    Progressive enhancement is still important
    http:/
    /jakearchibald.com/2013/progressive-enhancement-still-important/

    View full-size slide

  42. 前端問題多
    同事仍需努力

    View full-size slide