web网页优化

来源：互联网发布：扩展人脉的软件编辑：程序博客网时间：2024/06/05 15:57

1、对于网页，我们最好使用标准且严格规则的HTML（XHTML）。

如何实现优化呢？

A、使用严格的strict的doctype语句来申明。

             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
               其实，使用doctype语句可以屏蔽和避免浏览器对某些元素的不友好兼容和显示问题。（亲身体会）

B、有些元素不能再严格的doctype网页下使用。

例如：font元素等。
最好的方式通过CSS样式来实现。

C、最好删除一些没有用或者多余的标签以及元素。（读者想，我不是傻子。

）

D、实现同一功能时，最好使用最优使用方式。（智者见智哦）

例如，可以通过div元素来代替table，能通过css实现就最好使用（Css疯子的理念）等。（经典例子：导航栏的实现）

注意：有时可读性比性能更加需要关注。（题外话）

F、有些浏览器还支持压缩机制，最好开启。（*）

2、尽可能少的使用图片，因为导致加载速度慢（可以目见），而且不利于搜索引擎优化SEO（SEO不直接搜索图片）。

如何实现图片优化呢？

A、加上属性alt来说明此图片的功能和含义，这样对于读者，可以在没有完全加载完图片时，知道大概含义。

B、最好应该通过Ajax方式实现友好提示、在图片load函数中通过Ajax。

C、异步更新图片时出现显示不当，有可能是浏览器的缓存机制引起的。最好在URL中添加一个随机数来时URL更新。

D、有人提出把有些<img>主张放到css的xxx-image样式里面去，提高速度。（见3）

E、有些格式的图片也是有利于网络传输的。（弄过PS软件的就应该知道）

F、最好先确定图片的显示大小，不要让浏览器自己计算。

3、对于CSS和JavaScript，我们最好使用外联文件方式加载在网页。

原因：因为浏览器会缓存外部化的文本，而在 HTML 页面自身中以内联方式编写的CSS以及JavaScript 每次都会随HTML一起加载。

所以，在css使用图片，可以让浏览器的缓存机制缓存起来，提高速度。（这个是自己的想法）

如何优化呢？

A、通过HTML中的link元素（Css）以及script元素（JavaScript）来加载外联文件。

B、对于JavaScript，有人提出通过需要时才加载外联文件。（即时效应哦）

其实现机制就是新增一个script元素节点，把外联文件URl（最好在其后添加一个随机数）赋给src属性，然后追加在head元素上。

这个，我觉得只针对某些特殊情况而言。其实JavaScript中 defer 属性也有类似功能，但是有浏览器兼容性问题。

C、优化以及压缩Css代码以及JavaScript代码。（非常好的方式，例如jQuery等产品js框架都是压缩了）

Css(JavaScript)代码压缩网站或者工具自己找。

D、如果是JavaScript内联方式编码的，其中位置的存放也是很重要的哦，有时还影响执行或报异常等问题。

在ROR中，JavaScript和Css都是设置是否缓存起来的（在生产环境就应该缓存哦）。

4、cookie也是会影响网页的加载速度。因为cookie文件时存放在用户本地，网页需要读取获取某些信息。（基本原理）

如何优化呢？

A、最好不用出现cookie文件或者使cookie文件尽可能小易加快读取速度。（

）

B、通过后台程序控制其有效期（expire属性）。【其实本人有时自己手动删除那些cookie文件，后台可以实现自动定期删除】

题外话：

我是一个java程序员，把平常使用时可以优化的列出来，为了给和我一样菜鸟的人少走弯路，同时也是怕下次忘记，自己记下来。

其实，针对速度性能，还在于自己是不是高手水平是很有关系的哦。

希望有好的其他优化方式或者好的点子，最好分享出来哦。（代菜鸟族先谢谢哦）

【本人不才，不对之方请告之】