1.7、避免使用iframe

iframe 相当于本页面又嵌套了一个页面，消耗性能，还要加载嵌套页面的资源，所以更消耗时间。

1.8、借用浏览器缓存

ajax 请求到的数据，可以缓存到浏览器，下次使用的时候无需再次获取，直接取缓存数据就可以。这个会根据具体的项目来做，比如常用的角色类型就会缓存，获取到的普通数据为了保证实时性，不能使用缓存。

二、静态资源优化

2.1、压缩 html、css、js 等文件

删除不必要的空格、注释和中行，减少文件大小，显著减少用户下载时间，加快网页加载速度。可以直接使用压缩工具，可以自动删除所有不必要内容。

2.2、在 js 之前引用 css

这是一个小细节，js 执行的时候会进入阻塞，如果放入 js 之后加载，会等待 js 执行完成之后才能加载 css，渲染页面，此时就会出现布局错乱。所以 css 文件需要非阻塞引入，以防DOM 花费更多时间才能渲染。

2.3、非阻塞 js

js 会阻止 html 文档的正常解析，当解析器到达 script 标记时，它会停止解析并执行脚本。所以我们经常把 script 引入的 js，放到 html 中最底下。如果需要让脚本位于页面顶部，建议添加非阻塞属性。经常使用 defer 和 async 来异步加载js文件。

2.4、图片压缩

最常见的就是 css 雪碧，就是将很多很多的小图标放在一张图片上，就称为雪碧图。雪碧图最大优点就是可以减少http请求，除此也能压缩图片文件大小。使用的时候，通过设置 background-position ，移动图片的位置。除此之外，网站用到的大图，也需要在保证图片质量前提下优化到最小。

2.5、矢量图替代位图

矢量图（SVG）往往比图像小很多，缩放的时候不失真，这些图像还可以通过 css 进行动画和修改，比位图方便控制。可以的话，尽量用矢量图多点。

2.6、js代码相关优化

尽量减少使用闭包，因为闭包所在的上下文不会被释放。

js避免嵌套循环和死循环，一旦遇到死循环，浏览器会卡死。

在js封装过程中，尽量做到低耦合高内聚。减少页面的冗余代码。

尽量减少递归，避免死递归。

尽量使用window.requestAnimationFrame替代传统的定时器。

三、页面渲染速度

3.1、懒加载

素材类的网站，页面一屏展示很多图片，而且图片还不能失真，图片加载太多，网页加载慢得很，所以就引用懒加载，只加载可视区的图片，避免加载可以能不需要或不必要的图像。改善页面的响应时间。

3.2、避免响应式布局

响应式网站虽然能够兼容所有终端设备，但是会出现隐藏部分无用内容，浪费带宽，加载时间还长，页面的渲染时间也长。想更多了解响应式布局，请点击《前端响应式布局为什么是个坑？》。

3.3、设置大小，避免重绘

遇到 img 标签，会立马发送一个 http 请求，下载图片，页面继续向下渲染，等图片加载成功了，发现图片的宽高大小发生变化，影响后边排版，所以页面会重新再绘制一次这部分。所以尽可能设置图片的大小。

3.4、减少DOM元素

解析 html 内容，将标签转化为DOM节点，之后再解析其他文件，DOM元素越少，也就是标签越少，文件转化得越快，加载速度也就快了。

3.5、减少 Flash 的使用

flash 文件比较大，加载起来耗时。除此，flash 插件还需要运行才能运行，最主要有些浏览器flash插件马上要下线了，建议尽量不用 flash。

3.6、文件顺序

css文件放在最顶部，优先渲染。js放在最底部，避免阻塞。 让网页如何加载更快，有好多的细节，还是要好好提升自己的技能~~~~~~~~~

点个关注！更多分享内容。 自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

前端校招精编面试解析大全点击这里免费获取完整版pdf查看

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-tl4HjkMn-1713722178010)]

前端校招精编面试解析大全点击这里免费获取完整版pdf查看