今天看啥  ›  专栏  ›  miao8862

提升页面性能的方法有哪些?

miao8862  · 简书  ·  · 2021-04-23 10:39

资源压缩合并,减少http请求

  1. 网站的图片和内容太大,需要花费很多时间下载
    • 裁剪图片,缩小尺寸
    • 尽量使用JPEG或PNG格式,避免使用BMP和TIFF格式
    • 调整图片大小

非核心代码异步加载

  1. 异步加载的方式
    • 动态脚本加载:利用document.createElement创建script标签,然后添加到body上
    • defer
    • async
  2. 异步加载的区别
    在没有defer和async属性时,脚本会立即执行,所以建议一般把script标签放在body最后,而defer和async都会立即加载文件,但执行时间不同:
    • defer: 在HTML解析完成之后才会执行,如果是多个,会按照加载的顺序依次执行
    • async:是在加载完成之后立即执行,如果是多个,执行顺序和加载顺序无关
      defer和async的脚本,是在同步脚本之后才执行的

利用浏览器缓存

缓存的分类及原理

  1. 强缓存(在这个时间内,我都不会与服务器确认,直接使用浏览器缓存)
  • Expires Expires: Thu,21 Jan 2017 23:39:02 GMT(表示的是绝对时间,是服务器的绝对时间,可能和客户端时间不一致)
  • Cache-Control Cache-Control:max-age=3600(这个是相对时间,是相对于客户端时间的3600s)
    如果两者同时存在,则以cache-control为准
  1. 协商缓存
    1)利用上次修改时间来判断,由服务器传给客户端Last-Modified告知上次修改时间,由客户端询问服务器从If-Modified-Since时间起这个资源是否修改了,使用这两个属性有一个缺点,就是文件修改时间变了,但内容没变未识别出来
  • Last-Modified Last-Modified: Wed, 26 Jan 2017 00:35:11 GMT
  • If-Modified-Since
    2)使用哈希值,服务器结合last-modified和Etag,告诉客户端上次修改时间和文件标识;客户端使得If-Modified-Since和If-None-Match询问服务器从这个时间开始,这个文件是否有修改
  • Etag
  • If-None-Match

利用CDN(网络优化)

在互联网有一个“8秒原则”,如果一个页面超过8s未响应,那么大多用户都会直接放弃,无论这网站做得有多么好。
所以网络访问速度是很关键的。一般网络慢的原因:

  1. 共享主机服务器负荷过重,响应速度慢

  2. 网站服务器位置与你网络的访问者位于不同的地理位置
    CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,让用户就近获取所需内容,降低网络阻塞,提高用户访问响应速度和命中率。
    当用户使用很多个css、js、图片文件时,可以使用cdn来加快网络请求速度,尤其对第一次访问页面时,因为第一次访问页面,浏览器缓存是无法做到优化的。

预解析DNS

当使用http时,很多高级浏览器都默认打开dns-prefetch开关,但如果使用HTTPS请求,那么浏览器一般是默认关闭dns缓存的,这时候就需要加上meta这个标签将x-dns-prefetch-constrol这个打开的,表示强制给a标签打开dns-prefetch开关

  <meta http-equiv="x-dns-prefetch-constrol" content="on">
  <link rel="dns-prefetch" href="//host_name_to_prefetch.com">



原文地址:访问原文地址
快照地址: 访问文章快照