查看: 1554|回复: 2

[交流] 网站代码优化

7 主题	0 好友	87 积分

新手上路

Rank: 1

签到天数: 3 天

[LV.2]偶尔看看I

发消息

发表于 2014-7-22 14:19:28 |显示全部楼层

1、 JS
放到页脚比较好。JS放页脚的主要原因是：你的JS会操作页面里的DOM，所以必须保证，先加载了该DOM（元素），再加载欲操作该DOM的JS。否则在没有加载对应DOM的情况下，就执行该JS，则会引起错误，也就是普通的“对象不存在”。
有的时候还要根据JavaScript脚本需求放到不用的地方.
<Script>标记对在HTML文档中最常用的闻之是在<head>部分中。一般来说，<head>部分用于放置不影响网页显示内容的设置标记，例如<meta>标记和文档标题等；这里也很适合放置用于影响用户动作的脚本。如果需要在页面载入时运行脚本生成网页内容，那么应将脚本代码放在文档的<body>部分。
2、图片
一、减少图片数量：较少不必要的图片；
二、降低图像质量：如果不是很必要，尝试降低图片的质量，尤其是jpg格式，降低5%的质量看起来变化
不是很大，但文件大小的变化时比较大的。
三、使用恰当的格式(一般网页上使用的图片格式有三种：jpg、png、gif)：
1、JPG：一般用于展示风景、
人物、艺术照的摄影作品等；
2、GIF：提供颜色较少，可用在一些对颜色要求不高的地方，比如：LOGO、按钮、表情等。Gif用要的应用时动画。3、PNG：png格式能提供透明背景，是一种专为网页展示而发明的图片格式。
3、Css
简化CSS能去冗余的属性，提高运行效率。在写CSS的时候会使用一些啰嗦的语句，不如： Margin-top:10px; Margin-right:10px; Margin-left:10px; Margin-bottom:10px; 可以简化为
Margin:10px 10px 10px 10px;
<p class=”abc”>1</p> <p class=”abc”>2</p> <p class=”abc”>3</p> <p class=”abc”>4</p> 可以简化为 <div class=”abc”> <p>1</p> <p>2</p>
<p>3</p> <p>4</p> </div>
如果CSS写好了，可以使用“CleanCSS“CSS简化工具
4、网址后面加斜杠
只些网址，比如：www.baidu.com/web ，当服务器收到这样的一个地址请求的时候，它需要花费时间去确定这个地址是文件类型，如果web是一个目录，在网址后加上“/“，这样服务器就是能一目了然的知道要访问该目录下的index或default文件，节省加载时间。
5、表明高度和宽度
当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。如：<img id=”a” height=”200” width=”200” src=”图片路径” alt=“图片描述“ />浏览器知道了高度和宽度参数后，及时图片暂时无法显示，页面上也会有图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。
6、减少http请求
当浏览者打开某个网页，浏览器会发出很多对象（图片、脚本等），每个对象加载都有会有延迟。如果网页上对象很多，也会花费大量的时间。一次要为http请求减少负担： 1、去掉一些不必要的对象； 2、将临近的两种图片合成一张； 3、合并CSS样式文件。
7、使用iframe嵌套另一个页面
如果你要在网站上插入一些广告代码，又不想让这些广告网站影响速度的话，那么用iframe最合适。使用方法：将这些广告代码放到一个独立的页面去，然后再首页用如下的代码将该页面嵌入，这样就不会因为广告页面的延迟而拖了整个首页的显示，代码如下：<iframe align=”centr” width=”100” height=”100” name=”all” scrolling=”no” marginwidth=0 frameborder=”0” src=文件路径></iframe>
8、网址计数器代码放置的技巧
在网页里放置计数器可以统计网站的访问流量，为站长和广告商家提供访问数据，但是不管功能有多强大的网站统计，都会有出故障的时候。如果直接把统计代码放到页面内容的前面，或者放在一个table或者div标签里，那么在计数器不能访问的时候，你的页面上那个table或者div就会产生几十秒的延迟，导致页面很长时间不能访问。所以，要提高网站的速度，就要讲究统计代码放置的位置，正确的方法：把统计代码放到一个页面的最下面，并且不要和页面内容在一个table或者div标签里。可以在页面代码的最下方直接放置统计代码，或者在最下方单独做一个table或者div来放置计数器。这样在计数器不能访问的时候，你的网站速度也不会受到影响。
9、友情链接
网站之间互相做链接可以增加网站的宣传效果，做LOGO图链接更能准确地描述网站的主题和定位，在宣传效果会大大的增加，但是图片链接做的太多，必然会影响网页的显示速度。很多站长都喜欢直接引用友情链接网站上的图片URL，这样的图片要经过加载才能显示的，各个友情网站的访问速度不一样，整个表格都要等图片都下载完了才能显示出来，这样大大降低了网页的速度。因此做友情链接时应尽量做到：
1. 只做文字链接。
2. 将所有链接放到一个独立的分页上，然后再首页链接上该页。
3. 如果友情链接一定要出现在首页。请将链接所在的整个table放到一个页面的最下发，因为页面是由上
到下逐行显示的，将其放到页面的最下方，不会延迟其它内容的显示。
4.友情链接的LOGO图片先下载后在传到自己的网站空间，这样速度由自己的网站空间来绝对也不受网站的影响。
这些都是根据网站http://www.3nh.com网站改版优化代码的经验，现在这个网站排名在百度的首页！

踩过的脚印