web性能优化

90 阅读7分钟

Web性能优化 (用户感知到的网站加载飞快)

1.DNS查询 2.发起http请求, 本质底层是TCP连接。 连接复用(keep-alive):多个连接可以共用一个TCP连接。 3.服务器收到请求之后去查询数据库,sql可以进行优化, 如何知道一个网站是sql查询太慢? 打开开发者工具 ——> waterfall ——> waiting的时间就是等待后端返回的时间, 也就是后端处理的时间

  1. 返回了之后 时间 = 下载量 / 下载速度

下载量是服务器返回的比如html css等数据的大小,可以通过压缩的的方式。 在后台开启gzip,搜索nginx开启gzip 在Response Headers中配置Content-Encoding: gzip。 浏览器下载的就是一个压缩包,下载下来之后会自动解压

下载速度 是用户的带宽和服务器的带宽 用户的管不了,但是可以通过提高服务器的带宽(花钱!)

  1. 下载之后 浏览器下载了html文件之后 就要开始展示html css

  2. css文件 优化css: 重复的选择器,重复的属性合并等

  3. 先加载css再加载js, 因为用户是先看等页面出来之后才会进行点击等操作

  4. 懒加载:一开始只加载第一屏

  5. 预加载:提前加载好下一页的内容,那么用户在点下一页的时候就可以秒开

  6. 缓存

  7. DNS缓存, 浏览器会做缓存,一段时间内请求过某个网站 浏览器会记住他的ip

  8. http缓存, css js img 加http缓存,那么再次请求的时候 就会直接读浏览器缓存下的内容, html是永远不能缓存的,不然就没有机会更新新的css,js文件了 每次发布的时候 更新一下css js的地址, 一般用MD5可以计算出内容的一个版本号,然后用这个版本号去做为文件的地址 强缓存:cache-control: max-age=3600

    弱缓存: 浏览器在请求一个文件的时候 将这个文件的版本号也带上一起发给服务器,服务器发现这个版本号与自己的一致的时候,就返回一个304回去,告诉浏览器你的内容 跟我的一致的,你不需要跟我请求新的内容了,告诉浏览器不用下载了,已经下载过了。

  9. 多个请求 浏览器限制了每个域名 同时最多只能发x个请求 那么这里的优化手段是,可以加域名,比如a域名请求html, b域名请求css, c域名请求js,d域名请求图片。这种用来加速的域名:CDN域名。 这样可以一次性发出很多个请求,节约时间。 并发量变大! 加域名又会增大DNS的时间,所以这里需要做一下权衡。一般DNS都很快,所以不会增加多少时间。

    分了域名之后还有个优点: 可以实现cookie-free。 cookie跟着主域名走,那么所有的css js 都可以无cookie 比如CDN域名下 就可以不需要种cookie了,这样请求的时候就不会带上cookie了

用户从浏览器地址栏中输入地址之后按回车,这之间经历了什么?

  1. 查缓存 用户按了回车之后,先看是否有缓存
  2. 无缓存的,就去请求

请求资源的过程:

  1. DNS查询
  2. 建立TCP连接
  3. 发送http请求
  4. 后台处理 (这里前端在等待)
  5. 接收响应
  6. 接收完成, 得到一个html文件
  7. 浏览器开始解析这个html文件
  8. 解析过程中首先查看html文件中的DOCTYPE, 根据DOCTYPE 这样浏览器就知道是用html5 还是xml
  9. 接着开始逐行解析html,可以理解为阅读的意思,这里html是已经下载完了的
  10. 如果浏览器读到了一个

    标签,那么chrome不会立即渲染 但是IE会直接渲染这个标签 (这里w3c标准没有规定浏览器以何种顺序来渲染它),所以各种浏览器之间出现了不同的渲染方式 chrome会等所有的css都下载完毕了之后再去渲染标签。 //浏览器看到了css

  11. 看到css会同时下载css并继续往下解析看还有没有css,如果还有的话就继续下载css2,css3...(看浏览器限制),css的下载是可以同时进行的。
  12. css的解析是一个一个的进行的,第一个解析完了之后 才会进行第二个文件的解析。
  13. css下载是并行的,解析是串行的。

//浏览器看到了js

  1. 并行下载js, 串行解析js

  2. css渲染的时候 chrome会阻塞html的渲染,IE等不一定会, js解析执行的时候是一定会阻塞html的渲染。 chrome中是一定会等所有的css下载并解析完之后才会渲染html标签


web性能优化对策

  1. DNS查询的优化: 可以减少DNS的查询,一个域名就要查询一次,所有尽量减少域名就可以减少查询
  2. TCP连接复用: 在http协议中加上一个请求头: keep-alive,那么第一次请求的时候连接了之后,第二次请求就可以复用上一次的了。http2.0版本的复用率更高,多路复用
  3. 发送请求: 减少cookie体积,每个请求都会带上cookie, 使用缓存 cache-control
  4. 可以同时发送多个http请求,浏览器会自己处理, 但是同时发送的也有上限。浏览器对于相同域名同时发送的请求数量有限制,那么可以通过增加多个域名来增加这个上限。 比如a域名上限是5个,那么再增加一个b域名,那么一次就可以发送10个请求了

但是这个就跟第1点有矛盾了,所以需要进行权衡一下: 如果文件很少的话, 那么就最好放在一个域名下,不需要增加多域名, 但是如果文件非常多的话,建议还是增加域名,虽然DNS的查询时间增大了,但是请求时间减少了。

  1. 接收响应的过程: ETag: 304———— 请求了 但是服务器发现 请求的内容没有变化,就会告知客户端直接用本地的缓存就行,不需要下载了,所以响应只会返回一个304状态码 GZip: 用Gzip压缩,那么传输的文件体积大大缩小,浏览器会自动解压

  2. 解析html的过程

    1. DOCTYPE 不要写错,也不能不写
    2. 尽量减少标签,使用语义化准确的标签
  3. 为什么使用CDN? ----内容分发网络(content delivery network)

  4. 增大并发数量,可以增多同时下载的数量

  5. 如果服务器离用户很远的话,下载速度会变慢,比如服务器在美国,北京的用户去访问的话,耗费的时间就会很长,如果将美国的服务器上的内容复制一份到北京的服务器上,那么耗费的时间就可以减少很多。 动态DNS: 同样访问google.com, DNS查询的时候,可以给你返回一个北京的ip,也可以返回一个美国的IP,根据用户所处的位置,可以返回不同的IP,这个是可控制的。

所以把相同的内容分发到各个不同地方的服务器上,这样就近的用户就可以向离他最近的服务器发送请求

  1. 把css放head中 js放body最后 应该把阻塞渲染的放在后面

测试一个网站的优化结果 chrome的开发者工具