ToC端基础知识准备

 

目录

前言

一、基础知识准备

二、CSS布局

2.1 圣杯布局

 2.1.1 圣杯布局之flex

2.1.2 圣杯布局之float 

2.1.3 圣杯布局之position 

2.2 双飞翼布局

2.3 Flex布局

2.3.1 概念

2.3.2 容器属性

2.3.3 项目属性

三、JavaScript

四、Vue

五、若依框架

六、CAS单点登录

七、性能优化

7.1 加载优化（减少http请求数）

7.1.1 合并图片

7.1.2 合并压缩css样式表和js脚本

7.1.3 去掉不必要的请求

7.1.4 首屏加载

7.1.5 充分利用缓存

7.1.6 预加载

7.1.7 异步加载第三方资源

7.2 图片优化

7.2.1 图片格式

7.2.2 图片懒加载

7.2.3 避免src属性为空

7.2.4 避免使用DataURL        

7.3 使用CDN

7.4 开启Gzip（代码压缩）

7.5 样式表和JS文件的优化

7.6 减少不必要的Cookie

7.7 脚本优化

7.8 前端代码结构的优化

7.9 SEO优化

---

前言

本人是一枚前端开发人员，目前要做一个公司内部的2C端项目，为了在开发过程中，能对某些基础知识快速查找以及随查随用，故本文会介绍一些针对公司内部ToC端项目的前端基础知识。

PS：由于本人经验有限，若下文中有什么讲的不对的，欢迎大家指出及探讨。

---

一、基础知识准备

1. CSS布局：圣杯布局、双飞翼布局、Flex布局
2. js
3. vue
4. 若依框架
5. CAS单点登录
6. 性能优化
7. 2C端项目首页代码参考链接：①hpos/vue/src/views/layout at master · Awefull/hpos · GitHub

②https://github.com/PowerDos/Mall-Vue/tree/master/src/components

二、CSS布局

2.1 圣杯布局

        概念：圣杯布局是经典的CSS布局，左右两栏宽度不变，中间那一栏是自适应，下面将用flex、float、position三种方法进行布局。

效果图：

 2.1.1 圣杯布局之flex

• left和right定宽为400px，middle自适应
• 给box容器设置弹性布局display：flex
• left和right定宽400px，middle设置为flex：1

body代码：

<header>header</header>
<div class="box">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>
<footer>footer</footer>

CSS代码：

    *{
      margin: 0;
      padding: 0;
    }
    header{
      height: 80px;
      background-color: #ccc;
    }
    .box{
      height: 400px;
      background-color: yellow;
      display: flex;
    }
    .box .middle{
      
      height: 400px;
      background-color: pink;
      flex: 1;
    }
    .box .left{
      width: 200px;
      height: 400px;
      background-color: red;
    }
    .box .right{
      width: 200px;
      height: 400px;
      background-color: purple;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }

2.1.2 圣杯布局之float 

• 将left浮动靠左，right浮动靠右

body代码：

<header>header</header>
<div class="box">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="middle">middle</div>
</div>
<footer>footer</footer>

CSS代码：

    *{
      margin: 0;
      padding: 0;
    }
    header{
      height: 80px;
      background-color: #ccc;
    }
    .box{
      height: 400px;
      background-color: yellow;
    }
    .box .left{
      width: 200px;
      height: 400px;
      background-color: red;
      float: left;
    }
    .box .right{
      width: 200px;
      height: 400px;
      background-color: purple;
      float: right;
    }
    .box .middle{
      height: 400px;
      background-color: pink;
    }
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }

2.1.3 圣杯布局之position 

• left和right宽度设置为20%，中间60%
• 将父元素box设置为相对定位，再将left、right、middle设置为绝对定位

body代码：

<header>header</header>
<div class="box">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>
<footer>footer</footer>

CSS代码：

    *{
      margin: 0;
      padding: 0;
    }
    header{
      height: 80px;
      background-color: #ccc;
    }
    .box{
      height: 400px;
      background-color: yellow;
      position: relative;
    }
    .box .left{
      width: 20%;
      height: 100%;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }
    .box .middle{
      width: 60%;
      height: 100%;
      background-color: pink;
      position: absolute;
      top: 0;
      left: 20%;
    }
    .box .right{
      width: 20%;
      height: 100%;
      background-color: purple;
      position: absolute;
      top: 0;
      right: 0;
    }
    
    footer{
      height: 100px;
      background-color: black;
      color: white;
    }

2.2 双飞翼布局

body代码：

<div class="wrapper">
   <div class="header">header</div>
   <div class="container">
     <div class="middle">
       <div class="middle-inner">middle</div>
     </div>
     <div class="left">left</div>
     <div class="right">right</div>
   </div>
   <div class="footer">footer</div>
</div>

CSS代码：

    *{
      margin: 0;
      padding: 0;
    }
    .wrapper{
      min-width: 1000px;
    }
    .header{
      width: 100%;
      height: 80px;
      background-color: #ccc;
    }
    .container{
      width: 100%;
      height: 500px;
      overflow: hidden;
      background-color: thistle;
    }
    .left{
      width: 200px;
      background-color: cornflowerblue;
      height: 500px;
      float: left;
      margin-left: -100%;
    }
    .right{
      width: 200px;
      background-color: darkorange;
      height: 500px;
      float: left;
      margin-left: -200px;
    }
    .middle{
      background-color: greenyellow;
      width: 100%;
      height: 500px;
      float: left;
    }
    .middle-inner{
      margin: 0 200px;
    }
    .footer{
      width: 100%;
      height: 150px;
      background-color: #000;
      color: white;
    }

2.3 Flex布局

2.3.1 概念

        Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

        采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

        容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关，所以有必要在一开始首先理解它。

        主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

        项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.3.2 容器属性

容器的6个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

2.3.2.1 flext-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

 flex-direction属性有4个值

• row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
• row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
• column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
• column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。

2.3.2.2 flex-wrap

        默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap属性有3个值

• nowrap（默认）：不换行（列）。
• wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
• wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。

换行（列）时，项目还按照主轴方向排列。

2.3.2.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

2.3.2.4 justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

 justify-content属性有5个值

• flex-start（默认）：与主轴的起点对齐。
• flex-end：与主轴的终点对齐。
• center：与主轴的中点对齐。
• space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.3.2.5 align-items

align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下，横向交叉轴始终自左而右。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items属性有5个值

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，项目将占满整个容器的高度。

2.3.2.6 align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content属性有6个值

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：主轴线占满整个交叉轴。

2.3.3 项目属性

设置在项目上的6个属性。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

2.3.3.1 order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

如果不给项目设置order值，默认值为0，那么项目的顺序按照结构顺序排列。

2.3.3.2 flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

2.3.3.3 flex-shrink

        flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。

当子元素宽度和大于父元素宽度时，flex-shrink 将会按照一定的比例进行收缩，即将子元素宽度之和与父元素宽度的差值按照子元素flex-shrink值来分配给各个子元素，指定各个子元素收缩多少，每个子元素原本宽度减去按比例分配的值，其剩余值为收缩完的实际宽度。

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-shrink之和大于或等于1
主轴长度为1000px，子元素溢出空间：(300 + 400 + 500) - 1000 = 200 px。

项目1 占 300px，项目2 占 400px，项目3 占 500px，各个项目的 flex-shrink 值分别为1，2，3，总权重为 300 * 1 + 400 * 2 + 500 * 3 = 2900px，则每个项目的权重分别为：

项目1：(300 * 1) / 2900 = 0.103448275862069
项目2：(400 * 2) / 2900 = 0.2758620689655172
项目3：(500 * 3) / 2900 = 0.5172413793103448
下面，计算每个项目分别缩小的空间：

• 项目1：200（溢出空间）* 0.103448275862069 = 20.6896551724138 px
• 项目2：200（溢出空间）* 0.2758620689655172 = 55.17241379310344 px
• 项目3：200（溢出空间）* 0.5172413793103448 = 103.448275862069 px

效果：

flex-shrink小于1
当所有项目的flex-shrink之和小于1，只收缩溢出空间的一部分。

假设项目1 为0.1，项目2为 0.2，项目3为 0.3，溢出200px，总收缩空间为：200px * (0.1 + 0.2 + 0.3) = 120px

每个项目的权重计算方式是不变的（和上面的一样），每个项目分别缩小：

• 项目1：120 * 0.1153846153846154 = 13.84615384615385 px
• 项目2：120 * 0.3076923076923077 = 36.92307692307692 px
• 项目3：120 * 0.5769230769230769 = 69.23076923076923 px
  

2.3.3.4 flex-basis

        flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

2.3.3.5 flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

2.3.3.6 align-self

        align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

三、JavaScript

推荐书籍：

• 《JavaScript高级程序设计（第4版）》
• 《你不知道的JavaScript（上/中/下卷）》，共三本
• 《JavaScript设计模式与开发实践》
• 《学习JavaScript数据结构与算法》

四、Vue

涵盖vue2、vue-router、vuex，推荐查看官方文档：

• 介绍 — Vue.js
• 入门 | Vue Router
• Vuex 是什么？ | Vuex

五、若依框架

推荐官方文档：

• 介绍 | RuoYi

六、CAS单点登录

        概念：当很多系统可以共用同一账号密码登录时，便可通过CAS单点登录的形式减少登录系统的次数，即通过某一账号密码登录某一系统之后，在该系统中授权其它系统，从而达到无需再次登录账号便可直接进入其它系统中操作。

        举例：有微信、QQ账号，在自己手机上，登录QQ或微信账号以后，便可通过扫二维码使用QQ或微信账号的形式登录其它系统，比如印象笔记、微博等。

七、性能优化

7.1 加载优化（减少http请求数）

7.1.1 合并图片

        当图片较多时，像精灵图，雪碧图可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

7.1.2 合并压缩css样式表和js脚本

合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。

7.1.3 去掉不必要的请求

去掉不必要的请求，开发写代码或者系统升级之后残留的无效请求连接。

7.1.4 首屏加载

首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化。

7.1.5 充分利用缓存

来减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存。

7.1.6 预加载

大型资源页面可使用Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验。

7.1.7 异步加载第三方资源

第三方资源不可控，会影响页面加载，所以要异步加载第三方资源。

7.2 图片优化

7.2.1 图片格式

        尽可能的使用PNG格式的图片，它相对来说体积较小，可以使用工具压缩，在上线之前最好进行一定的优化。

7.2.2 图片懒加载

        同时在代码中进行图片的延迟加载，也叫做赖加载

7.2.3 避免src属性为空

        避免img、iframe等标签的src属性为空：空src会重新加载当前页面，影响速度和效率。

7.2.4 避免使用DataURL        

        图像尽量避免使用DataURL：DataURL图像没有使用图像压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长。

7.3 使用CDN

        CDN：实现把内容从中心媒体服务器分发到边缘服务器的网络体系即内容分发网络，CDN具有更低的网络延迟和丢包率，能够分配负载，节省带宽提高网站的性能，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

        如果安全性对你的网站很重要，就不要使用公共的CDN，因为当你远程从CDN请求文件时，你的访问来源信息也被发送过去，一些远程的js文件可能被修改用来搜集你的用户或者系统信息，而当你使用https协议时，能选择的CDN就更加有限。

7.4 开启Gzip（代码压缩）

Gzip即数据压缩，前端生产环境中将js、css、图片等文件进行压缩，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。

7.5 样式表和JS文件的优化

1. 头部内联的样式和脚本会阻塞页面的渲染，一般我们会把css样式表文件放到文件的头部使用link引入，这样可以让CSS样式表尽早地完成下载。

2. 对应js脚本文件，一般我们把脚本放在尾部并使用异步方式加载，这样可以尽最大限度的减少样式和脚本对页面的阻塞。

7.6 减少不必要的Cookie

Cookie存储在客户端，伴随着HTTP请求在浏览器和服务器之间传递，由于cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器，从而会影响加载速度，所以尽量减少不必要的Cookie。

7.7 脚本优化

1.  复杂动画效果，使用绝对定位让其脱离文档流，避免循环DOM元素，用transform:translate 代替 position  left、right...以此来尽量减少回流和重绘。

2．将脚本往后挪，减少对并发下载的影响。

3．缓存.length的值：每次.length计算使用一个变量保存值。

4．尽量使用事件委托：不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点，避免批量绑定事件以此来减少内存消耗和DOM操作。

5．尽量使用id选择器：id选择器选择元素是最快的，具有唯一性，灵活性和优先性的优点。

7.8 前端代码结构的优化

1．设置Viewport：HTML的viewport可加快页面的渲染。

2．减少DOM结点：DOM结点太多会影响页面的渲染。

3．尽量使用css3动画：合理使用requestAnimationFrame动画代替setTimeout。

4．优化高频事件：scroll、touchmove等事件尽量使用函数防抖节流等进行限制。

5.  不滥用WEB字体：WEB字体需要下载、解析、重绘当前页面，尽量减少使用。

6.  文件命名规则须统一且要有意义，同类型文件归类到相同的文件夹中。

7.9 SEO优化

1.  标题： 标题字数不要太长，一般写核心的关键词和网站主题相关的内容。

2.  描述：描述是整个页面的综合说明，作用和重要性仅次于标题，描述最好能得吸引人一点，带上自己公司的品牌词和电话，并包括目标关键词。

3.  关键词：对关键词进行优化，能够让用户在搜索关键词的时候，能够准确的定位到自己要搜索的内容和网站，能够让网站被更多有需要的人看到。

4.网站代码：网站代码尽量精简，节约百度蜘蛛的时候，这一点针对大型网站特别重要。