高性能网站建设和优化
在前端中,性能优化就是优化用户体验,减少响应速度以助于提高网页整体的加载速度,提高性能在建设高性能页面中不可缺少的一部分。
改进性能分为从前端改进和后台改进。 可以说前端是改进编辑页面的一些细节,在建设页面编辑代码是就注意性能的优化,然后集少成多 ,响应和加载时间通过逐步的减少,到达性能的改进, 而且在前端优化中需要的时间和资源都较少。 而要从后台入手改进性能,就相对来说复杂,也会带来很多的改动。
前端
作为前端开发人员,就要把性能优化的重点放在前端优化中。在代码编辑中考虑到性能的方法, 在建设完成后,使用工具在对文件进行压缩,合并还有对图片的合并。各种从前端中改进性能的方法如下:
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查找。