新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。

第一篇:HTTP服务器

因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,swf)

提到单独的服务器,用更加快速的HTTP服务器,这里选择了nginx了,nginx相比apache,更加轻量级,

配置更加简单,而且nginx不仅仅是高性能的HTTP服务器,还是高性能的反向代理服务器。

目前很多大型网站都使用了nginx,新浪、网易、QQ等都使用了nginx,说明nginx的稳定性和性能还是非常不错的。

1. nginx 安装(linux)

http://nginx.org/en/download.html 下载最新稳定版本

根据自己需要的功能先下载对应模板,这里下载了下面几个模块:

openssl-0.9.8l,zlib-1.2.3,pcre-8.00

编译安装nginx:

./configure

--without-http_rewrite_module

--with-http_ssl_module

--with-openssl=../../lib/openssl-0.9.8l

--with-zlib=../../lib/zlib-1.2.3

--with-pcre=../../lib/pcre-8.00

--prefix=/usr/local/nginx

make

make install

2、nginx处理静态资源的配置

#启动GZIP压缩CSS和JS

gzip  on;

# 压缩级别 1-9,默认是1,级别越高压缩率越大,当然压缩时间也就越长

gzip_comp_level 4;

# 压缩类型

gzip_types text/css application/x-javascript;

# 定义静态资源访问的服务,对应的域名:res.abc.com

server {

listen       80;

server_name  res.abc.com;

# 开启服务器读取文件的缓存,

open_file_cache max=200 inactive=2h;

open_file_cache_valid 3h;

open_file_cache_errors off;

charset utf-8;

# 判断如果是图片或swf,客户端缓存5天

location ~* ^.+.(ico|gif|bmp|jpg|jpeg|png|swf)$ {

root   /usr/local/resource/;

access_log off;

index  index.html index.htm;

expires 5d;

}

# 因JS,CSS改动比较频繁,客户端缓存8小时

location ~* ^.+.(js|css)$ {

root   /usr/local/resource/;

access_log off;

index  index.html index.htm;

expires 8h;

}

# 其他静态资源

location / {

root   /usr/local/resource;

access_log off;

expires 8h;

}

}

3、nginx 反向代理设置

# 反向代理服务,绑定域名www.abc.com

server {

listen       80;

server_name  www.abc.com;

charset utf-8;

# BBS使用Discuz!

# 因反向代理为了提高性能,一部分http头部信息不会转发给后台的服务器,

# 使用proxy_pass_header 和 proxy_set_header 把有需要的http头部信息转发给后台服务器

location ^~ /bbs/ {

root   html;

access_log off;

index index.php;

# 转发host的信息,如果不设置host,在后台使用request.getServerName()取到的域名不是www.abc.com,而是127.0.0.1

proxy_set_header Host $host;

# 因Discuz! 为了安全,需要获取客户端User-Agent来判断每次POST数据是否跟第一次请求来自同1个浏览器,

# 如果不转发User-Agent,Discuz! 提交数据就会报"您的请求来路不正确,无法提交"的错误

proxy_pass_header User-Agent;

proxy_pass http://127.0.0.1:8081;

}

# 其他请求转发给tomcat

location / {

root   html;

access_log off;

index index.jsp;

proxy_pass http://127.0.0.1:8080;

}

error_page   500 502 503 504  /50x.html;

location = /50x.html {

root   html;

}

}

nginx详细配置参考:http://wiki.nginx.org/

PS:如果安装提示GCC not found,运行下面命令安装就可以(apt-get install build-essential),仅限debian

新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。,布布扣,bubuko.com

时间: 2024-08-02 06:52:01

新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。的相关文章

中国信息价产品经理日志(3)- 接手新产品首先要做的是什么?

今年我做的是建筑材料的信息价和市场价相关的产品,做这种数据类产品其实并不是第一次了.在09-11年的时候,我在定额项目组呆过,当时担任架构师一职,负责产品的技术架构开发和研发人员的培养,当然认识我的人也知道,那时候我也引入了Scrum敏捷开发方法以及TOGAF企业架构方法.但是当时的我并没有完整的产品开发体系,所以这样来说的话,现在的产品可以说得上是我做的第一个信息数据类的产品. 那我现在会如何去做呢?在这个系列我会首次记录我工作的内容与大家分享点滴,希望开放产品开发方法能帮助更多产品经理和团队

大数据技术之_05_Hadoop学习_04_MapReduce_Hadoop企业优化(重中之重)+HDFS小文件优化方法+MapReduce扩展案例+倒排索引案例(多job串联)+TopN案例+找博客共同粉丝案例+常见错误及解决方案

第6章 Hadoop企业优化(重中之重)6.1 MapReduce 跑的慢的原因6.2 MapReduce优化方法6.2.1 数据输入6.2.2 Map阶段6.2.3 Reduce阶段6.2.4 I/O传输6.2.5 数据倾斜问题6.2.6 常用的调优参数6.3 HDFS小文件优化方法6.3.1 HDFS小文件弊端6.3.2 HDFS小文件解决方案第7章 MapReduce扩展案例7.1 倒排索引案例(多job串联)7.2 TopN案例7.3 找博客共同粉丝案例第8章 常见错误及解决方案 第6章

Android小经验

转载自:http://mp.weixin.qq.com/s?__biz=MzA4MjU5NTY0NA==&mid=404388098&idx=1&sn=8bbbba7692dca68cdda2212dec4d86c0&scene=21#wechat_redirect 今天是冯建同学投稿.总结他在Android开发方面的各种小经验,我认为很有意义,所谓经验丰富有时候是指积累的这些小经验许多,他这篇分享相信会帮助到一些朋友.我也曾推荐过他的 APK魔鬼瘦身 一文.没看过的朋友也

企业新产品网络推广怎么做?

现在越来越多企业都在开展互联网工作了,而如果一家企业推出新产品,想要推广出去,互联网工作是必不可少的,现在摆在企业面前的难题就是怎么做了,因为可能有的企业做了网络推广很多时候都打了水漂.下面就由全网天下小编给中小企业分享一些建议. 1.从用户心理出发,了解竞争对手 用户心理是一个很奇怪的东西,推广更多的是要从用户心理出发,切切实实的满足他们的需求,而不是完全通过小礼品去吸引他们.还有重点去了解竞争对手的推广方式,好的经验,拿来学习借鉴,失败的地方要吸取教训,知己知彼百战不殆. 2.对企业产品深入

谈谈最近独立做项目的一些事情,一些小经验,分享之!

可以说我是一个码农,一个纯正的码农,一个脱离了低级趣味的码农,时刻准备着要做一个对社会有贡献的码农. 平常最喜欢的事情就是在群里问问题,总是有那么一群好哥们在一起,这样可以享受装逼的乐趣. 谈了这么多无厘头的话题,总归要切入正题,我大学的时候学的是JAVA,但是无奈大学时光都沉浸于美色和游戏当中,所以导致大学毕业的时候,只会写一点简单的东西,只知道JAVA中的swing(这个貌似是我懂的最深的知识了). 也就是在我找工作四处碰壁,走投无路的时候,我发现了一条阳关道:啃老.虽然这不怎么好,但是确实

【业务建模_4】如何快速做新产品或新功能的数据分析框架

背景 不管是换公司还是换业务,或者上线新功能,做数据工作的都需要尽快了解业务模式和搭建分析框架.不要以为什么数据都有,基于历史经验,开发设计的表只会满足展示需要,并不会存储分析所需数据:另一方面,前端展示和后端实际逻辑可能差异较大,但从前端入手,猜测后端表,再去找后端表仍然是好办法. 新产品 step1:了解产品解决的问题 看应用市场写的描述,打开产品粗略体验下,大概就能知道产品定位是什么. 通常是一句话概述,抓住关键,暂忽略辅助功能.一般概述的范式是"××产品是通过××帮助××解决××问题&q

产品经理需要做运营吗?

在 产品经理 的工作中与运营的关联性十分大,因此对于运营也需要有一定的认识与自己的个人理解. 今天,我们着重从产品经理是否需要做运营来进行阐述. 1.什么是运营? 水无常势,兵无常形,因变而制,谓之运营. 多年来,笔者一直铭记这句对运营的经典总结.提到" 运营 " 二字,很多业内外人士都认为运营就是一个在公司打杂的勤杂工,什么脏活累活都是运营小妹在做,很多时候还费力不讨好,经常被沉重的 KPI 压的喘不过气来!其实这些都是对运营的片面理解,如果你恰好也是一名运营人员并且目前所处的状态如

新产品上线,怎样稳打稳扎?

标题是这样,但是如果你问我,怎么一个月做到100万粉丝,那恐怕想多了. 没钱,还想一步登天,无意于白日做梦. 产品不同,营销的方法不同.关键在于找到你的营销场景,设计你的营销路径.譬如滴滴的社交红包,给你用就不能成. 不能一上来就说我要投微信,投百度,投今日头条,投应用市场,或者说砸品牌做公关.本质上,无论我们投什么,都取决于我们的目标用户是谁,他们通过哪些渠道来接触同类产品.这就需要做足用户调研与营销洞察. 尽量细化到,从哪里接触,从哪里购买,购买决策周期有多长,初次购买金额,复购金额与次数;

手把手带你做一个超炫酷loading成功动画view Android自定义view

写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾告一段落,搞完毕设的开题报告后去学习新的内容. 有人对我说类似的效果网上已经有了呀,直接拿来就可以用,为什么还要写.我个人的观点是:第三方控件多数不能完全满足UI的要求,如果需要修改,那么必须理解他的实现,所以很有必要自己去写一款出来,成为程序的创造者,而不单单是使用者.所以,写一写已经实现的效果,