html优化

  • 避免 HTML 中书写 CSS 代码，因为这样难以维护。
  • 使用 Viewport 加速页面的渲染。
  • 使用语义化标签，减少 CSS 代码，增加可读性和 SEO。
  • 减少标签的使用，DOM 解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。
  • 避免 src、href 等的值为空，因为即时它们为空，浏览器也会发起 HTTP 请求。
  • 减少 DNS 查询的次数

css优化

  • 优化选择器路径：使用 .c {} 而不是 .a .b .c {}。
  • 选择器合并：共同的属性内容提起出来，压缩空间和资源开销。
  • 精准样式：使用 padding-left: 10px 而不是 padding: 0 0 0 10px。
  • 雪碧图：将小的图标合并到一张图中，这样所有的图片只需要请求一次。
  • 避免通配符：.a .b {} 这样的选择器，根据从右到左的解析顺序在解析过程中遇到通配符 {} 6、会遍历整个 DOM，性能大大损耗。
  • 少用 float：float 在渲染时计算量比较大，可以使用 flex 布局。
  • 为 0 值去单位：增加兼容性。
  • 压缩文件大小，减少资源下载负担。

javascript优化

  • 尽可能把 <script> 标签放在 body 之后，避免 JS 的执行卡住 DOM 的渲染，最大程度保证页面尽快地展示出来
  • 尽可能合并 JS 代码：提取公共方法，进行面向对象设计等……
  • CSS 能做的事情，尽量不用 JS 来做，毕竟 JS 的解析执行比较粗暴，而 CSS 效率更高。
  • 尽可能逐条操作 DOM，并预定好 CSs 样式，从而减少 reflow 或者 repaint 的次数。
  • 尽可能少地创建 DOM，而是在 HTML 和 CSS 中使用 display: none 来隐藏，按需显示。
  • 压缩文件大小，减少资源下载负担。

网络相关

  • DNS 预解析
    <link rel="dns-prefetch" href="//host_name_to_prefetch.com" />
  • 缓存（见上文浏览器缓存机制）
  • 使用 HTTP / 2.0
  • 预加载: 指明哪些资源是在页面加载完成后即刻需要的
    <link rel="preload" href="fonts/cicle_fina-webfont.woff" />
  • 预加载: 浏览器空闲时加载，这些资源权重比preload低
    <link rel="prefetch" href="fonts/cicle_fina-webfont.woff" />
  • 预渲染: 告诉浏览器我即将跳转到这个URL， 浏览器可以提前解析
    <link rel="prerender" href="http://example.com" />

优化渲染过程

  • 代码层面的优化（参考浏览器篇如何减少重绘和回流）
  • 懒执行 —— 将某些逻辑放到使用时再进行，可以通过定时器或事件进行唤醒
  • 懒加载 —— 将不关键的资源延后加载，如图片、视频资源等。

文件优化

图片优化：

可以用 css 模拟代替的尽量不要用图片
小图片用 base64 格式
雪碧图
选择正确的图片格式

选择使用 WebP 格式，体积较小，缺点是兼容性不好
小图使用 PNG ，图标类可以使用 SVG 代替
照片使用 JPEG

其他文件优化：

CSS 文件放在 head 中
服务端开启文件压缩功能
将 script 标签放在 body 底部，因为 JS 文件执行会阻塞渲染。
script 文件异步加载

defer：在 script 标签上加上 defer 属性，defer 是在 HTML 解析完之后才会执行，如果是多个，按照加载的顺序依次执行
async：在 script 标签上加上 async 属性，async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

对于需要很多时间计算的代码可以考虑使用 Webworker，Webworker 可以让我们另开一个线程执行脚本而不影响渲染。

使用CDN

使用 Webpack 优化项目：

对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
开启 tree shaking，移除没有用的代码
优化图片，对于小图可以使用 base64 的方式写入文件中
按照路由拆分代码，实现按需加载
给打包出来的文件名添加哈希，实现浏览器缓存文件

首屏加载优化有哪些方案么

Vue-Router路由懒加载（利用Webpack的代码切割）
使用CDN加速，将通用的库从vendor进行抽离
Nginx的gzip压缩
Vue异步组件
服务端渲染SSR
如果使用了一些UI库，采用按需加载
Webpack开启gzip压缩
如果首屏为登录页，可以做成多入口
Service Worker缓存文件处理
使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）