这是我参与「第四届青训营 」笔记创作活动的第8天。

性能优化

性能

客观衡量标准，用户对加载时间和运行时的直观体验。

网站性能分类

1. 网络层次（服务器 带宽）

2. 页面优化，减少http请求次数 --精灵图、字体图标、文件代码css文件，js文件做合并、懒加载（瀑布流的情况，手机端特别常见）、对首屏加载没有直接影响的js文件放在网页下面

3. 代码层面
   js方面： 循环做降纬，循环尽量不要超过2，3层（递归也是；谨慎使用闭包；少使用全局变量（将全局变量变为局部变量

   css方面： 通配符，标签选器，标签 .类名，class，id，性能依次更好

如何进行Web性能优化

1. 了解性能指标
2. 专业可量化工具
3. 从网页响应的声明周期，分析出造成性能较差的原因
4. 技术改造，可行性分析等具体优化措施
5. 迭代优化

web性能报告

Lighthouse插件（chrome浏览器自带），用于分析web性能 Lighthouse的优化建议：

1. 移除阻塞渲染的资源 常见白屏原因：javascript或css文件没有请求回来导致的 处理的办法：1.将网络cdn资源下载到本地，虽然可能会造成资源打包体积变大，但是避免了cdn的资源失效导致网站不能访问的情况。
2. 预连接需要请求的资源
3. 降低服务端的响应时间
4. 适当调整图片的大小
   适当压缩图片，可以使用字体图标，精灵图

诊断结果建议：

1. 对静态资源文件使用高效的缓存策略
2. 减少主线程的工作
3. 减少http请求数

浏览器缓存策略

强缓存

只要资源不过期，就不向服务器发送请求 设置HTTP Header的Expires和Cache-Control来控制 Cache-Control 的优先级要高于 Expires。 Expries存在客户端时间和服务端不一致造成缓存失效的情况

协商缓存

会先向服务器发送请求，判断资源是否过期 通过http 头信息中的 Etag 和 Last-Modified 属性来控制 当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。

精炼js代码

• 减少业务复杂度
• 优化算法

面试题-浏览器输入url后，到页面渲染出来，发生了什么

1. 解析url
2. 缓存判断
3. DNS解析
4. 获取MAC地址
5. TCP三次握手
6. HTTPS握手
7. 返回数据 ---html文件
8. 页面渲染
9. TCP四次挥手

性能优化：

1. 发送请求前，对前端交互进行优化
2. 接收到数据前，服务端的性能优化
3. 接收到数据后，渲染数据可以分页渲染。