网站性能优化篇

最新推荐文章于 2024-10-11 19:03:40 发布

Dormiveglia-flx

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量337

点赞数

分类专栏：前端底层原理与性能调优文章标签：性能优化前端 javascript

本文链接：https://blog.csdn.net/sugerfle/article/details/129766109

版权

前端底层原理与性能调优专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章探讨了页面加载性能优化的方法，包括减少HTTP请求、使用CSS和JS文件合并、压缩资源、利用CDN、服务器渲染和懒加载技术。此外，还提到了处理大量数据渲染的解决方案，如前端分页和虚拟列表，并给出了图片懒加载的简单示例。

摘要由CSDN通过智能技术生成

网站性能优化篇

- 性能优化---页面加载性能方面
- 优化性能优化方面的问题

性能优化考虑的几个层面，重点是页面加载时候的优化

在这里插入图片描述

性能优化—页面加载性能方面

减少http请求，比如用雪碧图（现在一般用iconfont(表面是图片，实际是字体)），文件合并等(CSS文件合并、JS文件合并等等)
减少文件的大小(资源压缩，图片压缩，代码压缩)
使用CDN，比如20M的图片，如果放在html中可能造成阻塞，但是放CDN的话不会。
SSR服务器渲染，预渲染。
现在浏览器性能都很强，一般DOM操作对浏览器影响不大。如果要优化的话，可以考虑懒加载、以DOM碎片的形式增删改查DOM等操作。(无屌所谓)

动画方面的性能优化：如果将来有大部分的Dom需要移动，首选translate和定位position。

现在主流的优化方案：
在这里插入图片描述

优化性能优化方面的问题

当年字节跳动有个面试题：
如何让页面渲染20万条数据？

我个人认为最好的解决方案是把后端的狗逼打一顿，把20万条数据发过来？？？

这个问题如果真的发生了，也有解决方案：

前端主动分页
使用虚拟列表----vue-virtual-scroll-list

如果一个页面全是图片，如何给这个页面写个懒加载？
即实现滚动条滚动到某个高度就加载下一页的数据

//原理：滚动条到顶部的距离 + 窗口高度 > 文档的总高度 + 20     /*我这里将滚动响应区域高度取20px*/；

下面有个简单的demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple HTML Template</title>
	<!-- Add some style to the page -->
	<style>
		body {
			background-color: lightblue;
		}
		h1 {
			color: white;
			text-align: center;
		}
		.nodisplay1{
		   display:none;
		}
		.nodisplay2{
		   display:none;
		}
		.nodisplay3{
		   display:none;
		}
		.nodisplay4{
		   display:none;
		}
	</style>
</head>
<body>
	<h1>This is a simple HTML template</h1>
	<p>Here's some text to fill the page.</p>
	<div id="divTest">
	   	<img src='dogbg.jpg' />
		<img src='dogbg.jpg' />
		<img src='dogbg.jpg' />
		<img class="nodisplay1" src='dogbg.jpg' />
		<img class="nodisplay1" src='dogbg.jpg' />
		<img class="nodisplay2" src='dogbg.jpg' />
		<img class="nodisplay2" src='dogbg.jpg' />
		<img class="nodisplay3" src='dogbg.jpg' />
		<img class="nodisplay3" src='dogbg.jpg' />
		<img class="nodisplay4" src='dogbg.jpg' />
		<img class="nodisplay4" src='dogbg.jpg' />
	</div>
	<!-- Add some functionality to the page with JavaScript -->
	<script>
        // 原理：滚动条到顶部的距离 + 窗口高度 > 文档的总高度 + 50     /*我这里将滚动响应区域高度取20px*/；
		// 如果这个判断为true则表示滚动条滚动到了底部。
		
		
		 //获取滚动条到顶部的距离，也就是页面顶部被滚动条顶上去的高度
		function scrollTop(){
			return Math.max(
				//chrome
				document.body.scrollTop,
				//firefox/IE
				document.documentElement.scrollTop);
		}
		
		//获取页面文档的总高度
		function documentHeight(){
		//现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
			return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
		}
		
		// 窗口的高度
		function windowHeight(){
			return (document.compatMode == "CSS1Compat")?
			document.documentElement.clientHeight:
			document.body.clientHeight;
		}
		
		window.addEventListener('scroll', handleScroll, true)
		
		function handleScroll(){
		    if(scrollTop() + windowHeight() >= (documentHeight() - 20)){
				addData();
			}
		}
		
		function addData() {
		    //alert('add');
			let img1=document.getElementsByClassName('nodisplay1')[0];
			console.log(img1)
            img1.classList.remove('nodisplay1')
            // 判断有没有nodisplay1 
			// 有的话就return，没有的话，接着移除nodisplay2
			// 以此类推
		}
	</script>
</body>
</html>