现在经常浏览各种博客，看到很多有经验的大牛分享自己的经验以及技术，作为小白，很多不懂得地方，所以在一步一步积累，向他们学习，学习他们的知识，经验，站在巨人的肩膀，变得更好。今天学习一位博主的《前端极限性能优化合集》。
前端工程性能优化：
1.JS，CSS极简，减少文件大小
从带宽角度而言，一个站点的访问速度，其实是从文件的大小入手，而不是执行效率。当访问者量很大时，减少CSS，JS文件大小的必要性就十分高了。
减少字节之CSS：
// 减少1字节
font-weight: bold -> font-weight:700
// 组合写法
// 减少n字节
margin-top:**
margin-left: **
margin-right: **
margin-bottom: **
-> margin : ** ** ** **;减少字节之Javascript：
var str = "abcd"
if(str.indexOf("d") === -1)
...
// 使用取反运算
// 减少3字节
if(!~str.indexOf("d"))
...2.将样式配置逻辑embed到页面中，进而减少HTTP请求
CSS头部加载 ，JS尾部加载是一种过时的观点，好的方法是”减少HTTP请求“。
Google首页，没有CSS请求，查看页面源码时，发现Google将样式embed到了页面中一起加载过来。其好处有：
浏览器预先加载CSS 不会执行并行加载CSS文件，减少http请求
随页面享受Gzip压缩，并且随时可以解决缓存问题
embed在页面中，浏览器预解析，不会造成并行下载css同时解析html时出现的回流或者重绘等问题
让观察者无法轻松调试，定位，甚至修改。
3.图片的压缩，静态资源CDN化
将图片，CSS,JS等资源CDN化，从而减少服务器的压力。其中，图片压缩，WebP格式是Web图片格式的未来可能趋势。
4.视图层使用JS模板 ，或者完整的View框架（React）,以Lazyload的形式分块加载举例：淘宝和天猫首页。将视图模块化，访问者滚动时才加载对应的数据，从而减少了一次性数据的传输量。
5.CSS JS选择器ID化
ID选择器是最快的。主业务逻辑的元素绑定ID是一种好的方法。可以加快解析和渲染的速度。
由于还没有对后端知识有太多的学习，以下知识留作记录，供以后的学习。
Back-End后端工程
1.使用Niginx
Niginx作为一个开源高性能负载均衡的HTTP和反向代理服务器，是开源界的标杆之作。 一般来说，通过后台程序启动的服务， 通过Nginx作转发可以轻松的做到：
负载均衡
限制对于资源路径的访问
对静态资源自动开启Gzip压缩
配合分布式服务器架构
2.Redis，Varnish做缓存
使用缓存中间层可以极大程度上的减少对于数据库的重复读写操作次数，减小服务器的压力。极限配置过的Varnish缓存层面可以自动检测到已经修改的文件，没有改变的文件则告诉客户端使用缓存，而改变过的文件会自动返回新的文件，这种技术详情请见 Github IO 站点， 非常适合静态资源。
减少对于数据库层面的读写操作
缓存静态数据，配置，资源
并发量大时，减小服务器压力
4.字段加密，字段压缩
从后端的开发角度来说，直接读写数据库之后，原样返回数据库对应字段作为响应数据是一种极其懒惰愚蠢的行为，这样的做法不单是告诉攻击者数据库的字段就是这样的， 更是让有经验的人容易的揣测到数据库的表结构。所以字段的加密， 字段的压缩，就变得极其的重要.
字段的加密, 压缩意思是指，从数据库中拿出的对应数据自动转化成非逻辑形态数据
id: 201293 a : 201293
name: “Sam” -> z : 88
score: 88 n : “U2Ft”
配合前端的filter的层面，将数据转化成视图对应所需要的平行话格式。
4.静态资源分离，发布自动化
运维当然是必不可少的，将静态资源自动抽离，通过Python，或者Shell脚本自动化将静态资源分布到CDN服务器，替换对应的文本等操作， 内存监控等一系列的task，当然，中小公司很少有这么专业的干活。
原文地址信息：
https://demoncloud.github.io/#post@s=前端极限性能优化合集