web性能优化

有服务器,有网站才能做性能优化,需要改网站的后台代码

什么是web性能优化?

用户觉得网站加载快

与前端有关的阶段

用户按下回车之后=>

1. 查看缓存

2. DNS 查询

3. 建立tcp链接

4. 发送HTTP请求 ETag

   后台处理 等

5. 接受相应

6. 接收完成 --> HTML

7. DOCTYPE --> html/xml

8. 逐行解析(阅读)

9. 看到<h1>标签

   显示(IE,直接渲染,css加载后如果有样式更改再渲染该元素一次)

   不显示(chrome,等待所有css下载完毕再渲染)

10. 看到css

    |__下载css
    |__往下看还有没有css
        |__下载css
        |__往下看还有没有css
    ... ...
    //  浏览器同时下载css个数:
    
    IE6：2个；IE7：4个；IE8+：6个 FireFox，Chrome：6个。

11. 看JS

    跟css一样 下载并行,解析串行

    css会阻塞html吗? 可能会

    js会阻塞html吗? 一定会, 必须执行完js后才能看后面的标签

逐项优化

2. DNS 查询

   • 减少dns查询,也就是尽量减少域名

3. 建立TCP链接

   • 利用TCP协议里的连接复用和http/2.0的多路复用

4. 发送HTTP请求

   • 减少cookie体积

   • 使用CacheControl

   • 打包js

   • 同时发送多个请求 (相同域名有数量限制,可以增加域名.这与之前DNS查询里说的减少域名冲突. 权衡 文件多才增加域名数)

5. 接受相应

   • 使用ETag 服务器如果发现浏览器中的文件已经是最新的,就只响应一个304,浏览器直接复用本地文件. ETag和缓存不同,缓存不发请求,ETag只响应304

   • 使用Gzip压缩
     命令行

      Gzip 1.txt
     

     缺点,耗费浏览器性能

6. 接收完成 --> HTML

7. DOCTYPE

   不能写错,不能不写

8. js/css

   • 使用CDN
     Content Delivery Network内容分发网络
     css放在Header里,js放在body后

   • Gzip

* 增加域名并发请求

* css放Header(尽早下载),js放body最后(尽早显示页面,获取节点)