Skip to content

Latest commit

 

History

History
153 lines (141 loc) · 5.64 KB

汇总.md

File metadata and controls

153 lines (141 loc) · 5.64 KB

汇总

1.基本优化

1.1 页面内容

  1. 减少DOM元素数量
    • 不使用表格布局：因为标签多、易重排
    • 善用语义化标签 <details><summary>Details</summary>Something small enough to escape casual notice.</details>
    • 善用伪元素
  2. 尽量减少iframe的使用
    • 优点：加载第三方资源、可并行下载脚本
    • 缺点：加载代价高、阻塞页面
  3. 减少http请求
    • 合并文件
    • 雪碧图
    • 行内图片（base64图片）
    • 图标字体
  4. 避免404
  5. 避免图片src为空：浏览器仍然会向服务器发起一个HTTP请求
  6. 避免重定向：重定时内页面空白，会影响用户体验
    • 301 / 302
    • window.location.href
    • <meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">
  7. 减少DNS查询
    • 减少主机名 = 减少并行下载数量
    • 减少并行下载数据 = 增加相应时间
    • 折中方案：一般设置2-4个主机名
  8. 划分内容到不同域名：增加并发下载数量
  9. 缓存Ajax请求
  10. 延迟加载
    • 非首屏数据、样式、脚本、图片
    • 交互时才显示的内容
  11. 预加载
    • 无条件预加载：页面load后，立马获取其他资源
    • 有条件预加载：根据用户的行为来加载可能用到的资源

1.2 服务器

  1. 使用CDN：减少资源下载时间
  2. 启用Gzip
  3. 添加Expires或Cache-Control响应头（Last-Modified/If-Modified-Since）
  4. 配置 Etag（Etag/If-None-Match）
  5. Ajax请求使用GET方法：POST请求时分成两步，先发送Http Header，再发送data。而GET只使用一个TCP数据包（Http Header与data）发送数据

1.3 Cookie

  1. 减少cookie大小
    • 去除不必要的 Cookie
    • 尽量压缩 Cookie 大小
    • 设置合适的过期时间
  2. 静态资源使用无Cookie域名

1.4 CSS

  1. 样式放头部：尽早呈现视觉反馈

1.5 Javasript

  1. 把脚本放在页面底部
    • defer
    • async
  2. 使用外部JavaScript和CSS
  3. 压缩JavaScript和CSS
  4. 移除重复脚本
  5. 减少DOM操作：JavaScript 操作 DOM 很慢，尤其是 DOM 节点很多时
    • 缓存已经访问过的元素
    • 使用DocumentFragment暂存DOM，整理好以后再插入DOM树
    • 操作className，而不是多次读写style
    • 避免使用JavaScript修复布局
  6. 使用高效的事件处理
    • 使用事件委托
    • 尽早处理事件，在DOMContentLoaded即可进行，不用等到load以后

1.6 图片

  1. 压缩图片大小
  2. 图片格式
    • 雪碧图
    • webp格式
    • 图标字体
    • 行内图片（base64）
  3. 使用适当大小的图片
  4. 使用体积小、可缓存的favicon.ico：Favicon.ico一般存放在网站根目录下，无论是否在页面中设置，浏览器都会尝试请求这个文件
    • 存在（避免 404）
    • 尽量小，最好小于 1K
    • 设置较长的过期时间

2.编程优化

2.1 html

  1. script
    • defer：异步下载，DOMContentLoaded前顺序执行
    • async：异步下载，下载完乱序执行
  2. link
    • preload：提高加载优先级 <link rel="preload" href="style.css" as="style"> || <link rel="preload" href="main.js" as="script">
    • prefetch：浏览器空闲时间加载
    • prerender：指定加载一个页面的所有资源 <link rel="prerender" href="/result.html"/>
    • dns-prefetch：dns预解析<link rel="dns-prefetch" href="//www.xx.com">
  3. img
    • srcset：根据dpr来匹配不同分辨率的图片
  4. mate
    • x-dns-prefetch-control：浏览器空闲时间将dns预解析（<meta http-equiv="x-dns-prefetch-control" content="on">）

2.2 css

  1. 优化css选择器
  2. 动画
    • 脱离文档流布局
    • css3硬件加速：opacity、translate3d

2.3 javascript

  1. 骨架屏
    • Base64图片
    • css占位
    • 第三方插件：react-content-loader
  2. 懒加载：不重要部分延迟渲染
    • ajax请求渲染
    • setTimeout渲染
  3. requestAnimationFrame分片执行
  4. web worker多线程
  5. service worker
    • 后台消息传递
    • 网络代理，转发请求，伪造响应
    • 离线缓存
    • 消息推送
  6. 算法时间复杂度优化

3.单页应用优化

  1. 使用文件hash让缓存最大化
  2. 合理的分包策略：基础库、公共模块
  3. 路由按需加载
    • react-loadable（React16.6以前）
    • react.lazy + react.Suspense（React16.6以以后）
  4. 组建按需加载
    • react-loadable（React16.6以前）
    • react.lazy + react.Suspense（React16.6以以后）
  5. 组建预加载：例如图表组建，假如按需加载则有个时间差，可以鼠标移动到元素时开始预加载
  6. 优先渲染骨架（antd 内置的骨架图Skeleton方案）
  7. 服务器渲染

4.webpack优化

  1. 缩小文件范围
    • test、include、exclude
    • resolve.modules：去哪些目录下寻找第三方模块（node_modules）
    • module.noParse：忽略对部分没采用模块化的文件的递归解析处理（例如：jquery）
  2. DllPlugin：一些第三方不常变动的库编译一次即可（例如：react、react-dom）
  3. HappyPack：多进程处理打包
  4. js压缩：可开启多进程和缓存（ParallelUglifyPlugin || TerserJSPlugin）
  5. 区分环境（压缩文件、去除日志、接口环境等）
  6. css压缩
  7. 文件hash和资源文件指向CDN服务器
  8. Tree Shaking
  9. 提取公共代码
  10. 分割代码按需加载
  11. 作用域提升（Scope Hoisting）
  12. 输出分析

参考