最近的文章列表

HTTP页面的优化,JS,IIS连接数,代码 前端开发优化
本文是针对网页设计师(WEB前端工程师)的,不涉及程序以及系统。一、基于减少HTTP连接数的优化像刚才这篇文章,就是基于减少并发HTTP连接数的优化。由于IE每次在一个域上并发连接数默认为8个,这意味着超过8个文件的时候,需要等待前8个文件之一传输结束。我们可以:1、将图片,尤其是大图片放到另外一个域名中。大站可以用另一个服务器来专门用于图片的传输。对于虚拟主机可以绑定另外一个域名。这在大网站中很常见。2、合并CSS和JS文件。以及在可能的时候合并图片。3、预加载技术。最近很常见的,就是先用js显示缩略图,然后setTimeout延时加载大图片。二、基于减少体积的优化减少体积意味着减少带宽,能够很直接地减少硬件与带宽的开支。由于网站每日接待成千上万的访客,就是一个字节的优化也可以带来显著的效
2011/11/10 Comments:
十条js优化原则

定义局部变量。对于当前函数作用域内,如果需要使用这个作用域外部的一些变量,那么就尽量使用局部变量储存外部的变量吧,特别是对于嵌套多级的作 用域查询,这个耗时也是比较严重的。还有就是获取DOM节点、NodeList、HTMLCollection等等,可以将NodeList、 HTMLCollection转化为数组的形式进行操作,减少DOM即时更新所造成的性能消耗。不要使用with语句。with语句会在当前作用域下面增加作用域链,造成当前作用域下面变量的遍历性能消耗更大。对于闭包的使用,节省点,不要太过多了。闭包就是提供一个所谓的封闭式的作用域,只允许向包含它向别人访问,而不允许别人访问它。但是声明一个闭包的代价比声明普通的函数的代价是要更高的,况且还有IE下内存泄漏的危险。获取字面量对象的属性

2011/11/9 Comments:
document.write()和document.writeln()的区别

解决思路: 两者都是JavaScript向客户端输出的方法,对比可知写法上的差别是一个ln--line的简写,换言之,writeln 方法是以行输出的,相当于在?winte?输出后加上一个换行符。 注意:document.write方法可以用在两方面:在网页载入过程中用实时脚本创建网页内容以及用延时脚本创建本窗口或新窗口的内容.该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.该字符串参数可以是变量或值为字符串的表达式,写入内容常常包含HTML标记.记住,载入网页后,浏览器输出流将自动关闭.在些之后任何一个对当前网页的document.write()方法都将打开一个新的输出流,它将清除当前网页输出内容(包括源文档中的任何变是和值).因此,如果希望用脚本生成的HTML内容替换当前网

2011/11/9 Comments:
web前端优化之动态加载
网站最近搞了次优化,效果比较明显,以前不敢用的动态加载(我自己起得,洋名叫lazy load,这样翻译应该也算得体,延迟加载也说得过去..)终于派上了用场.总的来说是这样的:页面加载时不会初始化的脚本不引用,不显示的ui用的样式不加载.用户交互用到时加载.除用户可视区域外的图片不加载,用户有滚屏操作时加载.具体实现:1 . 实现js和css的动态加载适用 : 页面的pv较高,功能模块较多,每次刷新页面都需要重复解析和渲染.缺点 : 用户从点击一个按钮到函数响应,中间会有静态的下载和解析的一段延迟(有客户端缓存会好的多)优化 : 为了尽量让用户感觉不到延迟,我们在登录页面预载的一些经常用到的脚本(由于网站的更新周期固定,所以脚本仅会在更新当天预载)实现 :XN.dynamicLoad({fil
2011/11/9 Comments:
JavaScript优化方案二
JS优化已经讨论了很多了,最近又看到aimingoo的一篇。大体上,aimingoo的说法都是非常正确的。 除了像aimingoo做个案研究外,这里我想从更一般的角度总结在浏览器编程中JS优化的几个原则。 首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略。例如FF、Opera和Safari的JS引擎,都对字符串的拼接运算(+)做了特别优化。显然,要获得最大效率,就必须要了解引擎的脾气,尽量迎合引擎的口味。所以对于不同的引擎,所作的优化极有可能是背道而驰的。 而如果做跨浏览器的web编程,则最大的问题是在于IE6(JScript 5.6)!因为在不打hotfix的情况下,JScript引擎的垃圾回
2011/11/8 Comments:
JavaScript优化方案一
作为一名网站开发WEB前端工程师,对自己开发的网站项目应该尽可能地对其性能进行优化,现在互联网上搜索到的网站性能优化多是翻译转载自Yahoo14条或34条。Yahoo的优化建议关注在大的方面,下面,W3C Group为大家呈现WEB前端开发高性能优化部分之JavaScript的优化细节!一、避免出现脚本失控不论什么脚本,在任何时间、任何浏览器上执行,都不应该超过100毫秒。如果实际执行的时间长于这个底限,一定要将进程分解成若干更小的代码段。脚本失控基本上有以下四个方面的原因:1. 在循环中执行了太多的操作解决这个问题的诀窍就是用下面这两个问题来评估每个循环:这个循环必须要同步执行么?循环里面的数据,必须要按顺序执行么?如果1和2都可以否定,那么建议使用setTimeout方式将循环体切分成小
2011/11/7 Comments:
Google Chrome 组发起开发的浏览器兼容性检测工具
浏览器兼容性检测工具(Chrome扩展)是由 Google Chrome 组发起的开源项目,能够自动检测网页中的兼容性问题。目前的版本一共检查了 28 个跨浏览器开发过程中可能会遇到的兼容性问题,其中包括文本渲染、表格、布局以及脚本等几个方面。所有已知的兼容性问题列表见 http://w3help.org/zh-cn/causes/ ,目前只实现了一部分,其它的还正在开发。欢迎有兴趣的网友一起参与。 安装:https://chrome.google.com/webstore/detail/fcillahbnhlpombgccogflhmgocfifma?hl=zh-CNhttp://w3help.org/tools/compatibility-detector.crx (不用翻墙) 开发站点
2011/11/4 Comments:
网站前端开发必装的20个firefox火狐插件
一般来说使用firefox火狐浏览器都会安装插件,而对于网站前端开发人员来说,使用火狐更多的是为了方便调试网站,CSS和JS等。所以这里我们专为前端开发这推荐以下的20个火狐插件,这些都可以帮助你提高工作效率:1-InspectorWidget在工具栏上添加按钮和菜单用来调用DOM查看器,查看chrome和元素。 2-Web Developer一个很实用的扩展,为Firefox添加一个含有不同web开发工具的菜单和工具条。 3-IE View右击在IE中查看当前页面,还可以标记某些特定页面总是用IE中打开。 4-TinyUrl Creator通过在浏览器中右键单击,用tinyurl为某些长url或链接创建缩略地址,方便在twitter和email传送。 5-EditCSS放在侧边栏里的样式表
2011/11/4 Comments:
Wordpress模板的文件结构图
>repath}articles/common/upload/2011/11/04/15226kj.gif" />HTML代码标签的基本规则:模板文件之间的重要性关系:下面的图像中列出了模板文件中最主要的几个文件,只是举个例子所以并没有把所有的文件列出,在后面我们会详细接触到其他的模板文件。>repath}articles/common/upload/2011/11/04/152048yc.gif" /> Wordpress 主题模板文件 主从关系位于最上顶部的index.php是最重要的文件,然后下面从左到右,重要性一次为single.php、page.php、archive.php、search.php、404.php。模板文件存在不同的重要性
2011/11/4 Comments:
data类型的Url格式--url(data:image/gif;base64,AAAA):把小数据

所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些小的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。data类型的Url格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持,IE不支持的东西太多了,也不差这一个。:(小例子下面这个html代码可以在支持data类型Url的浏览器中运行,例如Firefox。运行后会看到一条蓝色渐变底色的标题。<

2011/11/4 Comments: