Checkup your web pages - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

大澤木小鐵 Jace Ju jaceju

Slide 3

Slide 3 text

為網頁體檢的目的

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

頁面變成亂碼症狀1

Slide 9

Slide 9 text

html

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Standards Mode

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Firebug Inspector http:/ /getﬁrebug.com/wiki/index.php/Inspector

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

reflow

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

前端問題多同事仍需努力