web前端性能调优（转载）

第一条优化：减少http请求

　　一想到调优好多人都会想到减少http请求，但是可能好多人都会不知道具体操作，我一开始也不知道。项目刚好使用fis发现fis可以打包脚本和样式表。perfect！fis的打包非常简单，只要在fis-conf.js中设置:

fis.config.merge({pack : {'pkg/requirepkg.js':['/develop_workspace/appframe/kernel/jquery-1.8.3.js',"/develop_workspace/appframe/kernel/require.js","/develop_workspace/appframe/kernel/require-conf.js"],'/pkg/aio.css': '**.css'}});
fis.config.set('modules.postpackager', 'sfis-postpackager-simple');//插件是提供给纯前端应用的打包合并插件

js合并前

js合并后

css合并前

css合并后

从Time可以看出合并效果还是非常明显的。还有一些合并图片什么的方法，项目中使用小图标比较少，就没有具体去操作了。还有一方面是阅读代码查看自己的业务逻辑是否存在多调接口等等多余的http请求，这样也可以减少http请求。

第二条优化：添加expires头

在nginx的nginx.conf配置文件配置expires

location~ \.(gif|jpg|jpeg|png|bmp|ico)$ {expires 30d;}

添加expires头

第三条优化:压缩组件

fis自带压缩命令，非常好用，在要在fis release加上-o就可以了，压缩比达到50%-70%。你想象不到压缩就是这么简单。

压缩前

压缩后

Gzip

　　浏览器和服务器支持的话，可以使用Gzip压缩来减小响应的大小，浏览器可以使用accept-Enncoding头来声明它支持压缩，服务器使用content-Encoding头确认响应已经被压缩。我使用的是nginx服务器，其设置如下：

　　gzip on;//开启Gzipgzip_min_length  1k;//大于1K才压缩gzip_buffers  4 16k;//设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。4 16k代表以16k为单位，安装原始数据大小以16k为单位的4倍申请内存。gzip_http_version 1.0;//http版本gzip_comp_level 9;//压缩级别 1-10，数字越大压缩的越好gzip_types    application/javascript   text/plain application/x-javascript 　　text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;//压缩的类型gzip_vary on;//和http头有关系，加个vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩

Gzip

keep-alive

　　http构建在tcp之上，早期的http实现中，每个http请求都要打开一个socket连接，效率低下。保持持久连接的引入到解决了这一低效率的问题，使得浏览器可以在一个单独的连接上进行多个请求，浏览器和服务器使用connection头来指出对keep-alive的支持，在服务器的响应connection头看起来是一样的。

keepalive_timeout 65;

keep-alive

第四条优化：把css放顶部，把js放底部

　　把css放顶部也许有一些人会觉的影响DOM树加载，会导致页面加载慢。实际上把css样式表放在文档顶部-head中能够使页面加载更快。样式表放在头部会使页面逐渐呈现，样式表和DOM一起加载，可以避免页面重绘。把脚本放到底部，页面也会逐渐呈现，提高下载的并行度。

转载于:https://www.cnblogs.com/fanxiumin/p/6236468.html

web前端性能调优（转载）相关推荐

前端性能调优之Yahoo--23条
雅虎34黄金守则: -------------------- 1.尽量减少Http请求次数减少页面中的元素合并文件内联图像 2.减少DNS查找次数(和保持较高程度并行下载)的权衡减少主机名 3 ...
对 Web 应用程序进行性能调优
这是一位IBM专家对 Web 应用程序进行性能调优转载于:https://www.cnblogs.com/zwh-Seeking/articles/11059351.html
浅谈Nginx性能调优
女主宣言 Web服务性能调优是一项系统工程,涵盖许多方面,其中某一环节做的好并不能够保证整体性能好:但是如果某个环节做的不好,那么整体性能必然不会好. 可以调优的配置有很多,绝大多数情况下我们不需要追 ...
web移动端性能调优及16ms优化
本文只是一个索引,收集了网络上大部分关于调试及优化方面的文章,从中挑选了一些比较好的文章分享给大家. 移动端性能不及桌面浏览器性能的10分之1,特别是在android设备良莠不齐的情况下,性能显得尤为 ...
apache性能调优
2019独角兽企业重金招聘Python工程师标准>>> 一.总结前一天的学习在前两天的学习中我们知道.了解并掌握了Web Server结合App Server实现单向Https的这 ...
PHP 性能分析第三篇: 性能调优实战
注意:本文是我们的 PHP 性能分析系列的第三篇,点此阅读 PHP 性能分析第一篇: XHProf & XHGui 介绍 ,或 PHP 性能分析第二篇: 深入研究 XHGui. 在本系列的 ...
hive性能调优实战pdf_Nginx 性能调优实战
来自:Linux社区 1.Nginx运行工作进程数量 Nginx运行工作进程个数一般设置CPU的核心或者核心数x2.如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpui ...
j2ee性能调优之最小化资源压力测试法则
摘要:我提倡使用最小化资源的方式做一次压力测试,排除大部分浅显的应用问题.最小资源的意思,即在pc环境,使用应用可以运行的最小资源状态下,进行压力测试和性能问题侦测的工作. 前面看到有人讲j2ee的性 ...
建高性能ASP.NET站点第五章—性能调优综述（中篇）
构建高性能ASP.NET站点第五章-性能调优综述(中篇) 前言:本篇主要讲述用一些简单的工具来分析一些与站点性能有关的数据,在上一篇文章中,我们讨论了一下性能调优的一般过程,本篇就开始介绍一些方法和 ...

web前端性能调优（转载）

web前端性能调优（转载）相关推荐

最新文章

热门文章