性能优化总结

时间 2019-11-16

标签性能优化总结栏目系统性能繁體版

原文原文链接

1. 雅虎军规javascript

1.1 减小http请求数，通常5个，不能再多了php

js，css合并压缩，图片雪碧图css

1.2 减小DNS的查找次数html

CDN分发请求，预加载服务器，不要CDN太多，也会变慢前端

1.3 避免跳转node

跳转是301和302实现的jquery

要把http状态码记住linux

1.4 可缓存的ajax

使响应具备可缓存性

具体的讨论能够查看add an Expires or a Cache-Control Header。其余的几条规则也一样适用于Ajax：

Gizp压缩，减小DNS查找次数，精简JavaScript，避免跳转，配置ETag

具体实现方式

$.ajax参数里面 cache: true，须要传过时时间，后台返回的头也有时间，这样就能够实现了

1.5 推迟加载内容

lazyload，模版和后端配合实现首屏加载

1.6 预加载

mozilla实现的，不知道有没有放到标准里

是将下一个页面的东西提早下载到缓存中

下面有三种预加载的方法：

1.6.1 无条件加载，触发onload事件时，直接加载额外的页面内容，好比google，在首页会下载搜索结果页用到的图片

1.6.2 有条件加载，根据用户的操做来有条件的判断用户下面可能去往的页面并相应的预加载页面内容。在输入内容时加载额外的页面内容

1.6.3 有预期的加载，载入从新设计过的页面时使用预加载，这种状况常常出如今页面通过从新设计后，用户抱怨，比之前慢。问题多是用户对于以前的站点创建了完整的缓存，对于新站点没有，所以能够在访问旧站点的时候就加载一部分新站点的内容。适用状况是，有个旧网站，上面有个新网站的连接，这个能够提早加载。

1.7 减小DOM元素数量

1.8 根据域名划份内容

1.9 使用iframe的数量最小

iframe优势，解决加载缓慢的第三方内容，如图标和广告等的加载问题

iframe缺点，即时内容为空，加载也须要时间，会阻止页面加载，没有语义

1.10 不要出现404

1.11 使用内容分发网络

1.12 为文件头指定Expires或Cache-Control

感受浏览器本身就能作这个事，对于图片，文件它本身就会缓存

1.13 gzip压缩

1.14 配置ETag

1.15 尽早刷新输出缓冲

php有一个方法flush()方法，它容许把已经编译好的部分html响应文件先发给浏览器，这时浏览器就能够先下载文件中的内容（脚本，css文件等）然后台处理剩余的html页面

...

</head>

<?php flush();?>

<body>

...

1.16 使用GET来完成AJAX请求

1.17 把样式表置于顶部

1.18 避免使用css表达式

1.19 使用外部的js和css

1.20 削减js和css

1.21 用link 代替@import

1.22 避免使用滤镜， filter

1.23 把脚本放到底部

1.24 剔除重复的脚本

1.25 减小DOM访问

这个和vue冲突

1.26 开发智能的事件处理程序

事件代理，过多的事件句柄会使浏览器反应缓慢，由于句柄会频繁的触发，从而拖慢浏览器

1.27 减少Cookie体积

去除没必要要的cookie

使cookie体积尽可能小，以减小对用户响应的时间

注意在适应级别的域名上设置cookie以便子域名不受影响

设置合理的过时时间

1.28 对页面内容使用无cookie的域名

也是CDN分发的一种，可是若是在顶级域名上设置了cookie，则全部的子域名都包含顶级域名的cookie，这点要注意，若是想实现无cookie的域名，须要从新申请别的域名存放静态文件

1.29 优化图像

压缩，修改gif为png格式

检查颜色的工具imagemagick，

命令： identify -verbose image.gif

将gif转为png的命令：
convert image.gif image.png

png图片优化工具，有不少种，这里说一种pngcrush

pngcrush image.png -rem alla -reduce -brute result.png

jpg图片优化

jpegtran -copy none -optimize -perfect src.jpg dest.jpg

1.30 优化css spirite

雪碧图垂直排列，颜色较近的组合到一块儿，能够下降颜色数，理想情况是低于256色以便使用png8格式，不要在雪碧图的图像中间留有较大的空隙，虽然空隙不会增长文件大小，可是内存须要更大的空间来存放像素

1.31 不要在html中缩放图像

尽可能在缩略图的地方使用缩略图

1.32 favicon.ico要小并且可缓存

也可使浏览器不下载这个文件

1.33 保持单个文件小于25k

这个限制主要是由于iPhone不能缓存大于25k的文件，这里指的是解压后的大小，因为单纯gzip可能达不到要求，所以精简文件就显得十分重要。

1.34 打包组件成复合文本

把页面内容打包成复合文本，就如同带有多附件的Email，它可以在一个http请求中取得多个组件，切记http请求是很奢侈的，当使用这条规则时，首先肯定用户代理是否支持，iPhone是不支持的

js和css写在一块儿

根据注释的不一样来区分加载

如今通常不这样作了

2. 面向切面编程

Aspect Oriented Programming（AOP）面向切面编程，主要实现的目的是针对业务处理过程当中的切面进行提取，它所面对的是处理过程当中俄某个步骤或阶段，以得到逻辑过程当中各部分之间低耦合性的隔离效果。

对业务操做进行无干扰的处理

好比埋点操做，测试等

这种在运行时，动态地将代码切入到类的指定方法、指定位置上的编程思想就是面向切面的编程。

通常而言，咱们管切入到指定类指定方法的代码片断称为切面，而切入到哪些类、哪些方法则叫切入点。有了AOP，咱们就能够把几个类共有的代码，抽取到一个切片中，等到须要时再切入对象中去，从而改变其原有的行为。

这样看来，AOP其实只是OOP的补充而已。OOP从横向上区分出一个个的类来，而AOP则从纵向上向对象中加入特定的代码。有了AOP，OOP变得立体了。若是加上时间维度，AOP使OOP由原来的二维变为三维了，由平面变成立体了。从技术上来讲，AOP基本上是经过代理机制实现的。 AOP在编程历史上能够说是里程碑式的，对OOP编程是一种十分有益的补充。

3. nginx配置缓存

浏览器发请求后，先看本身的缓存有没有过时，若是过时的话先看有没有ETag，若是有的话浏览器自动带if-None-Match给服务器，服务器决定是返回304仍是200，若是是304的话就向缓存读取，这里的缓存是指浏览器的缓存，若是没有ETag的话，看是否有Last-Modified，若是有浏览器自带If-Modified-Since给服务器，服务器决定是304仍是200，若是没有向服务器正常发送请求。

浏览器必定会有缓存吗，若是设置no-cache呢？浏览器必定会有缓存，就算设置了no-cache也没有用，照样缓存。就是修改了会立马有变化。

若是全部设置缓存的设置都关闭，则浏览器会根据Last-Modified判断文件是否更新，不一样浏览器也有不一样的策略，因此不能彻底依赖这个，仍是要设置其余的。

expires和add_header Cache-Control cache-control的优先级高于expires，若是没有cache-control的话使用expires

若是设置了etag和expires，则expires的优先级最高，属于强缓存，因此要慎用expires。

http://www.javashuo.com/article/p-uiwvkybf-z.html

from disk cache仍是from memory cache

#设置浏览器缓存

add_header Cache-Control no-cache;

add_header Cache-Control private ;

3.1 默认ETag是开启的，ETag是更细粒度的缓存策略，根据文件信息生成的值，若是文件变化则该值就会变化。

3.2 expires, 设置过时时间，再修改后可能会形成客户端没法获取新内容的问题

3.3 add_header Cache-Control no-cache;

3.4 gzip开启，默认进行gzip压缩的格式只有html文件，咱们须要加上js，css，图片等

可是服务器启动gzip压缩须要消耗必定的时间，因此可能会牺牲时间来减小流量。视具体状况而定。

gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

http://www.javashuo.com/article/p-kgwxpnns-hm.html

反向代理以上设置都不起做用，须要用proxy_cache 的配置

http://www.cnblogs.com/dudu/p/4597351.html

还有清除缓存的

proxy_cache_key $host$uri$is_args$args;

location ~ /purge(/.*) {
allow all;#指定能够清除缓存的ip，all容许全部ip清除
proxy_cache_purge my-cache $host$1$is_args$args;
}

4. 实现聊天的方法

a. Polling(AJAX)，每隔一段时间发送一次

b. Long Polling(Comet)

c. Flash

d. Web Socket

经过http握手，握手成功使用tcp

发送的请求头添加upgrade: upgrade

https://socket.io/get-started/chat/

一个聊天小程序

nginx安装node

二、直接安装编译好的 Nodejs（推荐）

这种方法相比第一种节省了编译安装的时间，因此安装起来更快。
第一步仍然须要下载对应的二进制文件：
wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz
提取文件：
tar -xvf node-v8.9.1-linux-x64.tar.xz
解压以后获得的文件夹就是已经安装好的 Nodejs 了，为了方便咱们能够把它重命名一下（在这里我把它放到了
用户根目录下面的 app 的文件夹里，你也能够换成其余路径）：
mv node-v8.9.1-linux-x64 ~/app/nodejs

然而，这种方式安装的 Nodejs 并不完美。首先，Nodejs 的命令 node 和 npm 并不能在全局使用。为了解决这个问题，咱们须要创建两个软连接：
sudo ln -s ~/app/nodejs/bin/node /usr/local/bin/node
sudo ln -s ~/app/nodejs/bin/npm /usr/local/bin/npm
其中，~/app/nodejs 是咱们刚才安装的 Nodejs 的路径，在创建软连接的时候要注意区别。
如今，node 和 npm 能够在全局使用了，一样输入命令 node -v 来检查 Nodejs 是否安装成功：

http://180.76.99.112:3001/

多元素滚动优化，使用overflow:hidden，外层再包裹一个滚动的div，根据滚动的高度计算元素的位置

5. Google AMP

Google AMP针对的场景是手机端，资讯页面（非SPA）

场景的特色：

机器性能低，浏览器性能，网速受限，非刚性需求

优化：

减小请求，减少体积，牺牲一部分UE

优化的目标：

提高用户体验，提高执行效率，减轻服务器压力

限制：

安全性，一致性，可维护性，成本，业务类型

综合考虑性能提高

前端性能优化场景： web场景下的浏览器和http层性能优化

通常性特色：

js执行效率，V8的及时编译，闭包的使用，单线程应用模型

渲染引擎效率，重绘，重排问题

http请求，

pc端：浏览器性能差别，网速相对快，处理器性能较好

移动端：处理器性能有限，网络速度慢，流量成本，手机端对请求数有限制，3G，4G网络网速的限制

AMP有自定义的标签 amp-image，amp-video等

图片的大小未知，会出发reflow，因此强制要求图片必须在渲染以前指定大小

AMP CSS，必须inline，必须在head，只能有一个，禁止在html标签上写样式，禁止* selector，禁止 filter

AMP的限制：只容许异步脚本，显示指定UI尺寸，css只能有一个inline，css只能50k，容许有限的css动画，控制资源加载，动画执行

AMP的原则：严格控制外部资源，严格控制整个页面渲染，严格控制css动画

icon font https://icomoon.io/app/#/select/font

性能优化须要权衡

人月神话

6. 高性能动画及渲染过程

如何实现动画

jquery animation setTimeout， top/left

css3动画

GPU加速，哪些动画是在GPU中渲染的？

https://csstriggers.com/

重排和重绘加速

硬件加速（GPU加速）

CPU和GPU

相同之处：二者都有总线和外界联系，有本身的缓存体系，以及数字和逻辑运算单元，二者都是为了完成计算任务而设计的

不一样之处： CPU主要负责操做系统和应用程序，GPU主要负责跟显示相关的数据处理，GPU的活CPU通常均可以干，可是效率低下

layer模型：浏览器根据css属性为元素生成layers，将layers做为texture上传到GPU，当改变layer的transform，opacity属性时，渲染会跳过layout，paint，直接通知GPU对layer作变换。

哪些会生成layer模型：

拥有3d transform属性，animation，transition，实现opacity，transform动画，video，canvas，flash，使用css filter的元素，z-index大于某个相邻节点的layer的元素

为何硬件加速会快？

节省了哪些时间，CPU节省了paint和layout和向GPU传输位图的时间。

composite layers图层合成是在GPU上不会占用CPU的空间

layout就是重排的操做，触发layout，设置宽高相关的属性，clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText,, offsetHeight, offsetLeft, offetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth ...

fastdom.js

分离读写操做，写操做会触发layout

paint重绘，对元素进行修饰的属性会触发重绘，减小重绘的区域和元素

GPU的composite也须要优化，

http://jankfree.org/