前端性能优化，我们可以做哪些？
1、雪碧图技术
这个很简单，把每个小图标都整合到一张大图上面，极大的减轻http请求数，同时能够让图片快速加载进来。
考虑到当前的5g的发展前景，以后图片不会造成加载延迟的现象。
2、浏览器渲染机制
输入一个网址：我们得到服务端html文件。
根据html文件，从头到尾的一个个的依次渲染页面渲染页面。
但是遇到图片——不会等待图片的加载完毕，会直接渲染下面的标签。
如果图片加载出来——根据图片选择，由于图片要占用空间，决定是否重新加载页面，这个概念叫reflow。（优化的方式——给图片宽高）。
reflow和什么相关：占位面积、定位方式、边距。
对于样式中的颜色变化，叫做repaint、这个就只需要把颜色改变。所以性能上来说，repaint稍微比reflow高点。
repaint和什么相关：和颜色变化相关
3、webpack、gulp等打包工具的使用
压缩代码，减少了代码体积。
合并文件，让我们减少了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性能优化
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 前端解决跨域问题的8种方案（最新最全）
- 下一篇： WEB前端性能优化常见方法
