WEB性能优化

  虽然,前端页面的代码重复使用或者不用优化,相对整个网站的加载影响都不大。虽然大部分优化主要是在后台数据。但是前端页面代码能优化好也能减少页面的一定的加载时间。

  下面谈谈我个人对前端页面优化中的关于图片一些浅薄的理解。

  一:图片的合并 压缩

  页面大部分图片可以做成一张然后用用坐标取出来,这样页面加载的时候就只用加载一张图片可以。

  减少图片数
  降低图像质量

  比如淘宝买家的详情页面基本都是图片拼成的,如果图片质量过高,现在很多手机端买家 一般在外面 都是用流量这样太耗流量、而且有的时候加载慢。像有的买家 感觉等待时间稍微长一点就 换别家了。

  二:尽量减少flash,使用css动画 css3 的动画效果。

  三:图片Base64编码

    有一种图片工具 Base64 很多 人都在用

  四:如果图片过大,最好不要一整张图片放到页面上、最好切片拼接起来。

  

时间: 2024-08-03 10:42:00

WEB性能优化的相关文章

移动web性能优化笔记

移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

web性能优化--总体总结。

web性能优化: 1,从http方面考虑:我们应该尽量减少http请求数量,因为前后端通信的成本很大,请求一个100k的文件和请求两个50k的文件的时间是相差很多的.那么我们应该怎么做呐?                 (1),合并js,css,减少请求的数量.使得性能提升 (2),使用雪碧图将背景图片合并成一个文件. 2,从代码需求来分析 (1),非核心的代码延迟来进行加载或者动态进行加载,将公共代码就行抽离,使用cdn存储静态的资源,在浏览器进行缓存资源. 总结的不全,希望以后可以一直总结

关于 Web 性能优化

压缩源码和图片 JavaScript 文件源代码可以采用混淆压缩的方式,CSS 文件源代码进行普通压缩,JPG 图片可以根据具体质量来压缩为 50% 到 70%,PNG 可以使用一些开源压缩软件来压缩,比如 24 色变成 8 色.去掉一些 PNG 格式信息等. 选择合适的图片格式 如果图片颜色数较多就使用 JPG 格式,如果图片颜色数较少就使用 PNG 格式,如果能够通过服务器端判断浏览器支持 WebP,那么就使用 WebP 格式和 SVG 格式. 合并静态资源 包括 CSS.JavaScrip

Web性能优化系列

web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 本系列参考了大量互联网资料.Pro HTML5 Performance.web性能权威指南等 通过自己实践.重新组织.主要用于学习交流. web性能优化目录  浏览器渲染过程

性能魔方mmTrix推出基于云的web性能优化服务

性能魔方,新一代云应用性能管理服务商,今天宣布推出基于云的web性能优化服务,帮助客户优化网站速度,提高用户体验,以获得更好的用户转化率和收入. 性能魔方团队有着丰富的行业经验和卓越的前瞻思想,并充分利用云计算技术,使网络更快."我们有信心,我们的网站性能监测和网站速度优化服务将迅速为网站带来好处和价值,这些价值包括更好的用户体验和更高的投资回报率"CEO蒲炜说. 测试你的网站性能,分析与行业基准或者竞争对手的差距,请访问www.mmtrix.com,这是免费的,而且使用简单. 关于性

web 性能优化指南阅读笔记

1.关于拥塞预防算法 PRR-比例降速,RFC6937 规定的一个新算法,其目标是改进丢包后的恢复速度,谷歌测量结果:该算法改进丢包造成的平均连接延迟减少了3%-10%.PRR是linux 3.2+内核默认的用赛预防算法. 2.关于拥塞窗口 把服务器的初始CWND值增大到RFC 6928新规定的10段,是提升用户体验以及所有TCP 应用性能的最简单方式.Linux上,IW10是2.6.39以上版本内核的新默认值. web 性能优化指南阅读笔记

Web性能优化 高并发网站解决 单例

Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等. 2.选择合适的图片格式如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格

【web性能优化】DNS解析与ip

DNS解析与ip url   统一资源定位符  它或许指定的是一个文件资源 或许是一个方法(比如接口) 为什么看到的网站会动呢  是因为浏览器可以解析html DNS 解析 ip地址 http权威指南 js引擎 301    302 域名服务器  ip服务器 cookie  是否合法 .cn   .org .gov     最高级域名 www.baidu.com news.baidu.com. 从右向左解析域名  先解析的是. 是公网(最外层域名)的意思  再解析.com  然后baidu子域名

Web性能优化:What? Why? How?

转:http://www.cnblogs.com/dojo-lzz/p/4591446.html 为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据著名的`2-5-8`原则: 当用户在2秒以内得到响应,会感觉系统的响应非常快 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以 当用户在5-8秒之内得到响应,会感觉系统的响应非常慢,但还可以接受

Web性能优化:图片优化

程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片.从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择.到尚未被