如何减少页面加载时间（前端性能优化）

关于优化都会问到的问题，总结了以下几个方法：

• 减少重复的HTTP请求

（1）减少调用其他页面、文件的数量，将多个小文件合并为一个大文件

（2）精灵图（sprite）

将需要频繁加载的多个图片合成为1个单独的图片，设为一个大背景，然后通过background-position属性来加载背景图，从而显示出我们想要显示出来的部分，图片加载的HTTP请求缩减为1个。

• 优化CSS

（1）压缩合并CSS样式。

把相同样式但不同类名使用同一个类名来架构，或把可以用简写来表示的CSS样式进行优化。

（2）使用预处理器

如Sass、LESS等，这样做也方便后期维护，代码更加规范。

（3）合理使用样式

如display、float、通用符等等，不正确的使用都会影响页面的渲染过程。

• 将CSS样式放在文件头部，将js脚本放在文件底部

• 所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染，如果这些 CSS 和 JS 需要加载和解析很久的话，那么会造成白屏现象，故将js文件放在底部，等HTML解析完了再加载js文件
• 将CSS样式放在文件头部，因为若先加载HTML再加载CSS，则用户第一时间看到的页面是没有样式的，是‘丑陋’的，而这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利，可以在网页逐步呈现的同时仍会保持格式信息，不影响网页美感。
• js文件也可以放在头部，只要给script标签加上async/defer属性就行了，异步下载，延迟执行。

• css、javascript改由外部调用

如果css、js内容比较庞大，尽量不要写到同1个页面中去，改由外部载入比较妥当，因为浏览器本身会对css、js文件进行缓存。

• 压缩文件

将js、css、图片等文件进行压缩，通过减少数据传输量从而减小传输时间，节省服务器网络带宽，提高前端性能。

• js、css文件中一般存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输。
• 优化图片文件，采用正确的大小和格式（JPEG、GIF或PNG），在保证质量的情况下进行压缩，尽可能减少文件的大小。
• Gzip是一个用于文件压缩的软件应用程序，它就像将你的网站放入一个zip文件中。现在大多数服务器和客户机都支持gzip。当一个兼容gzip的浏览器请求某个资源时，服务器可以在将响应发送到浏览器之前压缩响应。这可以显著减少网站上的时间延迟。

• 尽可能减少DOM元素

尽可能减少网页中各种<>元素数量

例如<table>的冗余很严重，而我们完全可以用<div>取代之。

• 避免使用CSS Expressions（CSS表达式）

有时为了要css的参数动态改变，可能会采用css expression来实现，但这样做得不偿失，expression 会反复执行，有严重的效率问题，会使用户端浏览器负担明显加重，所以不建议这样做，如果需要改变，可以使用Javascript脚本去实现。

• 添加文件过期时间（expires）或缓存头

对于同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲时间，例如设置24小时过期时间，这样用户在访问过该页面之后再次访问时，同一组图片或JS不会再重复下载，从而减少了HTTP请求，用户访问速度明显有所提升，同时服务器负载也会下降。

• Ajax调用尽量采用GET方法调用

实际使用XMLHttpRequest时，如果使用POST方法实现，会发生2次HTTP请求，而使用GET方法只会发生1次HTTP请求。如果改用GET方法，HTTP请求减少50%！

• 内容分发网络（CDN）

cdn分发（减少传输距离，缩短请求时间）

通过在多台服务器部署相同的副本，当用户访问时，服务器根据用户跟哪台服务器距离近，来决定哪台服务器去响应这个请求。

CDN的一些代表性的例子有AWS CloudFront、Fastly或Cloudflare。CDN的另一个好处是，通过减少带宽，用户还可以降低由于流量而导致的停机时间中断的风险。无论从哪个方面来看，使用CDN带来的都是双赢的结果。

• 使用服务端渲染

客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。
优点：首屏渲染快，SEO（搜索引擎优化） 好。
缺点：配置麻烦，增加了服务器的计算压力。

• 设定宽度和高度

很多熟悉布局的开发者在写样式时，喜欢使用元素的被动属性来撑开面积（如块元素的高度可由内容撑开），但这样做会导致浏览器在渲染页面的时候，不停的调整页面。所以尽量把元素的宽度和高度填写上，在需要响应式的页面时，我们可以使用兼容单位。

• 使用webpack打包js、scss等

webpack 可以把多种不同的静态资源转换为一个静态文件，这样做也会大大减少页面的网络请求，同时它也可以用来做ES6转码，增加在浏览器中的兼容性。

• 前端的资源动态加载

（1）路由动态加载，最常用的做法，以页面为单位，进行动态加载。
（2） 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。
（3）图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy来开启懒加载模式。

• 使用HTTP2

HTTP2相比于HTTP1.1的优点

• 减少重排重绘

具体参考这篇总结