前端优化规则小汇总

(1)    Minimize HTTP Requests 减少HTTP请求

尽可能的减少图片、CSS、Script、Flash等元素的数量,这样可以减少http请求数,进而减少响应时间。将多个JS、CSS文件合并为一个文件,页面图片写进CSS里,并通过CSS sprites技术对页面图片进行处理。

(2)    Make Ajax Cacheable 缓存Ajax

在浏览器接收到新的数据前,为了提高响应效率,将实时响应的Ajax数据进行缓存。

(3)    Post-load Components 延迟加载组件

在进行页面初始化时,先加载必须的组件,然后再加载其他,YUI Get utility是包含JS和 CSS的便捷方法,YUI Image Loader可以帮助推迟加载折叠部分的图片。

(4)    Preload components 预加载组件

当用户要访问下一个页面时,使用预加载在浏览器空闲时请求用到的页面内容(如图像、样式表和脚本),可以大大改善访问速度。

(5)    Reduce the Number of DOM Elements 减少DOM元素数量

合理高效的使用标签来架构页面,因为复杂的页面结构意味着更长的下载及响应时间。

(6)    Use a Content Delivery Network 利用CDN技术

内容分发网络(Content Delivery Network,CDN)是由一系列分散到各个不同地理位置上的Web服务器组成的,这些服务器主要是根据用户在网络上的靠近程度来指定的,它提高了网站内容的传输速度。

(7)    Gzip Components Gzip压缩

几乎所有的浏览器都有解压Gzip格式的能力,通过Gzip压缩HTTP响应可以减少文件体积,节省HTTP响应时间,从而增加用户体验。

(8)    Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。

(9)    Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式。

(10)Make JavaScript and CSS External 将JS和CSS外链

因为JavaScript和CSS文件都能在浏览器中产生缓存,所以在实际应用中使用外部文件可以提高页面速度。

(11)Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。

时间: 2024-12-07 19:13:15

前端优化规则小汇总的相关文章

Yahoo前端优化性能规则

1.减少HTTP请求次数 据统计,有80%的最终用户响应时间是花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等的下载上,减少页面元素将会减少HTTP请求次数,这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页面设计,但是否存在其他方式,能做到既有丰富内容,又能获得快速响应时间呢?以下是这样一些技术: Image maps组合多个图片到一张图片中,总文件大小变化不大,但减少了HTTP请求次数从而加快了页面显示速度(具体可查看马海祥博客<提高网站速度

web 前端优化-戈多编程

大家好,我是戈多,从事web开发工作接近三年了,今天来归纳下web前端优化的解决方案(码农搬砖工,来自各网络汇总) 1.减少Http请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那么问题就更多了.且如果网页中的图片.css文件.js文件很多甚至有音乐文件时,这势必会造成负担. (1)图片地图 即多个图片排成一行作为链接到其他页面的按钮,我们当然可以使用五福图片,发送5个http请求,但是这是不合适的. 我们可以选择使用图片地图,即只用一张图片,然后使用<map>属性通过控制

前端优化带来的思考,浅谈前端工程化

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

从代码方面来探讨前端优化的方法

< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd> 从代码方面来探讨前端优化的方法:1.减少http请求数图片,css,script,flash,等等这些都会增加http请求数,减少这些元素的数量能减少响应时间.CSS Sprites技术能减少图片的请求数,把零散的小图片放到一起,运用background-position来改变背景图片的位置,前提是html元

移动平台3G手机网站前端开发布局技巧汇总

移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程

Web 前端优化最佳实践

面向内容的优化规则目前有 10 条. 1. 尽量减少HTTP请求 (Make FewerHTTPRequests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少HTTP请求: 1) 合并文件,比如把多个CSS文件合成一个: 2) CSSSprites 利用CSSbackground 相关元素进行背景图绝对定位:参见:CSS Sprites: Image Slicing’s Kiss of De

网页前端优化

网站前端优化 主要是给学生介绍了这几个规则. 第一:减少HTTP请求 1: 将超链接关联到图片上,例如在导航栏按钮中.如果是以这种形式关联多个带有超链接的图片,使用图片地图这种方式既能减少HTTP请求,有无需改变页面外观感受.图片地图允许在一个图片上关联多个URL. 2: CSS Sprites 和图片地图一样,CSS Sprites也可以合并图片,但是更加灵活,可以将多个图片合并到一个单独的图片中. 3:合并脚本和样式表 我们在使用Javascript和CSS时,到底是进行"内联"(

前端优化带来的思考,浅谈前端工程化【转】

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

网站前端优化

网站前端优化 第一:减少HTTP请求 1: 将超链接关联到图片上,例如在导航栏按钮中.如果是以这种形式关联多个带有超链接的图片,使用图片地图这种方式既能减少HTTP请求,有无需改变页面外观感受.图片地图允许在一个图片上关联多个URL. 2: CSS Sprites 和图片地图一样,CSS Sprites也可以合并图片,但是更加灵活,可以将多个图片合并到一个单独的图片中. 3:合并脚本和样式表 我们在使用Javascript和CSS时,到底是进行“内联”(也就是将其嵌套在HTML文档中)还是将其放