网站性能优化的实战指南
发布网友
发布时间：2024-09-06 11:43
共1个回答
热心网友
时间：2024-10-03 13:27
性能优化是应用程序开发必须的工作之一，其目的之一为用户提供极致的速度体验，本文总结WEB应用或者网站可以快速实操的经验。
应用本身应用或者网站本身的优化，不包括逻辑和代码的优化。其中包括大家熟悉的资源最小化、图片懒加载、减少HTTP请求、延迟加载、预加载。
资源最小化资源（静态资源）压缩是指从HTML、CSS和JavaScript中删除不需要加载的不必要的冗余数据的过程，包括删除代码注释和格式、空白字符、未使用的代码、换行符等。现在的前端技术，这些工作都有现成的工具可以完成。
缩小HTML、CSS和JavaScript将加快前端加载时间，因为它减少了需要从服务器请求的代码量。
生成HTML、CSS和JavaScript代码的优化版本可以借助工具，如下：
HTML:PageSpeedInsights、HTMLMinifier。
CSS：cssmin.js、ChromeDevTools中的Coverage工具、YUICompressor。
JavaScript：JSMin、ChromeDevTools中的Coverage工具。
延迟加载延迟加载有助于进一步缩短前端加载时间，使用延迟加载，首先确保主要的内容先加载，如页面框架、文本内容、首屏内容等。在实际应用中可以对JavaScript进行延迟加载，HTML中可以有两个相关属性async和defer，这个两个属性使得script都不会阻塞DOM的渲染。：
defer属性规定是否对脚本执行进行延迟，直到页面加载为止。
async：会使得script脚本异步的加载并在允许的情况下执行，并且不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。
<scriptasyncsrc="https://www.googletagmanager.com/gtag/js?id=UA-157283337-2"></script><scriptdefersrc="https://www.googletagmanager.com/gtag/js?id=UA-157283337-2"></script>图片懒加载图片懒加载又称图片延时加载、惰性加载，即在用户需要看到图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度。
通常将页面中的img标签属性src指向一张小尺寸图片或者为空，然后定义data-src属性指向真实的图片。当载入页面时，先把可视区域内的img标签的data-src属性值赋值给src，然后增加页面滚动事件，把用户即将看到的图片加载。
如果不想自己写代码，可以使用第三方脚本库，如lazyload。
现代浏览器也实现了懒加载的功能，即为需要实现懒加载的标签增加属性loading="lazy"，如：
<imgsrc="image.jpg"alt="..."loading="lazy"><iframesrc="video-player.html"title="..."loading="lazy"></iframe>预加载预加载就是通过设置相应的资源属性告诉浏览器是否需要预取，包括CSS文件、JavaScript文件、DNS接下，主要是在HTML页面的<head></head>间加入<meta/>：
<linkrel="dns-prefetch"href="//www.devpoint.cn"/><linkrel="preload"as="style"href="/devpoint/public/css/site.css"/><linkas="script"rel="preload"href="/devpoint/public/scripts/site_min.js"/>减少HTTP请求减少HTTP请求，常见的原则页面尽量只有一个CSS文件和一个JavaScript文件，CSS小图片使用CSSSprites（使用图像集合拼接成一个图像文件，然后通过使用CSS中的background-image和background-position属性来显示所需的图像区域。这样做可以减少了所需的服务器请求数量）。
服务器侧服务器侧这里简单介绍部署环境的优化，常见的方式是为静态资源增加缓存、压缩文件。
缓存为静态资源增加缓存是常见的处理方式，通常在项目开发中建议采用动静分离，即所谓的静态资源与应用本身分离，方便对静态资源进行优化，增加缓存或者增加CDN都可以方便的实现。下面是以Nginx的配置为例，为静态资源增加缓存：
location~*\.(gif|webp|txt|jpg|jpeg|png|swf|flv|ico|mp4|js|css|eot|ttf|woff|woff2|svg|bmp|doc|zip|docx|rar)${proxy_cachecache_one;proxy_cache_valid20030224h;proxy_cache_valid30130d;proxy_cache_validany5m;expires90d;}压缩文件对于WEB项目，可以使用合适的方法压缩文件，可以轻松地对前端的加载时间产生重大影响。以下是可以遵循的两个不错的文件压缩选项：
Gzip：最流行的数据压缩和解压缩方法，所有现代浏览器都支持，Gzip在将站点的HTML、CSS和JavaScript包发送到浏览器之前先在服务器端对其进行压缩，然后在客户端解压缩文件并传送内容。Brotli：与当前可用的压缩方法相比，它提供了最佳的压缩率，根据CertSimple的研究，Brotli压缩JavaScript文件比Gzip小14%，而HTML和CSS压缩率比Gzip好21%和17%。
gzipon;gzip_varyon;gzip_proxiedoff;gzip_comp_level3;gzip_buffers328k;gzip_http_version1.1;gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;总结性能黄金法则：80-90%的最终用户响应时间用于下载前端组件，例如图像、样式表、脚本等。
因此，优化前端数据加载对于降低跳出率和增加用户在网站上的停留时间至关重要。
