爱得太迟 - 该用户没注册,没有签名...

前端性能优化建议--年终总结

Submitted by 爱得 on 2010, January 15, 1:21 PM

一．结构有待优化。
目前网站结构代码存在冗余现象，结构的语义化不强，在扩展方面表现出不足。

修改方案：
后继制作应该考虑使用语义化的标签，使结构语义化，增强扩展性能力，以求在良好好结构中适应不同的设计需求。还可减少冗余代码，优化结构。

二. 样式的调用。
目前使用 <link>方式调用样式与JS，由于是模块化工作，使得有些模块反复调用同一样式的情况出现，部分样式重调与覆盖率太高，增加了http请求数，加大了下载的时间，减慢浏览器解释的速度，并造成了流量的损失。

修改方案：
整合样式，把每个页面用到的样式整合到同一个文件中，并对该页面的样式进行优化，去掉注释、空格、换行等，并通过第三方压缩软件进行压缩，以得到发布时最小的样式文件。

注：当然这又涉及到了样式管理，样式版本管理与多人协作的问题。

三. 修饰图片的优化。
目前网站中大多修饰图片都没有经过有效的整合，导致加载速度过慢、请求数增多，影响到页面的响应时间。

修改方案：
1．建议设计搞用色控制在255色内。
2．修饰图片格式的选择——GIF、PNG-8、PNG-24、JPG等，按需求进行选择合适的图片类型以求降低图片字节。
3．对公用的修饰图片、使用频率较高的修饰图片运用Css Sprites技术——也就是把修饰的小图片合理的整合到一张规范大小的图片上，以求减少请求数与图片大小，加快页面响应时间。
4．对某些比较大的修饰图片如JPG可运用第三方软件的再压缩，以求在不损失效果的前提下得到最佳大小。

注：特别强调一下css sprites技术。
a．CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。应用该技术的同时会相应的增加开发时间与维护成本，如果修改频率过高不建议使用。
b．压缩工作的推荐：Image Optimizer

» 阅读全文

Tags: 优化, web标准, 总结

Web标准 | 评论:0 | Trackbacks:0 | 阅读:525

Iamge固定居中于Div层中....

Submitted by 爱得 on 2010, January 14, 10:37 AM

昨天群里的一位同学出了一个需求:在一固定的div中,图片如果大于div则实现等缩放,如小于则按原大小显示.2、不管前面那种情况,图片都要上下左右居中于div.

于是,动手写了下面的代码...

错误处不清楚,能力有限,期待高手批...

» 阅读全文

Tags: 居中, web标准

Web标准 | 评论:0 | Trackbacks:0 | 阅读:298

弹出窗口、遮罩、拖动、上下左右居中

Submitted by 爱得 on 2010, January 13, 9:00 AM

前天参考51js一位牛人而整理的一个效果.

因这效果现下比较适用,所以先行试练.总体上没超过原作的思想,能力有限...

看代码吧

XML/HTML代码

<p id="dt_1">登录</p>
<div id="bodyBg" style="display:none;"></div>
<div id="maiBox" style="top:-900px;left:-900px;">
<div id="loginBox">用户登录</div>
<form action="#" method="">
<ul class="aiTable">
<li><label for="username">用户名:</label><input type="text" id="username" name="username" class="aoie" /></li>
<li><label for="password">密码:</label><input type="password" name="password" id="password" class="aoie" /></li>
<li class="aisubmit"><label><input type="submit" name="submit" value="登录" id="subLogin" /></label></li>
</ul>
</form>
<div class="wanji"><a href="#">忘记密码</a><a href="#">注册</a></div>
<p class="aiinput"><a id="aiclose" href="#">关闭</a></p>
</div>
<script type="text/javascript">
<!--
for(var i=1;i<=2;i++)
{
eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
}
var bodyBg = document.getElementById("bodyBg");
var maiBox = document.getElementById("maiBox");
var loginBox = document.getElementById("loginBox");
var boxh = document.getElementById("maiBox").scrollHeight;
var boxw = document.getElementById("maiBox").scrollWidth;
var winWidth = document.documentElement.clientWidth;
var winHeight =document.documentElement.clientHeight;
document.getElementById("aiclose").onclick = function()
{
hidden("maiBox");
hidden("bodyBg");
}