减少http请求数,有三个好处,即减少DNS请求所耗费的时间.、减少服务器压力、减少http请求头,因此这是我们前端性能优化的一个关键点。 对于我们前端来说,减少http请求数的一个途径就是合并js和css文件,称为combo,也称打包,也就是通过将多个文件压缩合并成一个文件,并缓存在服务器,然后一次性传输到客户端。这样可以有效地减少网站中所有页面的http请求数。 经研究发现,Goo
前天一同事遇到个看似很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url"></a>在IE6下面没反应,不跳转到onclik事件中的"window.location.href"。 当时我们在网上找了
主要功能类简介 config.php 默认缩小应用程序的配置 index.php:为实施默认缩小的前端控制器请勿编辑!通过config.php和groupsConfig.php配置实用程序 Minify:缩小 - 联合收割机,minifies,和缓存的JavaScript和CSS文件需求 abstract class Mi
用户界面设计 用户界面设计 用户体验设计 用户体验设计在便池上放一个假苍蝇会导致男人撒尿的时候会不由自主地瞄准它,有证据表明,这样的用户体验可以减少80%的小便溅出便池。
前一阵,给我一个学生做培训,讲到一点点性能优化,然后我很后悔我误导了她.我给她讲减少http请求是多么重要,如何重要,为什么重要,还举了例子来说明这对于大型网站来说是多么重要,讲的头头是道,有理有据,最后把她说的服服帖帖,一切看起来理所当然.但是…. 事情没有那么简单,就像做技术一样,其实去了解一个技术很简单,但是要懂得如何运用这个技术就不是每个人都可以做到的了. 1.理所当然我
Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的
本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充。 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域,简单地理解就是因为J
今天要分享给大家的是一款用来压缩JS和CSS的工具—— TBCompressor。它是淘宝在著名的YUI compressor基础上改的,操作十分简单,也省去了繁琐的命令行操作。 *安装前请确定本机已经安装JDK环境,如果没有JDK环境,请前往官方网站下载Java SE Development Kit (JDK) JDK 6 Update ** 安装完成后须配
JavaScript文件的加载总是让人头疼的一件事情. 最近在从前端性能、SEO和可用性这些方面优化聚尚网,最开始的时候大家都发现网站首页刷新后需要等待一点点时间图片才会出来,让用户感觉图片的载入有明显的延迟,显然用户体验是不佳的。 网站首页因为图片比较多,大概有180张,因此用了jquery的一个延时加载的插件,具体的说,网站中幻灯片那一栏以下的图片都是通过lazyload这一j
产生错误的可能原因:采集到目标网站失败!失败原因可能是: 1、您的服务器是否禁用了 MSXML2.XMLHTTP 组件 2、检查您的网络链接是否正常 3、您的服务器是否安装了防火墙,并且关闭了有关端口。系统在采集时需要随机分配一个端口用于与对方服务器通信,如果关闭了这些端口,则会导致因为无法通信而采集失败。 4、如果其他网站能采集,而采集此网站时出现本提示,说明此网站的服务器安装了防火墙并
有人在Stack Overflow上发问,动手开发网站之前,需要知道哪些事情? 不出意料地,他得到了一大堆回答。 通常情况下,你需要把所有人的发言从头到尾读一遍。但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案。于是,就有了下面这篇文章,一共总结出六个方面共计61条"网站开发须知"。 我发现,这
webkit UI部分的绘制分为三块,首先是点线以及p_w_picpath的绘制 然后是空间的绘制,最后是窗口的绘制。 1. 点线以及p_w_picpath的绘制 webkit 点线以及p_w_picpath的绘制比较简单,webkitcore 抽象出一个GraphicsContext对象,该对象主要就是定义很多点线绘制的接口,然后平台给出具体的实现,p_w_pic
innerHTML是HTML5的一个标准属性,js用户既可以读也可以写,下面我们主要讲一下在设置innerHTML的时候,webkit中是如何实现该属性(具体的用法可以参照规范) 1. 写 首先Webkit中引入了一个数据结构叫DocumentFragment,翻译成中文是“文档片段”的意思,其实就是只一个非完整的html页面, 该数据结构的继承关系如下: 可以
1.webkit中每个html页面对应于一颗dom树 和render树,dom用于描述html页面的的信息,而render树则用于布局,具体负责dom树如何显示在屏幕上,从MVC的角度来说,可以将 render树看成是V,dom树看成是M,C则是具体的调度者,比HTMLDocumentParser等。webkit将这两部分分开,可以看出其设 计意图,同一个dom,可以对应不同的render,
一个网站,不管是从加载时所占带宽,还是服务器请求数量的角度来说,它所占的比例一般都是相当大的,如果图片处理不当,必将成为前端性能及SEO的一个瓶颈,导致带宽及硬件方面的投入也必将越来越多。 不多说,今天从前端性能和SEO的角度在优化聚尚网首页,就来分享几点图片优化的策略吧。 通过firebug,或者DynaTrace Ajax Edition都可以检测到,整个网站滚动条如果拉到底服
DOM 的各种事件为丰富的交互提供了可能,在现在的 web 应用程序中,事件处理程序越来越多,越来越复杂,页面中随处可见的事件监听已经司空见惯,但这引出了一个性能的问题,事件监听得越多,页面运行性能就越差。主要原因来自两个方面:1. 每添加一个事件监听,载入页面时都会增加一次对被监听节点的访问,这无疑增加了页面完全准备就绪所需的时间;2. 每一个事件监听函数都会占用内存,而 JavaScrip
经常听到“XX浏览器搭载了最新版页面渲染引擎,速度大幅提升”之类的报道,以前只知 道页面渲染引擎是浏览器的灵魂,IE、Firefox、Safari、Opera浏览器的渲染引擎各不相同。今天从《秦爱网志》ZT一篇介绍各种浏览器页 面渲染引擎的博文,很好很全面的那种 网页浏览器的页面渲染引擎负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计
没有什么比点击页面上的东西却什么也没发生更令人感到挫折了。这个问题又回到了原始网页交互程序和现在已无处不在的提交表单时弹出的“请勿重复提交”消息 上面。用户自然倾向于重复尝试这些不发生明显变化的动作,所以确保网页应用程序的响应速度也是一个重要的性能关注点。 &n
在javascript函数体内,标识符arguments具有特殊含义。它是调用对象的一个特殊属性,用来引用Arguments对象。Arugments对象就像数组,注意这里只是像并不是哈。 javascript函数体内,arguments像数组(并不是真的数组,是一个Arguments对象,再次强调)一样,有length属性,可以代表传给函数的参数的个数。 引用一个形式参数可以用参数名,也可以用
这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。 1-LOADING:加载程序进行中,但文件尚未开始解析。 2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。 3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。 4-C
网上很多解释,我无法理解,我想知道原理。。。这篇文章应该可以透彻一点 Query片段: view plaincopy to clipboardprint? (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })()
事件捕捉(Event Capture)的实现问题 IE的高级事件处理模型的问题 事件捕捉(Event Capture)的实现问题 首先在说这件事前,先感谢一下Realazy。 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整
前几天看dojo的文档,其中多次提到DOM2事件模型,以前学习这部分的内容,主要愤慨于IE的不兼容性了,现在对于DOM2事件模型的概念又有些模糊,所以翻出了JS权威指南(V4)又复习了一下,简单作一小结。 JS权威指南中将JS事件模型分为
本文是本人通过个人理解所写成的,没有参照任何资料,如有雷同,纯属巧合,同时,如果您要引用本文文字,请注明 — 作者:windy_sk;Email:seasonx@163.net,谢谢! 本文进通过实例,讲述通过 prototype 自定义方法的过程,旨在抛砖引玉,如果不对的地方,欢迎指正! prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,
一、什么是闭包? “官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。 相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的&ldq
一、什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);}
用了很久jQuery,到最近,等到自己想写一个链式库时才对它的内部架构学习了一下。下面就对jQuery框架设计模式的一些感想写一下: 首先是jQuery将自己所有的代码封装在一个闭包内;用闭包防止命名空间的变量污染,继续在本身闭包中初始化了一个名为jQuery的自动运行闭包函数; 形如: Js代码 (function(window,
在Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远 离你的用户们。可你是否知道,这些不同的浏览器究竟是如何判断,哪些脚本处于“失控”状态么?本文作者,就从Internet Explorer、Firefox、Safari、Chrome和Opera五种浏览器,分析了这个情况出现的原因。
在Web开发中,JavaScript的一个很重要的作用就是对DOM进行操作,可你知道么?对DOM的操作是非常昂贵的,因为这会导致浏览器执行 回流操作,而执行了过多的回流操作,你就会发现自己的网站变得越来越慢了,我们应该尽可能的减少DOM操作。本文是这个系列的最后一篇,给出了一些指导性 原则,比如在什么时候应该对DOM可以进行什么样的操作等。 【原文】Nicholas C. Zakas - Spe
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号