full link - SAMUELGG/doc GitHub Wiki

概览

• 前端优化
• 网络优化
• 后端优化

前端

优化指标 首屏加载时间 解析和执行效率 流畅度

浏览器渲染引擎 JS引擎 定时器触发器线程 浏览器事件线程 浏览器HTTP异步请求线程

css优化

• css写在头部， JavaScript写在尾部和异步;
• 避免图片和iframe等空src;
• 避免重新设置图片的大小;
• 图片避免使用dataURL；
• 避免在html中写style属性;
• 避免CSS表达式;
• 移除空的css规则;
• 正确使用Display;

脚本优化

• 减少重绘和回流;
• 缓存Dom选择和计算;
• 缓存列表length;
• 尽量使用事件代理,避免批量绑定事件;
• 尽量使用ID选择器;
• 移动端使用touchstart、touchend代替click;

渲染优化

• html使用viewport;
• 减少DOM节点;
• 尽量使用css3动画;
• 合理使用requestAnimatinFrame代替setTimeout;
• 适当使用canvas;
• Touchmove和Scroll事件会导致多次渲染;
• 使用 css3过度和3d;

代码混淆的性能影响 混淆的两种方式: 正则替换[强度弱，容易被破解] 修改抽象语法树[影响性能] v8和JS引擎的字符串拼接性能非常弱,字符串拼接会使用大量的临时变量，JS引擎需要大量工作来清理临时变量影响性能;

DOM操作流程 1、计算样式规则:JS计算需要如何操作DOM结构，并计算节点的最终样式规则; 2、Layout:根据css节点规则,来计算节点在屏幕上位置和尺寸,由于自上而下、从左到右布局，一个节点变化会导致多喝节点重新布局; 3、Update Layer Tree: 一个页面可能有多个渲染层，Layer Tree用来维护各个渲染层的顺序; 4、Paint:绘制就是填充像素的过程; 5、Composite:在多个层分别完成绘制后，浏览器会按各个绘制层的正确顺序拼合成一个图层,显示在屏幕上;

所以JS操作时尽量避免正常的操作流程，有些步骤是可以跳过的,比如使用transform、opacity等属性，直接拼接合成;

网络优化

• 零请求
• 无流量

以上意图就是减少请求数，降低请求量;

主要手段:

加载优化

• 合并CSS、JavaScript;
• 合并小图片，使用雪碧图;
• 缓存一切可缓存的资源;
• 使用长Cache;
• 使用外联式引用CSS、JavaScript;
• 压缩HTML、CSS、JavaScript;
• 启用Gzip;
• 使用首屏加载;
• 使用按需加载;
• 使用滚屏加载;
• 通过Media Query加载;
• 增加Loading进度条;
• 减少Cookie;
• 避免重定向;
• 异步加载第三方资源;

使用HTTP2协议

• 新增二进制分帧层; [实现了多向请求和相应，优化了请求的优先级，保证了每个来源一个连接]
• 服务器推送;
• 首部压缩;

图片优化

• 使用智图 腾讯智图
• 使用css3 svg iconfont 代替突破
• 使用srcset;
• webP优于JPG;
• png8优于gif
• 首次加载不大于1041kb;
• 图片不宽于640;

后端

暂无