当前位置: 首页 > Web前端 > HTML

WEB前端性能优化常用方法

时间:2023-04-03 00:59:44 HTML

Web前端是应用服务器处理之前的部分。前端主要包括HTML、CSS、javascript、图片等各种资源,针对不同的资源有不同的优化方式。内容优化(1)减少HTTP请求次数:这个策略最重要也是最有效的,因为一个完整的请求需要经过DNS处理,与服务器建立连接,发送数据,等待服务器响应,并接收数据。这样一个耗时成本和资源成本复杂的过程。常用方法:合并多个CSS文件和js文件,使用CSSSprites整合图片,InlineImages(使用data:URLscheme在实际页面中嵌入图片数据),合理设置HTTP缓存等。(2)减少DNS查找(3)避免重定向(4)使用Ajax缓存(5)延迟加载组件、预加载组件(6)减少DOM元素数量:页面中存在大量的DOM元素,会导致javascript遍历效率低下DOM变慢。(7)尽量减少iframe的数量:iframe提供了一种将一个网站的内容嵌入到另一个网站的简便方法。但它的创建速度比其他DOM元素(包括JavaScript和CSS)的创建速度慢1-2个数量级。(8)避免404:HTTP请求时间消耗非常大,所以用HTTP请求得到一个无用的响应(比如404找不到页面)是完全没必要的,只会降低用户体验,没有一点好处。服务器优化(1)使用内容分发网络(CDN):将网站内容分发到不同地理位置的多台服务器上,可以加快下载速度。(2)GZIP压缩(3)设置ETag:ETags(Entitytags,实体标签)是web服务器和浏览器用来判断浏览器缓存中的内容是否与服务器中的原始内容相匹配的一种机制。(4)提前刷新缓冲区(5)Ajax请求使用GET方法(6)避免空图片srcCookie优化(1)减小cookie大小(2)对web组件使用域无关的CookieCSS优化(1)转换CSScode放在HTML页面顶部(2)避免使用CSS表达式(3)使用代替@import(4)避免使用Filtersjavascript优化(1)将JavaScript脚本放在页面底部。(2)将JavaScript和CSS作为外部文件引用:在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都可以缓存在浏览器中。(3)尽量减少JavaScript和CSS(4)删除重复的脚本(5)尽量减少DOM访问:使用JavaScript访问DOM元素比较慢。(6)开发智能事件处理程序(7)Javascript代码注意:谨慎使用with,避免使用evalFunction函数,减少作用域链搜索。图片优化(1)优化图片大小(2)通过CSSSprites优化图片(3)不要在HTML中使用缩放图片(4)favicon.ico应该小且可缓存。参考资料:http://developer.yahoo.com/pe...