渲染优化是前端开发中非常重要的一部分，它涉及到提高页面加载速度、减少资源消耗、优化用户体验等方面。下面本人将结合自己所学知识，对一些常见的渲染优化技巧以及具体的示例进行说明。

# 1. 禁止使用 iframe

# 原因：

阻塞主页面加载： iframe 会阻塞主页面的 onload事件 ，因为当 iframe 加载完毕之后，才会触发主页面的 onload事件 。这会导致主页面的加载速度变慢，影响用户体验。
不利于搜索引擎优化（SEO） ：搜索引擎的爬虫程序无法解读 iframe 中的内容，因此 iframe 中的内容对于网页的 SEO 没有帮助。如果网页的重要内容被放在 iframe 中，可能会导致搜索引擎无法正确索引页面内容，降低网页的排名。
影响页面并行加载： iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以当页面中包含多个 iframe 时，会影响页面的并行加载能力，导致页面加载速度变慢。
性能影响： iframe 的加载会消耗网络带宽和浏览器资源，尤其是当页面中包含大量的 iframe 时，会增加浏览器的负担，影响页面的性能和响应速度。

因此我们需要使用 iframe ，最好是通过 JavaScript。通过使用 JavaScript 动态添加 iframe 的 src 属性值，避免阻塞主页面的 onload事件 和影响页面的并行加载。如：

	const iframe = document.createElement('iframe');
	iframe.src = 'https://hostlocal.com';
	document.body.appendChild(iframe);

# 2. 禁止使用 gif 图片实现 loading 效果

# 原因：

降低 CPU 消耗： GIF图片 是一种动画格式，它会在浏览器中循环播放，消耗额外的 CPU 资源。在移动设备等资源受限的环境中，使用 GIF 图片可能会导致性能下降和电池消耗增加。
提升渲染性能：使用 CSS3动画 代替 GIF 图片可以利用硬件加速，提高页面的渲染性能。CSS3 动画使用 GPU 加速，比 GIF 图片更加高效，并且可以实现更复杂的动画效果。
文件大小和网络请求：GIF 图片通常文件较大，如果页面中包含多个 GIF 图片，会增加页面的下载时间和网络请求次数，降低页面加载速度。而使用 CSS3 动画可以通过控制样式表的大小和压缩来减少文件大小，减少网络请求。
响应式设计和高清屏幕支持：GIF 图片通常是静态的，无法根据设备分辨率和屏幕尺寸进行适配，而 CSS3 动画可以根据页面布局和设备特性进行灵活调整，支持响应式设计和高清屏幕。

因此我们可以使用 CSS3 代码代替 JavaScript 动画，以减少 CPU 消耗和提升渲染性能。如：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Loading</title>
	<style>
	/* 使用 CSS3 动画实现 loading 效果 */
	@keyframes loading {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
	}
	.loading {
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	animation: loading 2s linear infinite;
	}
	</style>
	</head>
	<body>
	<div class="loading"></div>
	</body>
	</html>

在上面的示例中，使用了 CSS3 的 @keyframes 规则定义了一个名为 loading 的旋转动画，然后通过 animation属性 将该动画应用到一个圆形元素上，实现了一个旋转的 loading效果 。这种方法可以避免使用 GIF 图片，提高页面的性能和响应速度。

# 3. 减少 DOM 操作和重绘重排

# 原因

性能开销：DOM 操作和重绘重排是比较耗费性能的操作，特别是在页面中有大量 DOM 元素需要操作时。频繁的 DOM 操作和重绘重排会导致页面的性能下降，造成页面卡顿和响应速度变慢。
页面回流：DOM 操作和重绘重排往往会触发浏览器的页面回流（reflow）过程，这是一种重新计算页面布局和重新绘制元素的过程，非常消耗资源。频繁的页面回流会导致页面的性能下降和用户体验变差。
用户体验：DOM 操作和重绘重排会影响页面的渲染速度和响应速度，降低了用户的体验感受。特别是在移动设备等资源受限的环境中，这种影响更加明显，可能导致用户流失。
浏览器优化：现代浏览器会对 DOM 操作和重绘重排进行优化，但是这种优化也是有限的。过多的 DOM 操作和重绘重排会使浏览器的优化失效，影响页面的性能和响应速度。

# 示例:

避免频繁查询和修改 DOM 元素：将需要操作的 DOM 元素缓存起来，避免重复查询，减少 DOM 操作次数。

	// 避免频繁查询和修改 DOM 元素
	const element = document.getElementById('example');
	element.style.color = 'red';
	element.style.backgroundColor = 'blue';

一次性修改多个 DOM 属性：尽量将需要修改的多个 DOM 属性放在一起修改，减少多次重绘重排。

	// 一次性修改多个 DOM 属性
	const element = document.getElementById('example');
	element.style.cssText = 'color: red; background-color: blue;';

避免频繁读取 DOM 属性：尽量减少对 DOM 属性的读取操作，避免频繁触发重绘重排。

	// 避免频繁读取 DOM 属性
	const width = element.offsetWidth; // 避免频繁读取 DOM 属性
	const height = element.offsetHeight;

通过以上例子，我们就可以实现提高页面的性能和响应速度，改善用户体验，优化渲染效果。

# 4. 减少 HTTP 请求和使用 base64 编码

# 原因

减少网络延迟：每个 HTTP 请求都需要建立 TCP 连接、发送请求头、等待服务器响应等步骤，这些步骤都会增加网络延迟。减少 HTTP 请求可以降低页面加载时间，提升用户体验。
减少带宽消耗：每个 HTTP 请求都需要消耗服务器带宽和用户流量。特别是在移动设备等带宽受限的环境中，减少 HTTP 请求可以节省用户的流量费用。
优化页面加载速度：HTTP 请求是页面加载过程中的一个瓶颈，过多的 HTTP 请求会导致页面加载速度变慢。减少 HTTP 请求可以加快页面加载速度，提升用户体验。
避免资源阻塞：浏览器在加载页面时会有并行请求的限制，过多的 HTTP 请求会导致资源阻塞，影响页面的渲染速度和响应速度。
提高性能和稳定性：减少 HTTP 请求可以降低服务器的负载，提高系统的性能和稳定性。特别是在高并发访问情况下，减少 HTTP 请求可以有效避免服务器的过载和宕机。

因此我们可以通过使用 base64 编码可以将小的图片等资源直接嵌入到 HTML 或 CSS 文件中，减少 HTTP 请求，从而达到渲染优化的目的。如：

在 HTML 中使用 base64 编码的图片：

	<!-- 在 HTML 中使用 base64 编码的图片 -->
	<img src="data:image/png;base64,iVBORw0KGgo..." alt="Base64 Image">

在 CSS 中使用 base64 编码的图片

	/* 在 CSS 中使用 base64 编码的图片 */
	.background {
	background-image: url(data:image/png;base64,iVBORw0KGgo...);
	}

通过使用 base64 编码将小的图片等资源直接嵌入到 HTML 或 CSS 文件中，可以减少 HTTP 请求，我们就可以提升页面的加载速度和性能了。

# 5. 样式表放在顶部，脚本放在底部

# 原因

并行加载：浏览器在加载页面时，会并行下载页面中的外部资源，如样式表、脚本等。将样式表放在顶部可以使得浏览器尽早开始加载样式资源，并在加载过程中解析页面结构，提高页面渲染速度。而将脚本放在底部可以使得页面的主要内容先加载完成，提升用户体验。
避免阻塞：CSS 不会阻塞页面的加载，但会阻塞后续内容的渲染，尤其是在外部样式表文件较大时。将样式表放在顶部可以尽早开始加载样式资源，避免阻塞后续内容的渲染。相反，JavaScript 脚本的加载和执行会阻塞页面的渲染，将脚本放在底部可以使得页面的主要内容先加载完成，减少页面的加载时间。
提高性能：将样式表放在顶部可以使得浏览器尽早开始渲染页面，并在渲染过程中逐步应用样式，提高页面的渲染性能。而将脚本放在底部可以避免脚本的加载和执行对页面渲染的影响，提高页面的响应速度和性能。

# 示例：

将样式表放在顶部、脚本放在底部的渲染优化策略主要基于以下几个原因：

并行加载：浏览器在加载页面时，会并行下载页面中的外部资源，如样式表、脚本等。将样式表放在顶部可以使得浏览器尽早开始加载样式资源，并在加载过程中解析页面结构，提高页面渲染速度。而将脚本放在底部可以使得页面的主要内容先加载完成，提升用户体验。
避免阻塞：CSS 不会阻塞页面的加载，但会阻塞后续内容的渲染，尤其是在外部样式表文件较大时。将样式表放在顶部可以尽早开始加载样式资源，避免阻塞后续内容的渲染。相反，JavaScript 脚本的加载和执行会阻塞页面的渲染，将脚本放在底部可以使得页面的主要内容先加载完成，减少页面的加载时间。
提高性能：将样式表放在顶部可以使得浏览器尽早开始渲染页面，并在渲染过程中逐步应用样式，提高页面的渲染性能。而将脚本放在底部可以避免脚本的加载和执行对页面渲染的影响，提高页面的响应速度和性能。

下面是一些例子说明：

样式表放在顶部

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>example page</title>
	<link rel="stylesheet" href="styles.css"> <!-- 样式表放在顶部 -->
	</head>
	<body>
	<h1>Hello World</h1>
	<p>this is an example page</p>
	</body>
	</html>

在上面的例子中，样式表被放置在 head 标签内，使得浏览器可以在加载页面时尽早开始加载并解析样式资源，提高页面的渲染速度。

脚本放在底部的例子：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>example page</title>
	</head>
	<body>
	<h1>Hello World</h1>
	<p>this is an example page</p>
	<script src="script.js"></script> <!-- 脚本放在底部 -->
	</body>
	</html>

在上面的例子中，JavaScript 脚本被放置在 body 标签的底部，使得页面的主要内容可以先加载完成，然后再加载和执行 JavaScript 脚本，提高页面的响应速度和性能。

# 结语

总的来说，前端渲染优化是提高页面加载速度、减少资源消耗、优化用户体验的关键。禁止使用 iframe、使用 CSS3 代替 gif 图片、减少 DOM 操作和 HTTP 请求、样式表放顶部脚本放底部等常见的渲染优化技巧，都可以有效提升页面性能。通过这些技巧的结合应用，可以加速页面加载，提升用户体验，让网站更加吸引人。

js 性能

# 1. 禁止使用 iframe

# 原因：

# 2. 禁止使用 gif 图片实现 loading 效果

# 原因：

# 3. 减少 DOM 操作和重绘重排

# 原因

# 示例:

# 4. 减少 HTTP 请求和使用 base64 编码

# 原因

# 5. 样式表放在顶部，脚本放在底部

# 原因

# 示例：

# 结语

性能优化之通俗易懂学习requestAnimationFrame和使用场景举例

应该在JavaScript中使用Class吗？