web性能优化学习

web性能的黄金法则‘2-5-8’

2s内得到响应,会感觉系统速度很快,5s的到响应,系统速度还是很快的,8s系统速度比较慢,还能等待,8s以上,没法等了

在web优化上减少http请求是一方面

  • 减少http请求可以从 :

1.减少图片的请求数量,对于一个网站如果用到了很多的图片,可以使用css sprites(雪碧图) 把图片集中在一张图片上,这样可以压缩大小,也减少了请求数量,在使用的时候可以使用background-position 来进行处理。

2.使用iconfont,在一些使用icon图标的情况下,可以把icon的图片换成icon font 来减少图片的http请求,对于icon font,bootstrap中也有提供,还有

Font Awesome Icons 中也提供了

3.减少css js 文件的请求,我们可以把一些通用的内容放到一个文件中,把一些小文件合并成一个文件然后进行压缩处理来减少文件的大小,这样也是可以减少请求的。

4.使用data:URL 协议使你的页面直接包含图像(内联图片) 这样也可以减少http请求,但是内联图片也优缺点,它不可以进行缓存,而且只有在IE8以上使用

  • 优化页面

1.可以使用外联样式,减少使用内联样式以及嵌入样式,使用外联样式可以更好的进行优化,也可以动态修改,对于一些兼容IE浏览器的样式,可以单独写一个文件,而不是放在同一个样式表中,这样的好处是当项目不需要兼容的时候可以更好的去除

2.同样也使用外部脚本,而不是把脚本放到任何地方

3.样式要放置在head标签中,而脚本文件要放到body的底部。因为脚本文件会阻塞加载,样式文件放在head标签中会减少页面呈现的时间,因为在加载文件的同时,也会对页面进行渲染,对于js文件中也要尽量减少直接对标签进行处理,如果要改变样式,可以通过加入className,或是删除className进行处理

  • 压缩文件

可以压缩js,css及html文件 文件来减小文件的大小,从而减小http请求的大小

时间: 2024-10-20 03:30:09

web性能优化学习的相关文章

Web应用程序性能优化学习笔记

Web应用程序性能优化学习笔记 1. 使用瀑布图初步诊断网站性能瓶颈 一般来说,打开一个网页的速度会受到以下几项的影响: 1) 服务器花了太长的时间将.aspx页面的内容转化为html. 2) .aspx页面花了太长的时间从服务器端将内容发送到客户端. 3) 页面上的图片或者flash文件花了太长的时间从服务器端发送到客户端. 4) JavaScript和CSS文件阻塞页面渲染. 我们可以使用“瀑布图”来确定一个页面的性能问题是由于哪一项造成的.FireBug.Chrome自带的“开发人员工具”

Web性能优化系列

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

性能魔方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子域名