Skip to content

Latest commit

 

History

History
90 lines (63 loc) · 4.73 KB

性能优化.md

File metadata and controls

90 lines (63 loc) · 4.73 KB
Raw

首屏优化

一般来说，SPA应用首屏渲染的时间等于 html + css + js加载并解析的时间，在此之前，页面将会表现为空包状态 所以可以在加载 css + js之前，在 html模板中加入 loading，可以自己写一个简单的 loading，也可以选择使用现有的插件，例如 prerender-spa-plugin。

动态 polyfill

一般 es2015+的网站都需要引入 polyfill，polyfill文件往往体积较大，可能包含大量无需用到的代码，并且有些版本较新的浏览器是不需要 polyfill的，特别是移动端。

对此，可以根据当前浏览器的支持程度动态引入所需的 polyfill，polyfill.io就是一个支持动态引入 polyfill的网站，保证只有在需要时，才会引入 polyfill

具体的使用方法非常简单，只需要外链一个 js：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

当然这样是加载全部的 polyfill，实际上你可能并不需要这么多，比如你只需要 Map/Set 的话：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set"></script>

上述 js文件的内容会依照当前发起请求浏览器种类和版本的不同而不同，例如，对于最新版的 Chrome，文件内容几乎为空，而如果使用一个老旧的浏览器访问，则内容量将会大很多。

Code Splitting

参考链接：

动态 import

React Loadable 是一个专门用于动态 import 的 React 高阶组件，你可以把任何组件改写为支持动态 import 的形式。

import Loadable from 'react-loadable';
import Loading from './loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}

上面的代码在首次加载时，会先展示一个 <LoadableComponent />，然后动态加载 my-component 的代码，组件代码加载完毕之后，便会替换掉 <LoadableComponent />。

编译到 ES2015+ ，提升代码运行效率

对于 es6+代码构建的项目，一般会将其编译到 es5运行，但是目前支持 es6+的浏览器占据的份额越来越多，完全没必要让这部分的浏览器加载编译后的体积更大、运行速度更慢的 es5代码，我们需要做的，就是把代码编译到 ES2015+，然后为少数使用老旧浏览器的用户保留一个 ES5 标准的备胎即可

具体的解决方法就是 <script type="module"> 标签。

支持 <script type="module"> 的浏览器，必然支持下面的特性：

async/await
Promise
Class
箭头函数、Map/Set、fetch 等等...
而不支持 <script type="module"> 的老旧浏览器，会因为无法识别这个标签，而不去加载 ES2015+ 的代码。
另外老旧的浏览器同样无法识别 nomodule 熟悉，会自动忽略它，从而加载 ES5 标准的代码。

LazyLoad

  • 首先加载一张低像素的模糊图片，然后等真实图片加载完毕之后，再替换掉。
  • 使用一张默认图片占位，等图片进入可视区域内后，再开始加载真实图片，存在一些成熟的组件：

实际上目前几乎所有 lazyload 组件都不外乎以下两种原理：

  • 监听 window 对象或者父级对象的 scroll 事件，触发 load；
  • 获取元素的可见性，例如可以使用 Intersection Observer API

placeholder

我们在加载文本、图片的时候，经常出现“闪屏”的情况，比如图片或者文字还没有加载完毕，此时页面上对应的位置还是完全空着的，然后加载完毕，内容会突然撑开页面，导致“闪屏”的出现，造成不好的体验。

为了避免这种突然撑开的情况，我们要做的就是提前设置占位元素，也就是 placeholder： img

已经有一些现成的第三方组件可以用了：