前端性能优化，我们可以做哪些？

测试积点老人 · 发表于 2018-12-12 15:27:58

1、雪碧图技术

这个很简单，把每个小图标都整合到一张大图上面，极大的减轻http请求数，同时能够让图片快速加载进来。

考虑到当前的5g的发展前景，以后图片不会造成加载延迟的现象。

2、浏览器渲染机制

输入一个网址：我们得到服务端html文件。

根据html文件，从头到尾的一个个的依次渲染页面渲染页面。

但是遇到图片——不会等待图片的加载完毕，会直接渲染下面的标签。

如果图片加载出来——根据图片选择，由于图片要占用空间，决定是否重新加载页面，这个概念叫reflow。（优化的方式——给图片宽高）。

reflow和什么相关：占位面积、定位方式、边距。

对于样式中的颜色变化，叫做repaint、这个就只需要把颜色改变。所以性能上来说，repaint稍微比reflow高点。

repaint和什么相关：和颜色变化相关

3、webpack、gulp等打包工具的使用

压缩代码，减少了代码体积。

可以把多个css文件，多个js文件，合并为一个css文件/js文件。

合并文件，让我们减少了http请求数。

4、避免页面跳转，也就是使用单页面应用的开发。

每次页面跳转，就是一次html文件的下载过程。而这个过程，我们首先从服务端下载网页，再进行渲染，网页性能体验会很差。而单页面应用，它从一开始，就把完整的网页给加载到本地。

5、延迟加载、懒加载技术

什么是懒加载技术：

原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载技术</title>
<style>
li{
width: 300px;
height: 400px;
}
li img{
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
window.onload = function () {
var lazyLoad = (function () {
var timer = 0;
function init() {
$(window).on('scroll',function () {
timer && clearTimeout(timer);
timer = setTimeout(function () {
console.log('scroll')
showImage();
},200)
});
showImage();
}
function showImage() {
$('img').each(function () {
var current = $(this);
if(current.attr('isLoaded')) return;
shouldShow(current) && showImg(current);
})
}
function shouldShow(node) {
var scrollH = $(window).scrollTop(),
winH = $(window).height(),
top = node.offset().top;
if(top < winH + scrollH){
return true;
}else{
return false;
}
}
function showImg(node) {
node.attr('src',node.attr('data-src'));
node.attr('isLoaded',true);
}
return {
init: init
}
})();
lazyLoad.init();
};
</script>
</head>
<body>
<ul>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
</ul>
</body>
</html>

复制代码

6、将css放在HEAD中

如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

7、Vue项目的按需加载

vue中的懒加载是通过webpack的代码分割来实现的，下面是官网文档：https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

主要是在加载路由的时候，使用：
const Main = r => require.ensure([], () => r(require(‘../views/main/Main’)))

require.ensure就是webpack提供的异步加载的方式。

8、关于React的性能优化

react中，进行性能优化的核心就是shouldComponentDidMount周期函数。
下面是我写的性能优化的博客：
react性能优化

9、设置合理的http缓存

http请求中，我们可以合理的设置headers，就能达到缓存的目的。

有两种常见的缓存，强制缓存和对比缓存：

第一种：强制缓存。
直接访问浏览器中的缓存数据，如果存在，则直接使用浏览器中的数据。如果不存在，则再向服务器发送请求，然后得到服务器的数据，再把这些数据存在浏览器中。
第二种：对比缓存。
首先，获取浏览器中的数据缓存标识，再获取服务器上面的数据缓存标识，如果相匹配，则直接从浏览器中获取数据，如果不匹配，则从服务器上获取数据。

关于缓存标识，有两类标识：

第一类：
第一次请求，服务器会返回一个Last-Modified。
下一次请求，浏览器会自动在headers中添加一条If-Modified-Since属性，记录的就是上一次数据发生修改的时间。

第二类：
第一次请求，服务端返回一个Etag资源唯一标识符。
第二次请求，浏览器会自动携带一个If-None_Match标识符。

应用程序缓存

创建cache manifest文件，通过给html文件中的HTML标签添加一个manifest属性来实现的。

<span class="hljs-doctype" style="box-sizing: border-box; outline: 0px;"><!DOCTYPE HTML></span>

复制代码

		自动登录	找回密码
密码			(注-册)加入51Testing

[转贴] 前端性能优化，我们可以做哪些？

站长推荐 /1