高性能网站建设和优化

                      高性能网站建设和优化

在前端中,性能优化就是优化用户体验,减少响应速度以助于提高网页整体的加载速度,提高性能在建设高性能页面中不可缺少的一部分。

改进性能分为从前端改进和后台改进。 可以说前端是改进编辑页面的一些细节,在建设页面编辑代码是就注意性能的优化,然后集少成多 ,响应和加载时间通过逐步的减少,到达性能的改进, 而且在前端优化中需要的时间和资源都较少。 而要从后台入手改进性能,就相对来说复杂,也会带来很多的改动。

前端

作为前端开发人员,就要把性能优化的重点放在前端优化中。在代码编辑中考虑到性能的方法, 在建设完成后,使用工具在对文件进行压缩,合并还有对图片的合并。各种从前端中改进性能的方法如下:

1 减少HTTP协议

页面响应中花费在HTTP的请求上占很大一部分时间,因此要改善响应时间,我们需要减少HTTP协议, 主要方法就是减少组件的数量。

合并脚本和样式表

并且对脚本和样式表都使用外联的方法 。

css放在顶部,js放在底部

使用部分延迟加载的方法

减少使用flash,使用css动画进行代替

2 图片的优化

1)图片进行合并,从而减少图片的数量减少对图片组件上的HTTP协议。

2)降低图片的质量,并不是一味追求图片的质料使用很大的图片

3)使用恰当的格式

4)采用图片Base64编码

5)减少回流的css样式设置(通过改变class样式来代替直接改变css属性),从而减少回流的次数

3进行缓存

在进行很多HTTP请求时,通过使用一个长久的Expires头,使这些组件可以被缓存,从而减少HTTP请求数量。

HTTP1.0版本下 :

使用expires=缓存时间

HTTP1.1版本下:

引入了Cache-Control头来克服Expires头的限制,Cache-Control以秒为单位

如Cache-Control:max-age=缓存时间;  no-Cache则是无缓存时间;

4 代码优化

1:Css代码优化:

避免使用css表达式,在对css代码优化中,我们需要考虑到的是:

在引用外部css文件时,避免使用@import导入css; 避免使用滤镜(filter);css

选择器的选择也可以改进优化:1)匹配的规则越少越好(使用id和class选择器达到效果)。 2)减少使用选择器。 3)减少使用都带选择器。

在对样式进行设置时,避免重复,多利用css中可以继承的属性。

2:Js代码优化:

在对javaScript部署过程中应该更加精简。 在精简的过程中,移除了不必要的空白,换行和制表符。这样达到文件大小被减少,从而改善时间效率。

具体方法:

让代码实现中使用多线程,例如使用定时器(setTimeout,setInterval)、使用webwork技术。

在内存管理中,使用delet删除不用的对象、从Dom节点中用removeChild删除不必要的节点.

Dom的优化,

尽量使用appendChild添加节点(不影响其它节点)

使用jQuery的append方法

批量操作Dom

使用innerHtml 开发小,速度快,同时让内存更加安全。

循环添加节点,应该采用临时变量存放,在添加。

删除Dom节点

删除节点前要先删除事件再删除节点,否则节点所占内存不会释放。

为节点添加事件

尽可能为父元素注册事件,由于浏览器有事件冒泡行为,因此就不需要为每个子元素添加

5 减少DNS查找

DNS缓存和TTL: DNS查找可以被缓存起来以提高性能。避免使用短的TTL值(建议值为一天!)

减少DNS查找:通过是用Keep-Alive和较少的域名来减少DNS查找。

时间: 2024-10-21 21:16:10

高性能网站建设和优化的相关文章

前端性能优化规则总结—读《高性能网站建设指南》

本文对<高性能网站建设指南>这本书中提出的14种基本的前端性能优化方案进行了总结,这本书介绍的优化方案比较过时了,不能完全满足目前前端性能优化,如果您浏览完能弄清楚每种方案的实施过程.就没必要看这本书了. 规则1-减少HTTP请求 1.使用图片地图 图片地图允许你在一个图片上关联多个URL,目标URL的选择取决于用户点击了图片上的哪个位置. 比如导航栏菜单有五个选项,为了美观,我们将菜单对应的超链接关联到图片上,可以使用五个分开的图片分别关联五个分开的超链接,此时加载这个导航菜单就要通过五次H

高性能网站建设进阶指南:Web开发者性能优化最佳实践 pdf扫描版

高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中,Souders与8位专家分享了提升网站性能的最佳实践和实用建议,主要包括:理解Ajax性能,编写高效的JavaScript,创建快速响应的应用程序.无阻塞加载脚本, 跨域共享资源,无损压缩图片大小,使用块编码加快网页渲染:避免或取代iframe的方法,简化CSS选择符,以及其他技术.性能是任何一个网站成功的关

高性能网站建设

压缩 浏览器使用Accept-Encoding头来生命它支持压缩. 服务器使用content-Encoding头确认响应已被压缩. 持久连接 request:      Connection:keep-alive response:    Connection:keep-alive 图片优化 1.使用图片地图,将多个图片整合到一张图片上   <map> 2.CSS Sprites   多张图片合并为一张,使用时,通过位置制定 合并后大小比单个图片总和还小,并且减少http请求 3.内联图片 d

高性能网站建设指南pdf

下载地址:网盘下载 内容简介  · · · · · · 本书结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状.产生的原因,以及改善或解决性能问题的原则.技术技巧和最佳实践.重点关注网页的行为特征,阐释优化Ajax.CSS.JavaScript.Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面.在<高性能网站建设指南>中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持.<高性能网站建设指南>内容丰富,主要包

如何选择一个更有利于网站建设与优化的主机

主机对网站优化的影响是显而易见的,一方面是体现在主机的性能好不好,会不会经常死机.访问速度快不快.打开一个网页需要多久.是不是支持对网站日志的读 写.支不支持URL重写操作:另一方面,体现在主机以往的履历,该主机上,其他网站是什么类型的,有没有包含被禁止的内容,出现在网站上,主机上被惩罚的 网站多不多等等.下面就来具体分析一下,建立网站,应该选择什么样的主机.一个完美的主机,对网站排名的重要性. 选择怎么样的主机? 要点一.主机的IP或者整个服务器是否有被惩罚过 分析:一个IP或者整个服务器上所

读书笔记-高性能网站建设指南(2007)

人的思维往往会进入一种误区,认为"后面的","背后的"东西都是神秘的,伟大的影响力非凡的.所以很多书以"某某内幕"为题,很多程序猿以精通"底层开发"或"后端开发"为荣:同样的当网站出现问题时,我们第一时间想到的也是如何优化"后端".但这并不一定就是正确的,也许从前端入手,改善性能,将事半功倍. 绪言A:前端性能的重要性 在请求脚本时不会发生并行请求.这是因为在多数情况下,浏览器在下载脚本

《高性能网站建设指南》笔记

目录: 绪言A: 至少有80%的时间花在了显示Web页面上,并且这些时间是花在html文档下载完毕后发生的. 14条规则: 规则1: 减少http请求 方法: 1. 图片地图(Image Map):在一个图片上关联多个url,目标url的选择取决于用户点击了图片上的哪个位置. 图片地图有两种类型:服务器端图片地图(将所有点击提交到同一个目标url,向其传递用户点击的x,y坐标.Web应用程序将该x,y坐标映射为适当的操作)和客户端图片地图(将用户的点击映射到一个操作).映射通过html的map标

高性能网站建设指南

规则1——减少HTTP请求 只有10%到20%的最终用户响应时间花在接收请求的HTML文档上面.剩下80%到90%的 时间花在为HTML文档所引用的所有组件(图片,脚本,flash,样式表等)进行的HTTP请求上.因此改善响应的最简单途径就是减少组件数量,由此减少HTTP请求的数量. 图片地图 使用map标签进行坐标定位,减少图片数量.导航栏中使用了多个图片时候可以使用. 缺点很多:手工方式很难完成坐标定位,且容易出错.除了矩形之外也难以定义其他形状,通过DHTML定义的图片IE中还无法工作.不

高性能网站建设进阶指南(一)

WEB性能提升的14条规则: 1.尽量减少HTTP请求(使用css sprites): 2.使用CDN; 3.添加Expires头: 4.添加Gzip压缩组件: 5.将样式表放在顶部: 6.避免CSS表达式,使用外部的js和css,并精简JS,删除重复的脚本: 7.减少DNS查询: 8.避免重定向: 9.配置ETag: 10.使ajax可缓存: 第一章    理解ajax性能 1.权衡:但是在97%的情况下,过早优化是万恶之源,但我们不应该错过那关键的3%.现实情况的项目三角形(项目管理的三角形