Skip to content

Latest commit

 

History

History
80 lines (54 loc) · 2.68 KB

performance.md

File metadata and controls

80 lines (54 loc) · 2.68 KB

web 性能优化

代码优化

  1. css
  • css 合并，尽量减少 HTTP 请求（code splitting 除外）
  • css 压缩
  • 将 css 文件放在页面最上面
  • 选择器优化嵌套，尽量避免层级过深
  • 充分利用 css 继承属性，减少代码量，如 font、color、line-height
  • 抽象提取公共样式，区分公共 CSS 和 业务 CSS，减少代码量
  • 使用伪元素，如::before，::after
  • css 雪碧图
  1. html
  • 简化 html 结构，尽量避免层级过深
  • 标签语义化，用正确的标签做正确的事情
  1. javascript
  • 将脚本放到页面底部
  • 删除不必要的代码，如不必要的 console、注释等
  • 减少 dom 访问，可以使用 innerHTML 代替
  • 少用全局变量
  • 压缩代码
  1. 图片
  • CSS3 模拟图像，图标 base64
  • 图片压缩，使用合理大小的图片

网络相关

  1. dns 预解析

    <link rel="dns-prefetch" href="xxx.com">

  2. HTTP 缓存

    • Cache-control 强制缓存: [private\public\no-cache\max-age=xxx\no-store]
      • 控制缓存时间，http1.1
    • Expires 强制缓存
      • 和 max-age=xxx 类似,http1.0
    • Last-Modified / If-Modified-Since 协商缓存
      • Last-Modified：服务器在响应请求时，告诉浏览器资源的最后修改时间
      • If-Modified-Since：再次请求服务器时，通过此字段通知服务器上次请求时，服务器收到请求后发现有头 If-Modified-Since 则与被请求资源的最后修改时间进行比对。
    • ETag 协商缓存
      • 比较 Etag，级别比 Last-Modified 高

  3. 域名拆分

    HTTP 客户端一般对同一个服务器的 HTTP 并发连接个数都是有限制的，chrome 4+为 6 个。 域名拆分主要是为了增加浏览器下载的并行度，让浏览器能同时发起更多的请求。 域名拆分为 3 到 5 个比较合适，过多的域名会带来 DNS 解析时间的损耗，可能会降低性能

  4. 使用 CDN 加速（访问最近服务器）

  5. 开启 KeepAlive

    开启 KeepAlive 能够减少浏览器与服务器建立连接的次数，从而节省建立连接时间。

  6. localStorage 本地存储

  7. 开启 Gzip

    Gzip 是一种压缩技术，可以将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这种方式会降低传输大小，提高网页加载性能。可以通过 Nginx 配置。

  8. 合并请求

    合并请求的主要目的是减少浏览器对服务器发起的请求数，从而减少在发起请求过程中花费的时间。

webview

https://tech.meituan.com/2017/06/09/webviewperf.html

最后

终极优化清单：http://cdn.inoongt.tech/images/thinkin/optimization.png