网站性能优化篇
网站性能优化篇
- 性能优化---页面加载性能方面
- 优化性能优化方面的问题
性能优化考虑的几个层面，重点是页面加载时候的优化
性能优化—页面加载性能方面
- 减少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>