10、性能优化_77588.top-优快云博客

本文链接：https://blog.youkuaiyun.com/shixue7758/article/details/116499405

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

<一>懒加载

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">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">
    <img  alt="图片无法正常加载时显示的文字" data-src="loading.gif">

    <script>
        var imgs = document.querySelectorAll('img')
        function lazyLoad() {
            var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop
            var viewHeight = window.innerHeight
            for(var i = 0; i < imgs.length; i++) {
                if(imgs[i].offsetTop < scrollHeight + viewHeight) {
                    imgs[i].src = imgs[i].getAttribute('data-src')
                }
            }
        }
        document.onscroll = function () {
            lazyLoad()
        }
    </script>
</body>
</html>

3、图片懒加载和预加载的区别

懒加载>、图片的延迟加载，只有在用户需要的时候才会向服务器请求图片资源。当图片进入可视化窗口之后才会进行加载，在img中设置src属性为空。用data-src来存储正确的图片请求路径，当该图片的 offsetTop < 页面滚动过的高度(document.body.scrollTop || document.documentElement.scrollTop())加上window.innerHeight时，把data-src给src来显示图片。当页面滚动时触发该函数。document.onscroll = function() {lazyLoad()}
预加载>、提前把所有图片从服务器请求过来，放在缓存资源中，增加了服务器的加载压力，但是可以提高用户的浏览体验减少等待时间。我了解的预加载就是通过 img 的 src 属性实现的。

<二>、防抖和节流函数

1、防抖

作用：在事件触发n秒之后再去执行，如果在n秒之内，事件被再次触发，则重新计时，避免了用户多次触发事件，多次向服务器请求数据。
应用场景：按钮提交
原理实现

<script>  
       function debounce(fn, wait) {
           var timer = null  

           return function() {
               let context = this
               agrs = [...arguments]

               if(timer) {
                   clearTimeout(timer)
                   timer = null
               }

               timer = setTimeout(() => {
                   fn.apply(context, agrs)
               },wait)
           }
       }
</script>

2、节流函数

作用：在n秒之内，事件被触发多次但是只执行一次。
应用场景：拖拽(固定时间之内只触发一次，防止调用频率太快)
原理实现：

<script>  
       function throttle(fn, wait) {
           var curTimer = Date.now()

           return function() {
               let context = this
               args = [...arguments]
               newTimer = Date.now()

               if(newTimer - curTimer >= wait) {
                   curTimer = Date.now()
                   fn.apply(context, args)
               }
           }
       }
</script>

<三>、图片优化

<四>、CDN服务器

1、基本介绍

在这里插入图片描述

2、CDN服务器的原理

1>、当用户输入域名给DNS服务器时，服务器解析得到该域名对应的是一个CDN专用DNS服务器，然后把解析权限交给CDN专用DNS服务器。
2>、CDN专用DNS服务器将全局负载均衡设备的IP地址返回给用户
3>、用户用这个IP地址去访问全局负载均衡系统。
4>、全局负载均衡系统根据用户的IP地址以及对应的URL去选择一个CDN区域负载均衡系统，CDN区域负载均衡系统选择一台合适的缓存服务器，并将该缓存服务器的IP地址告诉全局负载均衡设备，全局负载均衡设备再将这个IP地址给用户。
5>、用户根据这个IP地址向缓存服务器发送请求，缓存服务器响应请求，并把数据传给用户，使得其在浏览器页面渲染。
在这里插入图片描述

3、CDN应用场合

使用CDN进行静态资源的存储。比如图片 css js 等。
为什么呢？因为如果服务器在拉萨，现在用户在上海访问服务器数据会传输慢，为了解决这个问题，就在上海也部署一台服务器，服务器分为静态和动态的，动态的服务器数据，当不同的用户在不同的时间请求的时候，会不一样，静态的一般都是一样的，所以我们在上海部署一个静态服务器，就是CDN服务器。当用户发送请求的时候，就直接从上海的CDN服务器中请求数据就可以了，提高了传输效率。

<四>、回流和重绘

1、回流和重绘的概念以及触发条件

1、重绘
当元素样式发生改变，但是不影响其在文档流中的位置时，浏览器会对该元素进行重绘。
触发条件：
color outline background boder-radius box-shadow visibility
2、回流
当渲染树的部分或者是全部元素的结构、样式和属性发生变化的时候，浏览器会对部分或者是全部文档重新渲染的过程叫做回流。因为回流影响了该元素在文档中的位置，所以会对周围的DOM元素产生影响。
触发条件：
HTML的内容发生改变，字体，位置或者是浏览器窗口的改变，以及操作DOM元素均会造成页面的回流
3、两者之间的关系
重绘不一定会导致回流，但是回流中一定存在重绘。

2、如何优化动画呢

我们知道动画的操作会频繁触发DOM元素，会导致页面的回流。解决方法：将动画的属性设置为position ：absolute/fixed，使得动画元素脱离标准流，这样就不会造成浏览器页面的回流了。

<五>、从前端角度出发做好SEO

1、了解搜索引擎如何抓取网页和索引网页，常见的搜索引擎有谷歌IE等
2、利用meta标签，
3、使用语义化标签规范代码
4、该网页的外部链接越多越有可能被搜索到。

<六>、利用webpack来优化前端性能

用webpack优化前端性能指的是优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。
1、压缩代码，利用UglifyJsPlugin压缩JS代码，利用cssnano压缩css代码。
2、将代码中永远不会走到的片段删除，在启动webpack的时候追加参数，--optimize-minimize来实现
3、利用CDN加速，在构建过程中，将引用的静态资源的路径修改为CDN上对应的路径，可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径。