01

减少请求数量

减少页面中请求的资源数量可以有效地降低页面加载时间，常用的方法包括文件合并、使用雪碧图(CSS精灵技术),使用Base64等技术对图片进行优化等。

文件合并可以将多个文件合并成一个文件，减少请求次数，但是需要注意文件合并也有自己的问题，如首屏渲染问题和缓存失效问题。

使用雪碧图可以将多张图片合并为一张，减少请求次数

02

减少资源大小

资源的大小对页面加载时间也有很大的影响，可以通过压缩图片、压缩代码等方式来减小资源的大小。压缩图片可以使用在线工具或者图片压缩库来实现，压缩代码可以使用压缩工具、

去除注释和空格等方式来实现,也可以使用适当的图片格式：对于相同的图片，不同的图片格式占用的体积是不同的。例如，对于简单的图标，可以使用SVG格式，对于照片等复杂的图片，可以使用JPEG或WEBP格式

03

优化网络连接

网络连接的质量和速度对页面加载时间也有很大的影响，可以通过使用CDN、使用预加载等方式来优化网络连接。

CDN可以将资源分发到全球各地的服务器上，提高资源的访问速度；预加载可以在页面加载完成后，提前加载一些需要使用的资源，减少请求的等待时间

04

优化资源加载

资源的加载方式也会影响页面的加载时间，可以通过异步加载、懒加载等方式来优化资源加载。

异步加载可以将一些不必要的资源延迟加载，提高页面的加载速度；懒加载可以将一些图片、视频等资源延迟加载，只在需要时再加载，减少页面的加载时间

05

减少重绘与回流

重绘和回流是浏览器渲染页面时的两个重要步骤，它们会影响页面的性能。

可以通过减少DOM操作、减少页面元素数量、精简HTML代码、减少DOM操作、避免多次重绘和回流、使用CSS3动画等方式来减少重绘回流,延迟加载等优化手段可以显著提高页面的加载速度。

06

使用性能更好的API

JavaScript提供了很多API，有些API的性能比较差，可以使用性能更好的API来替换。

例如使用document.querySelector代替document.getElementById

07

构建优化

构建性能主要指构建速度，可以通过使用构建工具、缓存构建结果等方式来优化构建性能

08

缓存

通过设置缓存控制头信息，使用浏览器缓存和HTTP缓存等技术可以减少网络带宽消耗，提高页面的响应速度和用户体验

09

使用cdn

使用CDN可以将静态资源分布在多个服务器上，更快速地响应用户的请求，并降低服务器的负载

10

web前端框架优化

选择一个性能高效且轻量级的Web前端框架，提高页面的加载速度和响应速度

11

服务器优化

在服务器端优化中使用缓存机制、优化数据库查询、压缩服务器响应等手段减少服务端的负载，提升应用性能

12

前置加载和懒加载

前置加载技术使用预加载等技术来提前加载下一个页面或用户可能需要的资源，以提高网站速度和性能。 

Lazy loading技术可以将页面上的图片或其他资源推迟到页面完全加载后再加载，以减少加载时间和带宽

13

优化CSS和JS

优化CSS和JS代码可以提高网站的性能。以下是一些优化技术的示例：

• 压缩CSS和JS代码

• 删除注释和无用代码

• 合并重复的CSS和JS代码

• 减小CSS和JS文件的大小

以上就是前端性能一些常见的优化手段,主要是通过大小和速度去优化,在前端面试的时候,基本上是一个面试必问的话题,在个人简历当中,如果比较熟悉,也可以写上去的

JS篇面试题16-Es6中的事件扩展符在什么场景下使用

2023-03-10

框架篇-面试题6-说一下Vue2与Vue3的钩子函数

2023-03-09

一文了解互联网中的运营

2023-03-03

从改简历到面试需要知道的

2023-03-02

入职前-求职者一定要提前了解的问题

2023-03-01

被面试官问到频繁跳槽,求职者应该怎么回

2023-02-28

针对面试官的盘问-如何回答职场中的一些问题

2023-02-26

一文了解互联网中的UI设计师

2023-02-25

点击左下角查看更多