# 前端优化
## 性能优化
### 针对浏览器静态资源的加载
- 减少请求次数
- 浏览器缓存（cache-control设置）
- 强缓存策略200
- 浏览器内存缓存memory cache 图片，JS文件等
- 硬盘缓存disk cache 常见CSS文件
- 协商缓存策略（304）
- cache-control:no-cache
- last-Modify最近修改时间 / if-Modify-Since
- ETag 资源标记 / if-None-Match
- 合并多文件
- webpack将多文件打包成单文件
- 多图标雪碧图
- 图片懒加载
- 字体图标代替图片
- 减少单次请求的体积
- 资源压缩混淆
- webpack、gulp、rollup等
- 开启GZIP（前端使用包(CompressionWebpackPlugin)开启GZIP，服务器配置开启gzip并设置gzip的类型）例如nginx: gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
- 网络加速
- CDN（文件资源服务器，由第三方提供，地区服务器，就近距离加速）
### 针对浏览器渲染页面及交互性能
- 精炼JS代码
- 利用算法优化逻辑运算（通过做题提升 leetcode）
- 时间复杂度O O(2n):表示2层for循环 一个算法执行所耗费的时间 + 重复执行的次数
- 空间复杂度:占用内存,cpu等计算机资源的程度
- 组件复用，减少重复代码
- 减少条件语句，简化判断逻辑
- 深入js 不同数据类型相关api的执行速度与内存消耗
- worker多线程
- 页面渲染
- 减少css层级选择
- 减少重排，重排包括
- 添加、删除可见的dom
- 元素的位置改变
- 元素的尺寸改变
- 浏览器窗口大小改变
- 设置style属性
- 改变文字大小
- 添加/删除样式表
- 激活伪类，如:hover
- 操作class属性
- 内容的改变
- 页面渲染初始化
### 首屏优化
- 代码压缩
- 框架和组件按需加载
- 框架和插件第三方库从cdn中引入
- 路由懒加载
- SSR服务端渲染
## SEO优化
### html结构
- title
- meta
- keywords
- description
- 增加内链
- a标签
- 增加外链
- a标签
- 图片用ALT标签
- 语义化标签
- H标签正确使用：H1,H2,H3...
- 其他语义化标签
### HTTPS：优先于http排名
### 内容
- 原创内容：利用搜索引擎收录
- 保持内容更新
### 单页面应用
- SSR服务端渲染
- 路由采用history模式
- 每个路由加H1标签
- vue-meta-info + prerender-spa-plugin
*XMind - Trial Version*
