web前端优化

2024-04-27 15:17:59

字体：大中小

来源：转载

供稿：网友

前面讲了很多关于缓存清理和编码设置的整合，今天我们说说web性能优化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放在页面底部这样就不会阻塞页面渲染，让页面出现长时间的空白。具体参考：野马程序员：web性能优化另，其他具体详解：1、Web 前端优化最佳实践之内容篇2、Web 前端优化最佳实践之 Server 篇3、Web 前端优化最佳实践之 Cookie 篇4、Web 前端优化最佳实践之 CSS 篇5、Web 前端优化最佳实践之 JavaScript 篇6、Web 前端优化最佳实践之图象篇7、Web 前端优化最佳实践之 Mobile(iPhone) 篇如何提高网页效率的14条建议如何提高网页的效率（下篇）——Use YSlow to know why your web Slow二、服务器端优化这里就不详解了，直接看专栏吧Web项目开发性能优化解决方案——服务端

上一篇：如何上传base64图片到七牛云存储，然后返回图片url呢？？

下一篇：（11）AngularJS 1.X 之自定义服务

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注