Web 前端优化最佳实践之图象篇

2014/09/21 | 星期日 分类:建站优化 | 没有评论 标签: | 作者: | 951 views

Web 前端优化最佳实践之 图象篇

Web 前端优化其中第一条就是减少HTTP请求,若网站某一页面很多很多小图片,整个页面就会增加N多的HTTP请求,从这方面入手谈谈图片对前端页面的优化:

1. 优化图片 (Optimize Images)

使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片,更多的功能,更小的尺寸(与 GIF 相比)。

对于 PNG 图片,考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表:

pngcrush http://pmt.sourceforge.net/pngcrush/
pngrewrite http://www.pobox.com/~jason1/pngrewrite/
OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程)
PNGOut http://advsys.net/ken/utils.htm
另请参见: Five Tips For the Effective Use of PNG Images

对 JPEG 图片的优化工具:

jpegtran (http://jpegclub.org/)
必需要强调的是,图片设计的同学啊,请考虑设计面向 Web 的图片,不要动不动就设计超过可接受尺寸之外大家伙,这应该是一种习惯,而不是什么高超的技能,只需要记住就成了。

2. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)

简单的说就是”利用 CSS background 相关元素进行背景图绝对定位”,把多次 HTTP 调用变为一次调用,更多参考:CSS Sprites: Image Slicing’s Kiss of Death

补充一下:对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个,减少 HTTP 调用,这是一个很好的思路。但一定要记住这个大图片不能太”重”,我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。

更新:使用 CSS Sprites 的一个潜在的副作用是客户端将消耗更多内存。

3. 不要在 HTML 中使用缩放图片 (Don’t Scale Images in HTML)

更多的时候,可能是因为偷懒而没有制作合适大小的图片,如果是批量处理图片的话,可能一条 ImageMagic 命令(convert )就能搞定 。必须提及的是,看到太多的对图片拉伸很难看的页面!

4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)
地址栏显示的小图标:favicon.ico

更小,可缓存,这两条可能都不是问题。问题是,太多站点根本没有 favicon.ico 。有的时候,判断独立域名的 Blog 是否专业,基本看一下是否有 favicon.ico 就差不多了。

参考:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_image.html

WEB前端优化之JavaScript篇

2014/09/17 | 星期三 分类:建站优化 | 没有评论 标签: | 作者: | 961 views

WEB前端优化之JavaScript,先来两个问题:什么是JavaScript?JavaScript有什么用?

JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持.

JavaScript用途:
a.嵌入动态文本于HTML页面;
b.对浏览器事件做出响应;.
c.读写HTML元素;
d.在数据被提交到服务器之前验证数据;
e.检测访客的浏览器信息;
f.控制cookies,包括创建和修改等。

WEB前端优化之JavaScript:

1. js脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了)。所以,把它扔到最后面去处理。对于一些功能性的脚本,可能实现起来有些两难。不过对于国内网站来说,有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说,绝对可行的建议,放到页面最底下。

2. Make JavaScript and CSS External.

剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

如果没有 JavaScript 与 CSS 可能更好。但,这是不可能的,SO,尽量小点吧。语法能简写的简写。

4. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说,这倒是比较常见的。接手维护人前后变化过多,每个人都有自己的一套。这就会带来一些潜在的麻烦。

5. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议:

缓存已经访问过的元素 (Cache references to accessed elements)
“离线”更新节点, 再将它们添加到树中 (Update nodes “offline” and then add them to the tree)
避免使用 JavaScript 输出页面布局–应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)
阅读全文

WEB前端优化之CSS

2014/09/14 | 星期日 分类:建站优化 | 没有评论 标签: | 作者: | 914 views

什么是CSS?
CSS是英文Cascading Style Sheets的缩写;(通俗的描述就是HTML的衣服^_^)
CSS指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。

说说前端CSS优化:CSS是用来渲染页面的,也是存在渲染效率的问题。
Web 前端优化最佳实践第四部分面向 CSS。另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS

1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)

官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待,而浏览器已经考虑到了这一点。

2. 避免 CSS 表达式 (Avoid CSS Expressions)

个人认为通过 CSS 表达式能做到的事情,通过其它手段也同样能做到而且风险更小一些。

3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。

4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

如果没有 JavaScript 与 CSS 可能更好。但,这是不可能的,SO,尽量小点吧。语法能简写的简写。

5. 使用 而不是@importChoose over @import

在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。

6. 避免使用Filter (Avoid Filters)

对于第3,4点,对javaScript 与 CSS压缩,一般常用 YUI Compressor,它的特点是:移除注释;移除额外的空格;细微优化;标识符替换。
亦可以在线压缩:http://ganquan.info/yui/?hl=zh-CN

额外知识:请自行查询 YUI Compressor的配置和使用。

文章来源:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_css.html
转帖文章,主要用于学习。

Http协议详解

2014/09/13 | 星期六 分类:建站优化 | 没有评论 标签: , | 作者: | 958 views

什么是HTTP协议?这真是一个大学问,相信有很大一拨人从事互联网开发多年,虽然知道是怎么回事,但一问起其原理,概念都会懵了,俺就是其中一个,故特地查看写资料,收集了此篇文章,作为知识储备:

HTTP协议(HyperText Transfer Protocol,超文本传输协议)从WWW服务器传输超文本到本地浏览器的传送协议。
HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。

HTTP的定义和历史
在网络中,传输数据需要面临的几个问题:
1.客户端如何知道所求内容的位置?统一资源定位符(Uniform Resource Locator,缩写为URL)
2.当客户端知道所求内容位置后,将如何获取所求内容?超文本传输协议(HTTP)
3.所求内容以何种形式组织以便被客户端识别?超文本标记语言(HTML)

HTTP版本:HTTP0.9 HTTP1.0 HTTP1.1

HTTP协议的主要特点可概括如下:
1、支持客户/服务器模式。
2、简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。
3、灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
4、HTTP 0.9和1.0使用非持续连接:限制每次连接只处理一个请求,服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
HTTP 1.1使用持续连接:不必为每个web对象创建一个新的连接,一个连接可以传送多个对象。
5、无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。
阅读全文

减少HTTP请求-前端优化一

2014/09/10 | 星期三 分类:建站优化 | 没有评论 标签: , | 作者: | 1,022 views

关于前端性能优化的问题,分几篇讲解,对于难理解将另写Blog,后续不断加链接更新

前端优化军规,罗列如下:
1.减少HTTP请求
2.正确理解重绘Repaint 和 重排Reflow
3.减少对DOM的操作
4.使用JSON格式来进行数据交换
5.高效使用HTML标签和CSS样式 
6.使用CDN加速(算是前端一种).
7.将CSS和JS放到外部文件中引用,CSS放头,JS放尾;
8.精简CSS和JS文件(文件压缩)
9.图片优化,压缩图片和使用图片Sprite技术
10.注意控制Cookie大小和污染
11.使得 Ajax 可缓存 (Make Ajax Cacheable)
12.延迟载入组件 (Post-load Components)
13.预载入组件 (Preload Components)
14.避免重定向 (Avoid Redirects)
15.杜绝 http 404 错误
16.最小化 iframe 的数量 (Minimize the Number of iframes)

标注:
11.响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。
12.13 这两条属于异步这个思想灵活运用。
14.不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ,就能有效避免一次重定向。http://www.seedpaddy.com/blog 与 http://www.dbanotes.net/blog/ 二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。
15.对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误,亦能提升用户体验。值得一提的是,CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。
16.熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,请一分为二看此问题。.

前端优化之一 减少HTTP请求:

在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。
阅读全文

Godaddy设置开通SSH

2013/04/02 | 星期二 分类:建站优化 | 没有评论 标签: , | 作者: | 1,647 views

Godaddy主机的SSH功能是免费的,可自行开通。在最近购买的Godaddy主机里,开通SSH也不再需要你删除主机里的所有数据库,而是可以直接在线开通,免除了以前为开通SSH而迁移数据的烦恼,前后只需要不到一分钟就行。具体操作过程如下:

1、首先登陆自己的Godaddy主机管理页面,点击如下图菜单进入SSH开通设置
goddy_ssh

2、随后的选项中输入电话号码(Godaddy开通SSH需要在电话认证, 不会收取费用)
Country Code (国家代码): 中国的国际代码是86
Phone Number (电话号码): 视自己情况输入.
Extension(分机号):一般不用输入
Enable 确定按钮,提交验证,获取PIN码
阅读全文