前端的性能优化-笔记_web前端性能优化笔记-CSDN博客

本文链接：https://blog.csdn.net/XiaoSen207/article/details/123005155

1. 减少http请求数
对于影响页面呈选的因素有3个地方：服务器连接数据库并计算返回数据， http请求以及数据（文件）经过网络传输，文件在浏览器中计算渲染呈选；其中大约80%的时间都耗在了http请求上，所以要想大幅度优化页面，必须从http请求上入手
常用的减少http请求数有以下几种：
1）制作图片地图：允许一个图片关联多个url，即将多个图片合并为一个图片，如下导航栏demo：

<img usemap="#map1" border=0  src="/images/imagemap.gif?t=1196816255">

<map name="map1">

<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">

<area shape="rect" coords="36,0,66,31" href="gifs.html" title="Gifts">

<area shape="rect" coords="71,0,101,31" href="settings.html" title="Cart">

<area shape="rect" coords="106,0,136,31" href="help.html" title="Help">

</map>

但如上方法采取手工方式则很难完成且容易出错，而且除了矩形之外几乎无法定义其他形状，通过DHTML创建的图片地图在IE中无法工作。

CSS Sprites精灵图:还可通过css中的background-position来定位图片中的某一具体部分,它比图片地图更灵活，更加建议使用。

内联图片：通过使用data：URL数据形式可以替代http请求，甚至可以用于script和a标签中，其缺陷是Base64编码会增加图片的大小，并且嵌在网页中，会加大网页的数据量，

但它可以减少http网络请求耗时。这里提供图片生成dataurl数据的方法。

var can = document.createElement("canvas")；
var ctx = can.getContext("2d")；
img.onload = function(){  
     ctx.drawImage(this, 0, 0, width, height);
    can.toDataURL();
}

2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。
3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。
4）充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据，格式类似于Expires:sun ,20 Dec 2021 19:00:00 GMT。如果当前时间小于Expires指定的时间，浏览器就会从缓存中直接获取相关的数据信息或html文件，如果当前时间大于Expires指定的时间，浏览器会向服务器发送请求来获取相关数据信息。
以Apache为例，可在Apache的配置文件httpd.conf中设置Expires。
2. 图片优化
优化方法：
1）尽可能的使用WebP格式的图片，它相对Png图片来说体积更小，并且图片并没有失真或者模糊，webp格式必然会成为未来的主流。
前端判断断浏览器是否支持webp格式，主要有两种方式：
一种是利用canvas绘制来判断，一种是利用img对象来加载一个1px的webp图片。核心代码分别如下：
方法一：
在这里插入图片描述
方法二：

2）对于不同格式的图片，在上线之前最好进行一定的优化。
3）图片的延迟加载，也叫做赖加载。
3. 使用无cookie域名
无cookie域名的概念:当发送一个请求时，同时还要请求一张静态的图片和发送cookie时，服务器对于这些cookie不会做任何使用，也就是说这些cookie没什么用，没不要随请求一同发送。
4. 样式表和JS文件的优化
一般我们会把css样式表文件放到文件的头部。比如，放到<head>标签中，这样可以让CSS样式表尽早地完成下载。对应js脚本文件，一般我们把他放到页面的尾部。
5. 开启GZIP
GZIP即数据压缩，用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单，到对应的web服务配置文件中设置一下即可。以Apache为例，在配置文件httpd.conf中添加。
6. 使用CDN
CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

7. 前端代码结构的优化