前端性能优化相关知识点

最新推荐文章于 2024-06-20 23:54:08 发布

NurTuam-何永杰

最新推荐文章于 2024-06-20 23:54:08 发布

阅读量212

点赞数 1

分类专栏：性能优化文章标签：性能优化前端前端性能优化总结

本文链接：https://blog.csdn.net/weixin_42323607/article/details/93392820

版权

性能优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

哎呀~~，这篇文章半年前我就想写了，哈哈哈 😊，半年后又是一个全新的自己，话不多说进入正题：

引子

互联网有一项著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果加载需要太长时间，他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上，加载时间每多1秒，你就会流失7%的用户。8秒并不是准确的8秒钟，只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能，提高页面加载速度呢？以下是我总结性能优化常见的办法：

· 减少http请求

1. 图片合并：

导航往往使用多个分开的图片，让每个图片对应一个超链接，这会产生多个HTTP请求。图片地图将多个图片合并为一张图片，以位置定位超链接，把HTTP请求减少为一个。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <img src="img.jpg" usemap="#Map"/>
        <map name="Map">
          <area shape="rect" coords="50,50,100,100" href="#" onclick="return show('Rect!')">
          <area shape="circle" coords="240,240,40" href="#" onclick="return show('Circle!')">
        </map>
        <script>
            function show(shape){
                alert(shape);
                return false;
            }
        </script>
    </body>
</html>

可以使用 CSS Sprites（精灵图）

通过指定CSS的backgroud-image和backgroud-position来显示元素。
工具：CSS Sprite Generator，可以合并图片，还可以生成图片的CSS样式。

CSS 精灵图

2. 图片压缩：
像素表
根据压缩分类

无压缩。
无损压缩。
有损压缩。
无压缩

无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP 格式就是其中之一。
有损压缩

指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从一个有损压缩过的图片中恢复出完整的图片。
无损压缩

在压缩图片的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
png 是其中的代表。

可借助图片压缩工具进行压缩

3、合并JS脚本和CSS样式表

适当地把多个JS脚本合并为一个脚本，把多个CSS样式表合并为一个样式表。

理想情况下：一个页面应该使用不多于一个的脚步和样式表。但这种将所有东西合并到一处的行为对于模块化编程思维来说是一种倒退，解决方法是遵守编译型语言的模式，开发模式下保持js文件的模块化，生成打包的时候生成一个目标文件部署到线上。
* 1.在不考虑文件所占内存的情况下，可以把请求网络的JS脚本和CSS样式表变为请求本地文件；2. css放在头部，js放在尾部（以后博客会详解原因）

4、配置多个域名和CDN加快加载速度

因为CDN域名一般都会缓存到本地中，而且CDN网络请求速度是非常快的。
（由于CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。）

缺点就是会增加浏览器域名解析的次数

· 图片懒加载和预加载

懒加载：
是指页面加载时只渲染屏幕可见区域及周围的图片。当页面滚动时再加载需要显示的图片。
不过因为该需求场景下每一张图片的宽高都是 50*50，那么在PC端常见的 1080p 的设备上首屏需要显示的图片达到了400+张。
即便我们忽视这个问题，当用户滚动网页速度很快时图片加载的体验也是不ok的。

所以懒加载并不是万能的。
预加载：
先让图片下载到本地，让浏览器缓存起来。让用户无需等待过长的时间就能看到其他图片

function preLoadImg(url) { 
var img = new Image(); 
img.src = url; 
}

或者使用异步的方法：

function loadImage(url, callback) {//等到图片下载完毕的时候才会再对img的width和height进行调用
var img = new Image(); 
img.src = url; 
img.onload = function(){ //图片下载完毕时异步调用callback函数。 
callback.call(img); // 将callback函数this指针切换为img。 
  }; 
}

· cookie的处理

去除没有必要的cookie，如果网页不需要cookie就完全禁掉。
将cookie的大小减到最小。
由于cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器，因此，减小cookie的大小，能减小HTTP请求报文的大小，提高响应速度。
设置合适的过期时间，较长的过期时间可以提高响应速度
给cookie添加一个过期时间，则cookie信息将存储到硬盘上，即使浏览器退出Cookie还会存在。只要Cookie未被清除且还在过期时间内，该Cookie就会在访问对应域名时发送给服务器。
通过使用不同的domain减少cookie的使用。
cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器，但在访问一些资源，如js，css和图片时，大多数情况下cookie是多余的，可以使用不同的domain来存储这些静态资源，这样访问这些资源时就不会发送多余的cookie，从而提高响应速度。

· 避免重定向

  什么是重定向：重定向用于将用户从一个URL重新路由到另一个URL。

方法：

删除并非绝对必要的重定向
结尾的斜线
通常，带有结尾带有斜线的URL表示目录，而没有带斜线的URL表示文件。
http：//example.com/foo/表示目录。
http：//example.com/foo表示文件。
重定向的不仅仅是HTML
CSS文件、图像、外部JavaScript文件也可能有重定向
清理重定向链
将所有站点重定向从非www版本到www版本，然后再重定向到https版本。

这次就写到这里吧，前端性能优化还有很多很多方法…
大家也可以给我多多留言噢 😛

欢迎关注我的博客： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/Nurtuam

多多支持！本人会持续更新哒 ❤️