前端性能优化实践之 SVG Flex 预加载窗口加载（7）1、移动端图标 SVG ？和 PNG 相比较 iconfo

`1、移动端图标 SVG ？`

和 PNG 相比较 iconfont 优势

敲一个例子

  1、网页搜索 iconfont 常规使用 ali 不过这个不用登陆 https://icofont.com/icons
  2、下载下来 并且使用 
  3、

举个例子说明这个事情

页面效果展示非常nice ～

`2、使用 FlexBox 优化布局？`

1、display: flex 作为父级容器
2、子容器也可 使用 display:flex 作为下一级的 父级容器
3、常规 用在移动端和小程序，并且 非常容易实现水平 垂直居中效果 
4、可以 进行不同尺寸的自适应布局  非常的强大和nice

举个例子说明这个事情

再敲一个例子 实现经典的布局
html 结构

      <header class="header">Header</header>
      <article class="main">
        <p>
          djajdjanndadmamdma dajdadnadnandamd djajdjanndadmamdma
          dajdadnadnandamd djajdjanndadmamdma dajdadnadnandamd
          djajdjanndadmamdma dajdadnadnandamd
        </p>
      </article>
      <aside class="aside nav">nav</aside>
      <aside class="aside ads">ads</aside>
      <footer class="footer">Footer</footer>
    </div>

css 样式

      .wrapper {
        display: flex;
        flex-flow: row wrap;
        text-align: center;
      }
      .wrapper > * {
        padding: 10px;
        flex: 1 100%;
      }
      .main {
        background-color: slateblue;
      }
      .header {
        background-color: skyblue;
      }
      .nav {
        background-color: pink;
      }
      .ads {
        background-color: yellow;
      }
      .footer {
        background-color: lavender;
      }

      @media all and (min-width: 700px) {
        .aside {
          flex: 1 0 0;
        }
      }
      @media all and (min-width: 800px) {
        .main {
          flex: 3 0 0;
          order: 2;
        }
        .nav {
          order: 1;
        }
        .ads {
          order: 3;
        }
        .footer {
          order: 4;
        }
      }

实现效果

注意为了适应移动端布局需要加 meta 标签 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 不缩放按照实际设备宽度适应展示
order 表示展示顺序

`3、优化资源加载顺序？`

首先浏览器加载资源会有默认的先后顺序的，使用 preload / prefetch 目的就是更改默认顺序

1、 先举个 preload 的例子加载 svg 图片

基本样子没有添加 preload

html 是最高优先级的然后图片顺序加载
当我添加了 preload

2、 再举个 preload 的例子加载加载字体

先敲一点架子

引用 Google 字体

页面效果非常帅

接下来如何使用 preload 优化字体加载呢？

页面效果

举个 prefetch 的例子
我们在 preload.html 主页使用 prefetch 尝试提前加载后续页面需要用到的css

提升后续使用加载速度

如何动态加载后续补充就是封装两个方法，然后在适当时间调用

`4、预渲染页面`

尝试使用 react-snap 启动预渲染技术

  1、安装  yarn add --dev react-snap

  2、配置一下

配置直接看官网

先看一下没有预渲染参与时FCP 首屏加载时间

配置预渲染后使用预渲染的结果为

可以看到有明显的提升
但预渲染有个问题， 我们常规的 css 都不是内联的是放在外部的单文件，导致会先加载 html 后加载 css 时会闪烁，解决方法是尽量将重要的内容内联写在 html 中

`5、window 窗口化提高列表性能`

可以解决的问题

1、第一个例子

 1、安装插件 npm i - D react-window 
 2、写一个 ListComponent 做一个窗口显示 部分 list 
 3、在 About 组件内 使用 ListComponent 组件
 4、查看页面效果

ListComponent.jsx

import { FixedSizeList } from "react-window";
import model from "../model";

// 定义 item
const items = [];
for (let i = 0; i < 100; i++) {
  items.push(
    model.map((item, index) => (
      <img
        src={item.image}
        alt={item.name}
        key={index}
        width={100}
        height={90}
      />
    ))
  );
}

const Content = ({ index, style }) => {
  // 扩展样式
  let styleExtend = {
    ...style,
    borderBottom: "1px solid #fff",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };
  return <div style={styleExtend}>{items[index]}</div>;
};

const ListComponent = (props) => (
  // 固定长度的list 非固定还有另外一种
  <FixedSizeList
    width={400}
    height={360}
    itemSize={120}
    itemCount={100}
    className={props.className}
  >
    {Content}
  </FixedSizeList>
);

export default ListComponent;

About.jsx

import SolidSvg from "../img/icon/address-card-solid.svg";
import ListComponent from "./components/ListComponent";
import { withStyles } from "@material-ui/core/styles";

const styles = () => ({
  listContainer: {
    backgroundColor: "#353740",
    border: "2px solid #bcbcbc",
    borderRadius: "20px",
  },
});

class About extends Component {
  render() {
    return (
      <div>
        {/* <SolidSvg width={100} color={"#f3f3f3"} /> */}
        <ListComponent className={this.props.classes.listContainer} />
      </div>
    );
  }
}

export default withStyles(styles)(About);

页面效果展示

不过其实网络部分可以优化，因为在向上或向下过程中都会发起网络请求

2、第二个例子 上下左右滚动

 1、定义一个 Cell 定位行列
 2、使用 这个 Cell 
 3、查看 滚动效果

定义 Cell

使用 Cell

查看滚动效果 可实现上下左右滚动非常nice

3、实现 上下左右滚动后如何快速定位到某行或某列？

1、改写成 class 组件因为要使用 React.createRef()
2、取一个位置 
3、点击click 到这个位置
4、页面效果

React.createRef()

取位置

click

页面效果点击后到对应位置非常nice

`6、使用骨架组件减少布局移动？`

感觉这个东西是有效的可以用在项目上，减少页面布局抖动
这个抖动用 command shift + P 找到这个选项页面刷新会展示出蓝色部分

1、安装 npm install -d react-placeholder
2、复制 一份 Cart组件 到 Contact 并做一些删减 
3、简单使用方法 直接 用官网的例子进行改动 
4、查看 页面效果 对比

Contact.jsx 有些没有使用到可去掉

import MaterialUICard from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
import "./animation.css";
import CardMedia from "@material-ui/core/CardMedia";
import { LazyLoadImage } from "react-lazy-load-image-component";
import ReactPlaceholder from "react-placeholder/lib";
import {
  TextBlock,
  MediaBlock,
  TextRow,
  RectShape,
  RoundShape,
} from "react-placeholder/lib/placeholders";

const awesomePlaceholder = (
  <div className="my-awesome-placeholder">
    <RectShape
      color="#aaa"
      style={{
        width: 300,
        height: 200,
        marginTop: "20px",
        marginBottom: "20px",
      }}
    />
    <TextBlock rows={2} color="#aaa" style={{ width: 300, height: "1rem" }} />
  </div>
);

const styles = (theme) => ({
  root: {
    margin: theme.spacing(1),
    willChange: "transform",
    width: 300,
  },
  card: {
    width: 300,
    height: 300,
  },
  cardSpinning: {
    width: 300,
    animation: "3s linear 1s infinite running rotate",
  },
  media: {
    height: 200,
    width: 300,
    objectFit: "cover",
    backgroundColor: "#aaa",
    animation: "react-placeholder-pulse 1.5s infinite",
  },
});

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ready: false,
    };
  }

  becomeReady = () => {
    setTimeout(() => {
      this.setState({
        ready: true,
      });
    }, 2000);
  };

  render() {
    return (
      <div className={this.props.classes.root}>
        {/*添加点击事件，触发动画*/}
        <ReactPlaceholder
          ready={this.state.ready}
          customPlaceholder={awesomePlaceholder}
        >
          <MaterialUICard onClick={this.handleClick}>
            <CardMedia
              component="img"
              className={this.props.classes.media}
              image={this.props.image}
              height="200"
              onLoad={this.becomeReady()}
            />
            <CardContent>
              <Typography gutterBottom variant="h6" component="h2">
                {this.props.description}
              </Typography>
              <Typography component="p">{this.props.description}</Typography>
            </CardContent>
          </MaterialUICard>
        </ReactPlaceholder>
      </div>
    );
  }
}

export default withStyles(styles)(Contact);