---
layout: post
title: 关于网站前端
date: '2013-10-21 11:49'
comments: true
published: false
categories: [website]
tags: [front-end-optimization, Theme, web-fonts, cookie-free]
url: '/about-front-end/'
excerpt: "<p>最近部署了个新的博客主题，并花了些时间来做前端优化，在这过程中有不少收获，也遇到不少问题。现就部分笔者比较感兴趣的点拿出来记录一下。</p><p>本文主要涉及内容为 <b>Web 前端优化</b> 和 <b>Web Fonts</b>。</p>"
---
最近部署了个新的博客主题，并花了些时间来做前端优化，在这过程中有不少收获，也遇到不少问题。现就部分笔者比较感兴趣的点拿出来记录一下。
## 关于前端优化
笔者没有相关知识和技能，主要是按照 YSlow 和 Google PageSpeed 所建议的做，有些项是比较容易出问题的。
1. 减少请求次数
通常的做法是将同类资源合并。例如将多个 JavaScript 脚本合并，将多个 CSS 文件合并，将每个图标一个图片的形式改为 CSS sprites（单个图片，基于背景定位及分割）。
1. 减少 HTTP 传输数据量
A) 启用 HTTP 压缩（Gzip）。B) 压缩(Minify) JavaScript 和 CSS 文件。
1. 正确设置外部资源引入顺序
将 CSS 放在 HTML 的头部，将 JavaScript 放在 HTML 的底部。CSS 用于渲染页面，需要放在前面。而 JavaScript 会阻塞式加载，应该放在最后。
1. 充分利用浏览器缓存
给静态资源加上比较长的过期时间和缓存有效期。设置 ETags（通常 Apache 会自动设置）。
1. 使用 cookie-free 域
静态资源通常都不需要发送和设置 cookie 信息，所以应该使用一个单独的域来做 [cookie-free domain](/tag/cookie-free/)。
1. 使用 CDN（Content Delivery Network）
A) 整个站点使用 CDN。这需要较高的成本。
B) 仅公共资源使用 CDN。这是比较通常的做法，可以非常好的利用浏览器缓存，并能分散服务器压力。比如多个网站都使用了 Google CDN 提交的 jQuery.js 时，浏览器仅在第一次访问第一个站点时下载该文件，访问其它站点时，可直接从缓存中获取。
目前有这样一些提供公共资源的CDN：
- [Google Hosted Libraries](https://developers.google.com/speed/libraries/devguide) - *AngularJS, Chrome Frame, Dojo, Exe Core, jQuery, MooTools, Prototype, script.aculo.us, SWFObject, Web Font Loader*
- [Microsoft Ajax CDN](http://www.asp.net/ajaxlibrary/cdn.ashx) - *jQuery, Modernizr, JSHint, Knockout, Globalize, Bootstrap, ASP.NET MVC*
- [CDNJS](http://cdnjs.com/) - *非常齐全，实质上使用 CloudFlare CDN*
- [jQuery](http://code.jquery.com/) - *jQuery Core, jQuery UI, jQuery Mobile, jQuery Color, QUnit*
- [Bootstrap CDN](http://www.bootstrapcdn.com/) - *bootstrap js & css*
- [Public Resources on SAE](http://lib.sinaapp.com/) - *新浪 SAE 上的公共资源，国内速度好。*
- [百度 CDN 公共库](http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs) - *国内速度好。*
1. 减少 DNS 查询
使用 Cookie-free 域和使用公共资源 CDN 都会增加整个网站要访问的域的数量，同时也增加了 DNS 查询数，一个 DNS 查询通常需要 20 到 120 毫秒的时间，在 DNS 查询期间浏览器无法下载任何数据。所以 YSlow 建议一个页面的使用的域不要超过 4 个。
1. 较少 DOM 对象数量
保持比较简单的 HTML 结构，减少标签嵌套层次，这样可以增加页面渲染速度。对于负责页面来说优化该项比较有效果，但需要较高的设计水平。
以上优化建议其实需要辩证统一的，因为有些是有矛盾的，笔者就曾主要纠结于与公共资源相关的部分：
- 如果公共资源使用公共 CDN 或者静态资源使用 cookie-free 域，都会增加域数量，会增加 DNS 查询时间，且增加了 HTTP 请求次数。
- 如果将公共资源合并到网站的 JS 或者 CSS 中，则会增大网站服务器压力，且不能很好的利用 CDN 速度和缓存。
笔者最终将 jQuery，Bootstrap 脚本压缩合并到网站的脚本中了，主要是考虑到使用 Google Hosted 的 jQuery 会偶尔抽风。
以下是笔者优化时的 Apache 配置
```
<IfModule mod_mime.c>
# Text
AddType text/css .css
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType text/plain .txt
AddType text/xml .xml
# Image
AddType image/gif .gif
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType image/png .png
AddType image/svg+xml .svg .svgz
# Video
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType video/quicktime .mov .qt
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
# PDF
AddType application/pdf .pdf
# Flash
AddType application/x-shockwave-flash .swf
# Font
AddType application/x-font-ttf .ttf .ttc
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-otf .otf
AddType application/font-woff .woff
# Audio
AddType audio/mpeg .mp3 .m4a
AddType audio/ogg .ogg
AddType audio/wav .wav
AddType audio/wma .wma
# Zip/Tar
AddType application/x-tar .tar
AddType application/x-gzip .gz .gzip
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
# Text
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType text/plain A3600
ExpiresByType text/xml A3600
# Image
ExpiresByType image/gif A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/png A31536000
ExpiresByType image/svg+xml A31536000
# Video
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
# PDF
ExpiresByType application/pdf A31536000
# Flash
ExpiresByType application/x-shockwave-flash A31536000
# Font
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/font-woff A31536000
# Audio
ExpiresByType audio/mpeg A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
# Zip/Tar
ExpiresByType application/x-tar A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType application/zip A31536000
</IfModule>
<FilesMatch "\.(?i:css|js|htm|html|rtf|rtx|txt|xml|gif|ico|jpg|jpeg|jpe|png|svg|svgz|asf|asx|wax|wmv|wmx|avi|mov|qt|mp4|m4v|mpeg|mpg|mpe|pdf|swf|ttf|ttc|eot|otf|woff|mp3|m4a|ogg|wav|wma|tar|gz|gzip|zip)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
Header unset ETag
</IfModule>
</FilesMatch>
<FilesMatch "\.(?i:css|js|gif|ico|jpg|jpeg|jpe|png|pdf|swf|ttf|ttc|eot|otf|woff)$">
<IfModule mod_headers.c>
Header unset Set-Cookie
</IfModule>
</FilesMatch>
<FilesMatch "\.(?i:ttf|ttc|eot|otf|woff)$">
<IfModule mod_headers.c>
Header set access-control-allow-origin "SOMEDOMAIN or *"
</IfModule>
</FilesMatch>
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|iso|tar|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|jpg|ico|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.flv$ no-gzip dont-vary
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent env=!dont-vary
</IfModule>
```
## 关于 Web Fonts
如上一篇文章提到的，Web Fonts 似乎越来越流行了，而且不仅仅用做字体，还有个主要的用途就是图标。将字体用作图标有很多便利，比如可以随意调整大小而不会失真（因为字体是矢量的），可以随意设置颜色等。当前博客的部分图标就是基于自定义字体的。
说道自定义字体，不得不说说 [IcoMoon App](http://icomoon.io/app/) 这个超牛的工具。通过这个工具，你可以在线选择你需要的图标，然后生成 CSS Sprites 的图片或者生成 Web Fonts 下载，下载包中已经包含了定义好的 CSS 和实例 HTML 文件。此外，你还可以上传自己的 SVG 或者其它图片文件， IcoMoon App 会自动转成 CSS Sprites 或者 Web Fonts。
<i class="opoo-opooorg" style="font-size:36px;color:blue;"></i>
上面的这个图标，实质上是一个字符，就是通过 Web Fonts 定义的。
<i class="opoo-opooorg" style="font-size:36px;color:blue;"></i>