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

本文主要是介绍新产品为了效果,做的比较炫,用了很多的图片和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,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1081011

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

百度/小米/滴滴/京东,中台架构比较

小米中台建设实践 01 小米的三大中台建设:业务+数据+技术 业务中台--从业务说起 在中台建设中,需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况,判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等,再结合其业务发展历程及业务现状,整理了中台架构的核心方法论,一是企业如何共享服务,二是如何为业务提供便利。

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

性能测试介绍

性能测试是一种测试方法,旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试,可以确定系统是否能够满足预期的性能要求,找出性能瓶颈和潜在的问题,并进行优化和调整。 发现性能瓶颈:性能测试可以帮助发现系统的性能瓶颈,即系统在高负载或高并发情况下可能出现的问题

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

HDFS—存储优化(纠删码)

纠删码原理 HDFS 默认情况下,一个文件有3个副本,这样提高了数据的可靠性,但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码,采用计算的方式,可以节省约50%左右的存储空间。 此种方式节约了空间,但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件,都会执行此策略。 默认只开启对 RS-6-3-1024k

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu