1.代码性能优化
代码层里
//求数组中最大的值
var arr = [1, 44, 55, 6, 7, 8, 9]
var max = arr[0];
for(var i = 0; i < arr.length; i++) {
if(arr[i]>max) {
max = arr[i]
}
}
console.log(max)
// 优化点有
var l = arr.length // 用个变量来保存长度，不用每次循环都计算
var l = arr.length - 1 // 从编译角度，反向编译会快很多
for(var i = l; i >= 0; i--) {
if(arr[i] > max) {
max = arr[i]
}
}
1.[css]将样式表放到页面顶部，不使用CSS表达式，使用不使用@import
2.[javasript]减少DOM的访问，删除不需要的脚本，压缩javascript和css，将它们从外部引入，将脚本放在页面底部
3.[图片方面]css spite精灵，不要在html中拉伸图片
重绘重排
1.函数中会经常用到全局变量，把它保存在局部变量中
2.使用事件代理/事件委托
3.批量修改DOM
加载资源调优
1.路由懒加载
// router.js
{
path: '/about',
name: 'AboutMe'
component: () => import(/*webpackChunkName: "about"*/'@/components/about')
}
2.组件异步加载
// errorComponent.vue
import CompA from "@/compenents/compa.vue"
export default {
components: {
errorComponent: () => import(/*webpackChunkName: "CompA"*/'@/components/CompA')
}
}
3.高级异步组件
import Loading from '@/components/Loading'
const AsyncCompC = () => {
//需要加载的组件，是一个promise对象
component: impornt('@/components/CompC.vue'),
loading: Loading,
delay: 300,
timeout: 2000
}
2.http层面的优化
1.DNS 预解析 - DNS 缓存
2.TCP 连接 - 采用http2,tcp通道复用，头部压缩，
3.浏览器并发
4.http请求次数-合并文件, CSS精灵，inline Image
5.http压缩- Gzip
6.图片优化-小图标base64，图片预加载，webP
7.缓存--强缓存expires, cache-control与协商缓存Last Modified, Etag
8.浏览器的渲染-禁止使用iframe(阻塞父文档onload事件)，禁止使用gif图片实现loading效果，使用css3代码代替js动画(避免重绘重排以及回流)，空的href和src, 网页gzip, CDN托管，data缓存，图片服务器，DOM树，CSSOM树，布局渲染树，绘制渲染树；
3.服务器层面的优化[待补充]
1.使用CDN
2.配置Etag
3.压缩数据--Gzip压缩
4.通过反向代理来提高性能和增加安全性
5.添加负载平衡
6.缓存静态和动态的内容
7.优化SSL/TLS
8.使用HTTP2或SPDY
4.架构层面的优化
1.DNS解析优化--利用TTL(Time to Live), 拆分域名，DNS prefetch
2.TCP建联优化(即对rwnd, cwnd的处理)--流量控制，慢启动
3.CDN加速
4.请求合并(减少http请求)--gulp/grunt合并文件，css spite, base64.etc.
5.重定向优化
6.NS部署， Anycast
7.缓存--动态页面静态缓存，缓存查询结果
8.请求异步
9.http 2.0
10.负载均衡--web负载均衡、ip负载均衡、反向代理、dns等
5.node高并发负载均衡
垂直扩展
主要是提升单机硬件配置(cpu, 内存，网卡，硬盘)
水平扩展
目前在高并发高可用系统架构中，最优的方案还是水平扩展。 理论上，在系统能支持水平扩展的前提下，增加服务器数量，部署更多机器集群，能够带来无限的性能提升。 如何将网络请求分布给多个机器支处理？
1.负载均衡器--Nginx
Nginx是一个高性能的WEB服务器和反向代理服务，最常用的软件负载均衡器。 网易、淘宝、腾讯、新浪等等大小互联网公司 核心概念：用户请求先到Nginx，再由Nginx转发请求到后面的应用服务器(如：node)
# nginx.conf配置文件--负载均衡配置方式
events{
#并发连接数
worker_connections: 1024;
}
http{
#Tomcat服务器集群
upstream tomcat_servers{
server 127.0.0.1:8081;
server 127.0.0.1:8080;
}
server{
#监听80端口
listen 80;
#将所有请求交给Tomcat集群处理
location / {
proxy_pass http://tomcat_servers;
}
}
}
Nginx一般做到10万并发，常用调优手法： Nginx参数： 进程与CPU绑定worker_cpu_affinity、 并发连接数、缓存区、超时时间、压缩、日志 操作系统网络参数: 能打开的最大文件数、net.ipv4.tcp_keepalive_time、tcp缓冲区/proc/sys/net/ipv4/tcp_mem、rmem、wmem 为什么说一般做到10W并发，难道不能继续优化嘛？ Nginx通常用在Http反向代理的场景,在网络模型中，Http属于第7层应用层的协议； Http请求的处理包括解析和封装Http内容，要处理更多请求，需要更多的内存、CPU等资源。 高配置硬件太贵，通常组成？？？？来获取更高的处理能力。
2.负载均衡器--LVS
LVS(Linux Virtual Server), linux虚拟服务器，中国人开发，目前绝大部分Linux发行版，都集成在内核了。实现基于第四层(传输层)的软件负载均衡方案。为了方便理解，初学者可以认为，安装使用了LVS的Linux服务器，等于快递中转。 核心理念：原本是请求LVS服务器的数据包，被LVS软件篡改了数据包的目的地，将流量转移到了Nginx所在机器IP，从而实现负载均衡。 为什么说LVS比Nginx快？ 网络第四层所使用的协议(如TCP)内容比HTTP简单，解析和组装所消耗的CPU、内存等资源比Nginx要低。
3.硬件设备，例如F5
服务端终有上限
我们这里设定一个不同负载均衡方案的区间值
- Nginx支撑1W~10W并发
- LVS支撑10W~50W并发
- F5支撑200W~1000W并发
