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)

Transcript

1. 幫你的網頁 民
   國
   102
   年
   7
   月
   23
   日
   值
   日
   生
   ：
   小
   鐵
   做體檢
   

   View Slide

2. 大澤木小鐵
   Jace Ju
   jaceju
   

   View Slide

3. 為網頁體檢的目的
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 頁面變成亂碼
   症狀1
   

   View Slide

9. html
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. html
    網頁伺服器
    charset
    瀏覽器
    有些瀏覽器在沒看到 charset 前
    會利用 title 做編碼判斷
    
    header:
    Content-Type; text/html;
    charset=utf-8
    

    View Slide

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

    View Slide

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

    View Slide

16. 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

17. View Slide

18. View Slide

19. 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

20. Standards Mode
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. 加上這幾行就對了。
    
    
    
    
    
    
    預防措施
    

    View Slide

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

    View Slide

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

    View Slide

29. 避免瀏覽器縮放不正確
    
    與裝置可視寬度同寬
    初始縮放 100%
    最大可縮放為 100%
    預防措施
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. reflow
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide