2013年09月10日
网页优化 的一些方法

网页优化:个人认为是提高加载速度,减少客户端或服务器端负担,从而提高用户体验的一些方法(概念有待完善)本篇博文只是个人对网页优化的一些经验总结,方法大多来源于网络和身边大神级同学的指点,仅供参考,但求列位前端大神神指点。

个人总结的网页优化方法

  1. 图片优化

  2. 代码优化

图片优化方法

  1. 合并图片:

尽量将网站上修饰性的图片按一定的规律合并到一个图片文件中去。
优点:一方面减少网页中HTTP请求的数量(只请求加载一张图片,之后用CSS控制图片显示位置);另一方面减少了维护图片的数量,便捷很多。
缺点:后期的维护会遇到一些问题,有可能会使这张图片越来越大,还要注意布局,尽量不影像显示效果。

  1. 图片优化:

通过运用优化工具将图片的体积尽量减小,也可以是改变图片的格式,但要求图片尽量保真。
例如对于jpg的图片在PS中保存的时候对比比较强烈的将品质在51以上60左右即可,对于色彩较多,还需要显示效果比较好的也要在95以下。
还有对于PNG和GIF图片优化的方法,这会涉及到很多算法的东西,本人看的教程是:
前端开发图片原理与优化

前端开发图片原理与优化

虽然算法没怎么看懂,但是学学图片压缩的方法还是很有用的。

  1. 图片延迟加:

针对网页上要展示的图片较多的网站,主要是将网站中的样式加载完成之后在加载产品图片等展示性的图片文件,能让客户快速的浏览网站的大体轮廓,避免由于加载过慢影像到用户体验。
延迟加载(Lazy load)文件链接
限制未显示部分的图片加载,等网页滚动到相应位置时再加载。
先加载同一张图片,待网页加载完成之后再用js代码将图片路径替换为正确的路径。

  1. 尽量用代码代替图片:

很多的小的图片都可以用代码实现,这样可一有效的为网站瘦身,个人推荐的教程是:
网站优化之CSS无图片技术

网站性能优化之CSS无图片技术

也可以使用字体图片 Icon Fonts 这种方法可以有效减少页面的请求。

  1. 规定图片的宽高,以避免页面再次渲染。

代码优化方法

  1. 上传服务器时,压缩CSS和Js文件,减小文件体积。(js代码压缩的可能会出错,一般是代码不规范,一般在文件的结尾加“;”避免出错(这句不知道对不对))

  2. 首页引用文件,一般把CSS文件放在页面的开头<head></head>之间,js文件放在页面的结尾。
    这是由于CSS文件的加载是并行的(同时加载),也是为了能够尽快的为用户呈现网站的样式;JavaScript文件的加载是串行的(安顺序一个一个的加载,理论上更耗时),但是涉及到样式的js文件也会放到页面的开始,但是一般都在CSS文件的后面。

  3. 规范代码,主要是为了提高后期维护效率,让代码更整洁。
    CSS代码规范
    JavaScript代码规范
    (总之感觉就是有时候有个像样的规矩干起事来就有模有样的·····)


推荐的优化文章


本博文还有待完善,巨大的完善。