1 清除不必要的资源 避免进行不必要的下载

站点应当定期审核网页上的资源是否是必需的 并评估该资源的价值与性能影响。网页中往往会包含一些冗余资源 影响网页性能的同时还无法给网页带来价值 可以考虑清除不必要的资源 避免不必要的资源下载带来性能上的消耗。

清除阻塞渲染的JS和CSS

如果要以最快速度完成首屏渲染 需要最大限度地减少网页上关键JS/CSS子资源的数量 并尽可能清除这些资源 最大限度地减少下载量。

2 使用代码拆分减少JS负载

有的网站可能将所有的JS组合成一个大型的组合包 以这种方式加载的话页面性能会受到影响。长时间运行的JS可能会阻塞主线程 这时可以考虑使用requestAnimationFrame() 或 requestIdleCallback() 来进行优化。

根据不同的业务需求 开发者可以将JS中首屏的关键代码拆分出来 这样可以提前加载执行首屏中必需的少量JS代码 从而缩短页面的加载时间 其余的可以按需加载或者置后加载 同时建议开发者将JS优先放在首屏渲染完成之后 放在body闭标签前面。

3 优化阻塞渲染的JS

JS允许我们修改网页的同时也会阻止DOM构建 阻塞网页渲染。默认情况下 JS的执行会阻塞内核渲染：无论我们使用外链还是内嵌JS 当遇到文档中的JS脚本时 它将暂停 DOM 构建 将控制权移交给 JS 脚本执行完毕后再继续构建 DOM 处理剩余的HTML文档。如果是外链JS文件 浏览内核需停下来 等待从磁盘 缓存或远程服务器中获取JS脚本 这就可能给关键渲染路径增加数十到数百毫秒的延迟。

为了实现最佳性能 可以让页面的JS进行异步执行 建议优先考虑使用defer的方式 其次是async方式 并去除关键渲染路径中任何不必要的JS。

优化JS的使用方式 优先使用异步JS资源

默认情况下 JS资源会阻塞解析 强制等待CSSOM并暂停DOM的构建 继而大大延迟首屏渲染的时间。异步JS资源则不会阻塞文档解析器 如果脚本可以使用defer/async 属性 也就意味着它并非是首屏渲染所必需的 可以考虑在首屏渲染后异步加载脚本。

延迟解析加载JS

为了最大限度减少内核渲染网页的工作量 建议开发者延迟所有非必需的 对构建首屏渲染无关紧要的JS脚本 将JS优先放在body闭标签处。

避免长时间运行的JS

运行时间长的JS会阻塞构建 DOM CSSOM以及网页的渲染 所以任何对首屏渲染无关紧要的初始化逻辑和功能都应延后执行。如果需要运行较长的初始化序列 请考虑将它们拆分为若干个阶段 以便浏览内核可以间隔处理其它的渲染任务。

4 优化阻塞渲染的CSS

默认情况下 关键CSS子资源是会阻塞内核渲染的 请务必精简网页的CSS资源 同时需要将CSS尽快地完成下载 关键CSS子资源优先放在head标签内 以便缩短首屏渲染的时间。

优化CSS的使用方式

CSS是构建渲染树的必备元素 首次构建网页时 确保将任何非必需的CSS资源都标记为非关键资源(比如print) 并应确保尽可能减少关键CSS子资源的数量。

将关键CSS放在文档head标签内

尽早在HTML文档内指定所有必需的关键CSS资源 以便浏览内核尽早发现link标记并发出CSS请求下载。

避免使用CSS import指令

一个样式表可以使用CSS import指令从另一个样式表文件导入规则。不过应避免使用这些指令 因为它们会在关键路径中增加往返次数从而影响首屏渲染性能。

Tags：网站优化