前端优化思维导图.png
一、性能优化原则及分类
| 优化方向 | 优化手段 |
|---|---|
| 请求数量 | 合并js脚本和样式表，拆分初始化负载，划分主域 |
| 请求带宽 | 开启Gzip，精简js，移除重复脚本，图像优化 |
| 缓存利用 | 使用CDN，使用外部js和css，添加expires头，减少DNS查找，配置ETag，使ajax可缓存 |
| 页面结构 | 将样式表放在<head>,脚本放在</body>前面，尽早刷新文档的输出。 |
| 代码校验 | 避免css表达式，避免重定向 |
二、图片处理
| 优点 | 缺点 | 适合场景 | |
|---|---|---|---|
| 图片合并 | 兼容性强，可缓存，可提前加载多态图，可提升图片加载显示体验 | 维护性差、合并图片类型以及大小控制限制高、有可能造成资源浪费 | 修改更新少的常驻型低色位的装饰小图 |
| IconFont | 可缓存，矢量性，可控性强 | 存在浏览器渲染差异性、只能纯色、文件体积略大 | 纯色图标 |
| Base64 | 无额外请求 | 不可缓存、兼容性差、代码冗余、可读性差、维护不变、cpu内存损耗大 | 体积小，复用率低的背景装饰图片 |
三、雅虎军规
image.png
四、代码优化
html 代码优化
避免空的图片src
协议自适应，减少html文件大小,将https和http替换成//
减少dom元素数量
减少iframe数量
css代码优化
建议使用类选择器，访问比较快
不建议使用很长的base64
避免css表达式
避免使用Filters(滤镜)
使用预处理器less、saas、stylus
使用postcss
自动添加前缀autoprefixer
js代码优化
避免使用eval和width
减少作用域链查找
减少DOM访问，尽量缓存DOM
充分利用事件委托
减少Repaint（重绘） 和 Reflow （重排） ，最好通过批量更新元素减少重排次数，如设置类class统一更新样式
元素将会触发多次页面重排的情况下使用DOM fargment 在内存中创建完整的 DOM 节点，然后一次性添加到 DOM 中。
js框架的优化
jquery的最佳实践
vue的最佳实践
react的最佳实践
angular的最佳实践
选用更轻量的框架 jquery -> zepto
图片格式的选择
jpg：颜色较为丰富而且文件比较大的(40kB - 200kB)，或者有内容的图片
PNG8：图标颜色比较简单、文件体积不大、起修饰作用的图片
PNG24：图像颜色丰富而且图片文件不太大的(40kB以下)，或有半透明效果的
五、安全
XSS应对策略：对html标签以及一些特殊字符( 单引号、双引号、< 、 > 、 & 等)做过滤，转码。
CSRF(Cross Site Request Forgery)和cookie劫持的应对策略：
通过 referer 、token 或者 验证码 来检测用户提交
尽量不要在页面的链接中暴露用户隐私信息
对于用户修改删除等操作最好都使用post方式
避免全站通用的cookie，严格设置cookie的域
