如何优化前端性能（四）：优化资源加载

资源加载位置

通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使功能可用

1、CSS文件放在head中，先外链，后本页

2、JS文件放在body底部，先外链，后本页

3、处理页面、处理页面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件

4、body中间尽量不写style标签和script标签

资源加载时机

1、异步script标签

defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似

async: 异步加载，加载完成后立即执行

2、模块按需加载

在SPA等业务逻辑比较复杂的系统中，需要根据路由来加载当前页面需要的业务模块

按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载

webpack 提供了两个类似的技术，优先选择的方式是使用符合 ECMAScript 提案 的 import() 语法。第二种则是使用 webpack 特定的 require.ensure

3、使用资源预加载preload和资源预读取prefetch

preload让浏览器提前加载指定资源，需要执行时再执行，可以加速本页面的加载速度

prefetch告诉浏览器加载下一页面可能会用到的资源，可以加速下一个页面的加载速度

4、资源懒加载与资源预加载

资源延迟加载也称为懒加载，延迟加载资源或符合某些条件时才加载某些资源

资源预加载是提前加载用户所需的资源，**良好的用户体验

资源懒加载和资源预加载都是一种错峰操作，在浏览器忙碌的时候不做操作，浏览器空间时，再加载资源，优化了网络性能