web性能优化

为什么要做性能优化?

提高用户体验,加速页面的相应速度
提高用户交互性，操作体验更好
为搜索引擎服务

常用的技术

css精灵图片
压缩图片大小
合并css js文件
减少http请求的次数
合理的使用cdn资源，加速资源加载速度、降低服务器压力
合理的使用html节点，减少不必要的节点
优化css元素选择
优化js代码
服务器配置gzip

SEO搜索引擎优化

为什么要进行SEO

为了提高网站的权重，让用户能在搜索引擎中快速的找到网站。

常用方法

定期的更新网站的文章内容，在html的head中加入关键字和描述信息
增加外链
做站点集群
百度竞价排名

性能优化我们为什么要做

如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。
- 加快页面展示和运行速度
- 节约服务器带宽流量
- 减少服务器压力

什么时候做性能优化最合适？

一般来说，遵循避免过早优化的原则，因为网站再发过程中的成本相对来说还是比较高的，web开发工程师、ui、产品、运维、后台服务等等，所以第一我们要保证基本功能完成，再考虑优化。第二在没有找到性能瓶颈之前，不要优化

哪方面需要做性能优化？

在这之前，我们先分析一个页面从发起请求到展示到用户大概流程

1、DNS 查询

2、发送 HTTP 请求

3、等待服务器响应

4、下载服务器响应内容

5、解析 HTML、CSS、JS

6、渲染 HTML、CSS、JS 和图片

7、响应用户事件
了解了这几个过程，大家应该知道如何优化了吧，对！就是对症下药：

1、针对 DNS 查询优化

减少网站所用的域名个数（现代浏览器基本都具备并行下载），减少 DNS 查询时间建议一个网站使用至少 2 个域，但不多于 4 个域来提供资源

2、针对发送方面的请求优化

localStorage（本地存储）静态资源打包，开启 Gzip 压缩（节省响应流量）Cookie 隔离（节省请求流量）使用 CDN 加速（访问最近服务器）

3、针对等待服务器响应方面的优化

合理设置 HTTP 缓存：Etag 与 Cache-control启用 HTTP/2（多路复用，并行加载）优化数据库查询部署负载均衡

4、针对下载服务器响应内容优化

用 CSS3 实现图片，对小图标进行 base64（降低请求数）延迟(defer)加载/异步(async)加载依赖针对解析 HTML、CSS、JS优化去掉无用的 HTML、CSS 和 JS优化首屏时间：脚本后位置、图片压缩、懒加载

5、针对渲染 HTML、CSS、JS 和图片优化

最小化重绘(repaint)和回流(reflow)：批量修改元素样式、避免 table 布局等针对响应用户事件优化尽量不在前端做复杂的运算

下面参考Web前端优化及工具集锦，转（里面有Google和雅虎提供的Web页面优化最佳实践）
https://blog.csdn.net/lilythy2016/article/details/52858277）

浅谈前端与SEO，请移步（转）
https://blog.csdn.net/weixin_39717076/article/details/80332178

web网页前端制作中的SEO方法（转）
https://www.cnblogs.com/xupeiyu/p/3605569.html