如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么

1、降低请求量 ​

① 合并资源，减少http请求数量。

​② lazyLoad，如图片懒加载。分批加载，每次只加载一部分。 ​

③ 使用字体图标或CSS绘制，来代替部分图片。

2、加快请求速度 ​

① 预解析DNS ​

② 使用HTTP2.0 ​

③ 并行加载 ​

④ CDN 分发 ​

⑤ webP，对图片进行压缩，减少图片体积。 ​

⑥ minify/gzip 压缩，对css、js等文件进行压缩（去除空格、回车等），减少文件体积

3、缓存 ​

① HTTP协议缓存请求 ​

② 离线缓存 manifest ​

③ 本地缓存 localStorage ​

② 减少 HTTP 请求 (Make Fewer HTTP Requests)

​③ 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

④ 使得 Ajax 可缓存 (Make Ajax Cacheable)

4、渲染 ​

① JS优化，如防抖、节流、事件委托、减少重排重绘等。 ​

② CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等。 ​

③ 服务器端渲染 ​

④ 使用Web Workers ​

⑤ CSS写在文件头部，JS写在文件底部。

5、css ​

① 采用css雪碧图

② 减少css表达式

③ 避免使用缩略图

1.常用的有一下这些：

1. 选择可靠服务器或者虚拟主机；
2. 开启gzip功能对网站源文件进行压缩；
3. 降低网页大小；
4. 减少flash或者大图片的使用；
5. js放到页面底部延时加载；
6. 使用cdn对网站进行加速等等。
7. js css文件外部调用减小文件大小
8. 生成静态文件提高加载速度
9. 使用缓存技术提高加载速度

2、当心第三方脚本

如果你使用的是Google Analytics（分析）之类的工具，那么你已经在使用第三方脚本。

这些脚本对于将新功能添加到你的站点非常有帮助。但是，它们仍然是需要在客户端渲染或读取的代码片段，从而增加了页面速度的加载时间。确保要添加的代码经过优化且必不可少。删除所有未使用的东西。

3、使用VPS托管服务

你的托管服务提供商使用的服务器对于你的站点速度至关重要。如果机器对用户请求的响应速度很慢，则无论用户的互联网连接速度有多快，浏览器都会缓慢接收信息。

另一个因素是你使用的计划。通常是共享计划是廉价的，因为托管服务提供商会为多个客户端租用同一台服务器，这对于流量低的站点来说绰绰有余。

但是，如果你确实需要提高站点速度，则需要从服务器访问更多资源。更重要的是，你将需要站点可访问的资源数量保持一致。

首先，我想到的是专用服务器。你基本上是在为自己租用整个服务器。但这可能会很昂贵，而且对于大多数用例而言，它远远超出了你的需求。

本质上，托管服务提供商在服务器的操作系统上创建一个层，使你可以完全控制虚拟机的资源，并将其与其他用户分开。这样可以防止其他站点从你的资源中获取资源，并允许你以所需的方式自定义服务器。

4、使用内容传送网络（CDN）

就像我们在上面指出的那样，你的托管只不过是一台存储你网站数据并在浏览器发出请求后就通过Internet传递数据的机器。

对于你的网站速度而言，意味着你的托管距离用户越远，传递数据所需的时间就越多。这就是CDN或内容交付网络发挥作用的地方。

简而言之，CDN是一个遍布全球的服务器网络，可将你的站点资产（例如图像，HTML文件，JSON文件等）从最近的服务器传递给最终用户。

你可以在其中找到一些选择，但是如果你急于赶快，建议你探索Cloudflare。

如果你不使用内容传送网络，则它可能是你获得的最快捷径。

5、推迟JavaScript加载

当你的网站加载时，浏览器会下载你的网站所需的所有文件，包括JavaScript文件。

但是，你的主要重点是向用户提供他们想要在页面上看到的信息。这就是为什么推迟JavaScript对缩短页面加载时间如此有用的原因。

简而言之，延迟文件可防止在加载其他（更重要的）元素之前将其加载。你可以先加载HTML和CSS，以便用户可以更快地访问内容，然后才加载脚本，以添加你为页面设想的额外功能。

你可以使用defer属性来执行此操作。这是有关如何使用defer有效加载JavaScript的深入指南。

提示：另一种有效加载javascript的方法是在关闭body标签之前添加脚本。这将使浏览器在获取并执行脚本之前先解析整个站点。

6、启用浏览器缓存

每次用户访问你的网站时，浏览器都需要下载构成你页面的所有文件。如果可以使浏览器存储数据，以便下次用户键入URL时，浏览器已经具有显示其内容所需的所有信息，该怎么办？

为此，你需要通过设置资产的过期日期来从.htaccess文件中启用浏览器缓存。

这将告诉浏览器，将这些文件保留到设置的时间。

注意：这是增加网站回访用户加载速度的好方法。

7、提高页面加载速度，优化方法：

1、使用免费 cdn 加载第三方资源

2、合并压缩js,css,减少请求次数以及减少流量的消耗

3、代码优化：

HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，JavaScript的引入放在页面尾

其次：

按需加载，把统计、分享等 js 在页面 onload 后再进行加载，可以提高访问速度；

优化 cookie ，减少 cookie 体积；

避免  的 src 为空；

尽量避免设置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能；

合理使用display属性：

(1).字体图标

(2).雪碧图

(3).图片地图

a.display:inline后不应该再使用width、height、margin、padding以及float

b.display:inline-block后不应该再使用float

c.display:block后不应该再使用vertical-align

d.display:table-*后不应该再使用margin或者float

不滥用Float 和 web 字体；

尽量使用CSS3动画；

使用 ajax 异步加载部分请求；

4、懒加载

对于一些图片，显示首屏的，后面scroll到的时候再加载

5、预加载

预加载是在浏览器空闲时请求将来可能会用到的页面内容(如图像、样式表和脚本)。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度

二、前端性能优化？
内容方面：
1. 减少 HTTP 请求 (Make Fewer HTTP Requests)
2. 减少 DOM 元素数量 (Reduce the Number of DOM Elements) 
3. 使得 Ajax 可缓存 (Make Ajax Cacheable) 
   针对CSS： 
4. 把 CSS 放到代码页上端 (Put Stylesheets at the Top) 
5. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 
6. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 
7. 避免 CSS 表达式 (Avoid CSS Expressions)  
   针对JavaScript ： 
8. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 
9. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 
10. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 
11. 移除重复脚本 (Remove Duplicate Scripts) 
    面向图片(Image)： 
12. 优化图片 
13. 不要在 HTML 中使用缩放图片 
14. 使用恰当的图片格式 
15. 使用 CSS Sprites 技巧对图片优化

http对性能的优化：
1：启用长链接：TCP和SSL建立新连接的成本非常高，启用长链接虽然不能优化连接握手，但是可以把成本“均摊”到多次请求里，这样只有第一次请求会有延迟，之后的请求就不会有连接延迟，总体的延迟就降低了。
2：对于HTTP协议传输的各种格式数据，我们可以有针对性的采取特殊的压缩方式
3：HTML/CSS/JavaScript 属于纯文本，可以采用特殊的压缩，去掉源码里多余的空格、换行、注释等元素。
4：图片：虽然图片本身已经被压缩过，但仍有优化空间，比如说可以选择使用高压缩率的格式，无损格式用Webp格式，有损格式用 JPEG
5：减少header大小：不必要的字段就尽量不发(例如Serve X-Powered-By):
6：尽量不使用重定向：重定向引发的客户端延迟很高，不仅增加了一次请求往返，还有可能导致新域名的DNS解析
7：利用好缓存：为每个资源添加Etag 和 Last-modified字段。

vue的性能优化：
代码层面的优化： (1)v-if和v-show区分使用场景，v-if会进行真正的条件渲染，它会确保切换过程中事件监听器和子组件适当的销毁重建，触发destroyed 生命周期。而v-show则很简单，适用于频繁切换的场景。

(2) computed和method区分使用场景：computed是计算属性，当我们需要进行数值计算，并且还要依赖其他数据的时候，可以利用computed的缓存特性，避免每次获取值时，都要重新计算。

(3)在使用v-for遍历时，给每一项添加key值，还要避免同时使用v-if：

添加key值方便vue内部精准的找到该条数据，当状态更新时，就能较快的进行diff比较，从而更新状态值。v-for比v-if的优先级高，如果每一次都需要遍历整个数组，就会影响速度，尤其是需要渲染的只有很小一部分时，必要情况下应该替换成computed属性。

(4)图片懒加载：为了提高页面加载速度，将页面未显示出来的图片不做处理，等滚到可视区后再加载，这样对页面加载性能会有很大提升，提高了用户体验，项目中使用vue-lazyload插件