Checkup your web pages

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

大澤木小鐵 Jace Ju jaceju

為網頁體檢的目的

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

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

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

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

頁面變成亂碼症狀1

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

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

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

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

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

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

<!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>

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>

怪異模式 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>

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

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

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

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

加上這幾行就對了。 <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="<網站名稱>" /> 預防措施

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

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

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

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

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

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

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

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

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

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

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

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

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

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

reflow

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

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

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

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

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

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

前端問題多同事仍需努力

Checkup your web pages

Checkup your web pages

More Decks by 大澤木小鐵

Other Decks in Technology

Featured

Transcript