前端性能优化与SEO优化整理

# 前端优化

## 性能优化

### 针对浏览器静态资源的加载

- 减少请求次数

	- 浏览器缓存（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*