前端优化合集

╰半夏微凉° 2022-10-14 00:53 149阅读 0赞

## 防抖与节流 ##

函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，  
如果n秒内高频事件再次被触发，则重新计算时间。

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，  
所以节流会稀释函数的执行频率。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，  
以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，  
假死或卡顿的现象。

## 重绘和重排 ##

### 重绘（repaint或redraw）： ###

重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性  
重新绘制，使元素呈现新的外观。重绘发生在元素的可见的外观被改变，但并没有  
影响到布局的时候。比如，仅修改DOM元素的字体颜色  
（只有Repaint，因为不需要调整布局）

### 重排（重构/回流/reflow）： ###

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要
    重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面
    第一次加载的时候。

触发重排的条件：任何页面布局和几何属性的改变都会触发重排：

· 页面渲染初始化(无法避免)  
· 添加或删除可见的DOM元素  
· 元素位置的改变，或者使用动画  
· 元素尺寸的改变——大小，外边距，边框  
· 浏览器窗口尺寸的变化  
· 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度  
的改变  
重排必定会引发重绘，但重绘不一定会引发重排。

### 如何避免触发回流和重绘： ###

· 避免频繁使用 style，而是采用修改class的方式。  
· 将动画效果应用到position属性为absolute或fixed的元素上。  
· 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在  
display属性为none的元素上进行的DOM操作不会引发回流和重绘  
· 使用createDocumentFragment进行批量的 DOM 操作。  
· 对于 resize、scroll 等进行防抖/节流处理。  
· 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变  
量缓存起来。  
· 利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，  
也就是GPU加速。

## 如何减少http请求 ##

### 1.使用图片地图： ###

假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的
    图片
    在加载时会产生5个HTTP请求。然而，使用一个图片地图可以提高效率，
    这样就只需要一个HTTP请求。

服务器端图片地图：将所有点击提交到同一个url，同时提交用户点击的  
　　x、y坐标，服务器端根据坐标映射响应。  
　　客户端图片地图：直接将点击映射到操作。

### 2.使用CSS Sprites（css精灵）： ###

传说中的雪碧图，可以将多张图片合成一张，用background-position来定位具体图片的技术，非常适用于一整套小图标的应用场景。  
图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。使用CSS Sprites还有可能降低下载量，可能大家会认为合并后的图片会比分离图片的总和要大，因为还有可能会附加空白区域。实际上，合并后的图片会比分离的图片总和要小，因为它降低了图片自身的开销，譬如颜色表、格式信息等。

### 3.使用字体图标： ###

在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式，何乐而不为。

### 4.合并js脚本和css样式表： ###

一般网站都用到了很多的js代码和css代码，尤其是对于用了模块化的网站来说，文件非常多，非常碎片化，初次启动页面的时候，可能一下子就几十个请求出去了，导致首屏时间特别的慢。合并文件的效率要比不合并高1/3。所以，对于资源特别碎片的网站，建议合并一些通用的代码，减少http请求。

### 5.内联图片（base64）： ###

内联图片：把图片文件编码成base64，优点是可以减少http的请求，缺点是不能跨域缓存。可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。只会在一些质量较小的图标类图片上面使用，否则得不偿失。

## 渐进增强和优雅降级 ##

### 什么是渐进增强 ###

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

.transition {  /*渐进增强写法*/
        -webkit-border-radius:30px 10px;
        -moz-border-radius:30px 10px;
        border-radius:30px 10px;
    }

### 什么是优雅降级 ###

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

.transition {  /*优雅降级写法*/
        border-radius:30px 10px;
        -moz-border-radius:30px 10px;
        -webkit-border-radius:30px 10px;
    }

### 二者的区别 ###

1.  如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。 你想一下不可能拿个基本功能版给客户看呀，多寒酸，搞不好一气之下就不找你做了，然后就炸了。但是呢，也有好处，就是提供了较好的平台稳定性，维护起来资金小， 长期来说降低开发成本。
2.  那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的 产品，优雅降级不失为一种节约成本的方法。