网站前台性能优化教程

之前一系列博文介绍了网站后台的数据库性能优化,其实前端的优化也是很重要的。在数据库范文速度提升上去的时候,仍然会出现页面加载缓慢的现象,此时,就需要对于网站的前端代码进行优化。

关于前端性能优化的教程不多,好不容易找到了一本教材,《高性能网站建设指南》,下面以此书的内容为主线,讲解一下前端性能优化的方法。

一、           减少http请求

这是提高前端性能的一个重要原则。

能少一次请求就少一次。

1.      使用图片地图

我们知道,一个img标签会向服务器发起一次请求获取图片,那么如果把多个图片合成一张图片,就可以将多次请求变成一次请求了,这就是图片地图。

图片地图通过用户点击的位置不同而相应不同的事件,这样就会使得前台代码变得较复杂,难以看懂,个人觉得不太可行。

2.      合并JavaScript和Css文件

一个script标签或者link标签也会向服务器发起一次请求,所以必须减少页面中引用外部文件的次数。一般来说,一个页面配一个JS和一个CSS。

3.      避免重定向

重定向也会发出Http请求。

二、           使用内容发布网络

该系统会自动选取与用户最近的服务器。

三、           使用缓存

1.      指定Expire头

给组件使用Expire指定使用缓存

也可以使用Cache-Control:max-age=315360000代替

2.      使用外置的Js和Css文件

内置的js和css通常不会被缓存。

四、           压缩组件

将代码进行精简。有其是Js代码

主要方法有,将空格删除,将较长变量名用v_1、v_2之类代替

工具:gzip

五、           将CSS文件放在顶部

这样可以使得页面逐步加载呈现,增强用户体验,防止白屏。

六、           将JavaScript文件放在底部

防止下载脚本阻塞了页面显示。

JavDroider‘s Blog   欢迎批评建议~~

时间: 2024-10-09 04:40:00

网站前台性能优化教程的相关文章

雅虎网站页面性能优化的34条黄金守则(转)

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

雅虎网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件

网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

mysql性能优化教程(转)

Mysql 性能优化教程 目录 目录 背景及目标 Mysql 执行优化 认识数据索引 为什么使用数据索引能提高效率 如何理解数据索引的结构 如何理解影响结果集 理解执行状态 常见分析手段 分析流程 总结 Mysql 运维优化 存储引擎类型 内存使用考量 性能与安全性考量 存储压力优化 运维监控体系 Mysql 架构优化 架构优化目标 防止单点隐患 方便系统扩容 安全可控,成本可控 分布式方案 分库&拆表方案 主从架构 故障转移处理 缓存方案 缓存结合数据库的读取 缓存结合数据库的写入      

雅虎网站页面性能优化的34条黄金守则(转载)

老是有人问我 关于优化问题我就每次和他们说雅虎性能优化(有些人不会百度 汗..于是我转载过来啊 不是自己写的 不会因为版权被人家打吧!) 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰

网站前段性能优化总结

网站前端性能优化总结 作者: wireless_tech  发布时间: 2011-09-16 20:07  阅读: 2496 次  推荐: 0   原文链接   [收藏] 一.服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头  某些经常使用到.并且不会经常做改动的图片(banner.logo等等).静态文件(登录首页.说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性.如果有缓存,文档就可以从缓存(

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

HTML5前端(移动端网站)性能优化指南

HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上. HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求.执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技

网站 之 性能优化

一.什么是性能 有人说性能就是访问速度快慢,这是最直观的说法,也是用户的真实体验.一个用户从输入网址到按下回车键,看到网页的快慢,这就是性能.对于我们来说,需要去挖掘这个过程,因为这决定我们怎么去做性能优化. 二.交互的过程 用户访问网站的整个流程:用户输入网站域名,通过DNS解析,找到目标服务器IP,请求数据经互联网达到目标服务器,目标服务器收到请求数据,进行处理(执行程序.访问数据库.文件服务器等).处理完成,将响应数据又经互联网返回给用户浏览器,浏览器得到结果进行计算渲染显示给用户. 我们