web项目性能优化(整理)

1、压缩源码和图片
JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色、去掉一些PNG格式信息等。

2、选择合适的图片格式
如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格式。

3、合并静态资源
包括CSS、JavaScript和小图片,减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

4、开启服务器端的Gzip压缩
这对文本资源非常有效,对图片资源则没那么大的压缩比率。

5、使用CDN
或者一些公开库使用第三方提供的静态资源地址(比如jQuery、normalize.css)。一方面增加并发下载量,另一方面能够和其他网站共享缓存。

6、延长静态资源缓存时间
这样,频繁访问网站的访客就能够更快地访问。不过,这里要通过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。

7、把CSS放在页面头部,把JavaScript放在页面底部
这样就不会阻塞页面渲染,让页面出现长时间的空白。

来者若有新的优化技能,请别吝啬,留下你宝贵的见解。

原文地址:https://www.cnblogs.com/ZXH-null/p/12160702.html

时间: 2024-10-02 00:07:06

web项目性能优化(整理)的相关文章

web网站性能优化整理

.tab { width: 600px; table-layout: fixed; border-collapse: collapse } .tab th,.tab td { text-align: center; border: 1px solid #ddd !important; line-height: 40px; color: #FFFF83 !important; background-color: #282c34 !important } ul.code { background-c

Web 前端性能优化相关内容解析

Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对照着去优化自己的网站或者相关项目.本文由Jeff 整理. 0.提高服务器的响应速度 砸钱的东西,但却最根本:搞好这一项,甚比下面任何一项. 1.优化样式表和脚本的排列顺序 正确地排列外部样式表与外部和内嵌脚本的顺序,可增加下载时同时加载的数据量,并提高浏览器显示网页的速度. 将样式表放在顶部,将脚本放在底部

Web 前端性能优化相关内容解析[转]

Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对照着去优化自己的网站或者相关项目.本文由Jeff 整理. 0.提高服务器的响应速度 砸钱的东西,但却最根本:搞好这一项,甚比下面任何一项. 1.优化样式表和脚本的排列顺序 正确地排列外部样式表与外部和内嵌脚本的顺序,可增加下载时同时加载的数据量,并提高浏览器显示网页的速度. 将样式表放在顶部,将脚本放在底部

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将

Web服务器性能优化

Web 服务器性能与站点访问性能优化思路 要优化 Web 服务器的性能,我们先来看看 Web 服务器在 web 页面处理上的步骤:1.Web 浏览器向一个特定的服务器发出 Web 页面请求;2.Web 服务器接收到 web 页面请求后,寻找所请求的 web 页面,并将所请求的 Web 页面传送给 Web 浏览器;3.Web 浏览器接收到所请求的 web 页面内容,并将它显示出来. 上面三个步骤都关系 Web 服务器,但实际 Web 服务器性能相关最大的是在第 2 步,这里 Web 服务器需要寻找

Web 前端性能优化【转】

Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端优化最佳实践之 内容篇Web 前端优化最佳实践之 Server 篇Web 前端优化最佳实践之 Cookie 篇Web 前端优化最佳实践之 CSS 篇Web 前端优化最佳实践之 JavaScript 篇Web 前端优化最佳实践之 图象篇Web 前端优化最佳实践之 Mobile(iPhone) 篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作

WEB前端性能优化小结

1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时

Web前端性能优化全攻略[转载]

1. 尽量减少  ">HTTP 请求 (Make Fewer  ">HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少  ">HTTP 请求: 1) 合并文件,比如把多个  ">CSS 文件合成一个: 2)  ">CSS Sprites 利用  ">CSS background 相关元

Web前端性能优化全攻略

网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则