web优化

目录

减少使用location.reload
去掉你代码里的 document.write

1减少使用location.reload()

• 使用location.reload() 会刷新页面，刷新页面时页面所有资源（css，js，img等）会重新请求服务器。
  建议使用location.href=”当前页url” 代替location.reload()

2去掉代码document.write

去掉你代码里的 document.write-[cnblogs紫云飞]

document.write 输出一个 script 标签的情况，比如：

<script src="a.js"></script>
<script>
document.write('<script src="http://thirdparty.com/b.js"><\/script>')
</script>
<script src="c.js"></script>

这个例子中，由于 b.js 是通过 JS 代码插入的，HTML 预解析器是看不到的，所以只有当 a.js 下载并执行完毕，且第二个内联的 script 执行完毕后，b.js 才会开始下载，也就是说，b.js 不能和 a.js 及 c.js 并行下载了，从而导致页面展现变慢，同样假设每个文件的下载时间都是 1 秒，那么这三个文件下载执行完就需要两秒，就因为 b.js 不能预加载。在一个外链的 JS 文件比如 a.js 中执行 document.write("<script...) 也是类似的效果。

3网页加载块-各年度总结

云音乐2023年报前端大揭秘 - 云音乐技术团队的文章 - 知乎

GSAP-动效库

• 在渲染/绘制阶段，可以隔离状态变化频繁的组件，减少无效状态引起的绘制。尽量选择由 GPU 渲染的 CSS3 来实现动效。逻辑实现的动效建议使用GSAP。
• 在 DOM / CSSDOM 解析阶段，可以减少 DOM 的嵌套深度，减少使用 JavaScript 直接修改元素样式，减少不必要的 CSS，减少使用 CSS 选择器等。
• 在 HTML / JS / CSS 加载解析阶段，可以通过构件工具对文件进行压缩。利用离线包能力，将这些资源提前下载到本地。