10、性能优化

最新推荐文章于 2022-04-08 15:18:08 发布

shixue7758

最新推荐文章于 2022-04-08 15:18:08 发布

阅读量274

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/shixue7758/article/details/116499405

版权

本文介绍了前端性能优化的各种策略，包括懒加载图片以提高加载速度和降低服务器负载，防抖和节流函数在事件处理中的应用，CDN服务器的原理和使用场景，以及回流和重绘对动画优化的影响。同时，还讨论了SEO策略和利用webpack优化前端性能的方法。

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

文章目录

<一>懒加载

1、概念、作用和特点

长网页中所有图片一下被加载出来，但是在可视化界面只能显示几张，这样就浪费了性能，懒加载能解决这个问题，可视化之外的图片不会被加载，只有当屏幕滚动时才能被加载，提高了加载速度，减小了服务器负载。使用于长页面并且图片校多的情况。
特点：
1>、减少了无用资源的加载，只加载可视化区域的图片。
2>、提升用户体验，一下子加载所有图片会非常慢，这样加载速度极快。
3>、不会影响其他资源的加载。

2、图片懒加载的原理及实现

原理：浏览器图片是由img的src属性指向的资源从服务器请求到浏览器窗口来显示的，一开始的时候把src属性设置为空，用另外一个属性data-src来保存实际需要加载的图片，当图片显示在可视化窗口的时候再去加载，即图片距离浏览器顶端的距离小于页面滚动过的距离加上浏览器窗口的高度时再去加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
   
            display: block;
            height: 500px;
        }
    </style>
</head>
<body>
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">