前端知识笔记

CSS

1. CSS中盒模型有传统的content-box与border-box，二者区别在于前者的width与height设置的是content-box，而后者设置的是border-box，注意背景图之类的属性显示依然相同，默认的background-origin属性就是padding-box，即背景图从padding-box开始显示，注意这个属性不要与background-color混淆，background-color默认全部显示。

2. CSS优先级

   1. ID选择器的个数。
   2. 类选择器，属性选择器，伪类选择器的个数。
   3. 标签选择器，伪元素选择器的个数。

3. 使用rem的移动端适配方案

   核心思路为：

   1. 设置网页元素的width属性为rem单位。
   2. 通过js获取客户viewport宽度，并除以初始设置宽度，得到放大比例scale。
   3. 修改html元素的font-size，达到等比例适配效果。

   1
   <!DOCTYPE html>
   2
   <html lang="zh-CN">
   3
     <head>
   4
       <meta charset="UTF-8" />
   5
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   6
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   7
       <title>Document</title>
   8
       <style>
   9
         * {
   10
           padding: 0;
   11
           margin: 0;
   12
         }
   13
         .w-550px {
   14
           width: 550rem;
   15
           height: 100px;
   16
           background-color: rgb(209, 255, 240);
   17
         }
   18
         .full {
   19
           width: 750rem;
   20
           height: 100px;
   21
           background-color: rgb(195, 200, 199);
   22
         }
   23
       </style>
   24
     </head>
   25
     <body>
   26
       <div class="w-550px"></div>
   27
       <div class="full"></div>
   28
       <script>
   29
         function setRem() {
   30
           // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
   31
           const scale = document.documentElement.clientWidth / 750;
   32
           document.documentElement.style.fontSize = scale + "px";
   33
         }
   34
         setRem();
   35
         window.onresize = setRem;
   36
       </script>
   37
     </body>
   38
   </html>

   确定浏览器窗口尺寸的使用方案

   1
   var w =
   2
     window.innerWidth ||
   3
     document.documentElement.clientWidth ||
   4
     document.body.clientWidth;
   5
   
   6
   var h =
   7
     window.innerHeight ||
   8
     document.documentElement.clientHeight ||
   9
     document.body.clientHeight;

4. DPI 的相关概念 DPI 的全称是 Dots Per Inch，意思是每英寸点数。它是一个度量单位，用于表示点阵数码影像的分辨率，也就是每一英寸长度中，取样、可显示或输出点的数目。DPI 也可以用来衡量打印机、鼠标等设备的分辨率，一般来说，DPI 值越高，表明设备的分辨率越高，图像的清晰度越高 。

   DPI 有以下几种应用场景：

   • 图片 DPI：图片 DPI 是指每英寸的像素，类似于密度，即每英寸图片上的像素点数量，用来表示图片的清晰度。由于受网络传输速度的影响，web 上使用的图片都是 72dpi，但是冲洗照片不能使用这个参数，必须是 300dpi 或者更高 350dpi。
   • 打印精度 DPI：打印精度 DPI 是指打印机在每英寸可打印的点数，至少应有 300dpi 的分辨率，才能使打印效果得到基本保证。打印尺寸、图像的像素数与打印分辨率之间的关系可以利用下列的计算公式加以表示：图像的横向（竖向）像素数=打印横向（竖向）分辨率 × 打印的横向（竖向）尺寸，图像的横向（竖向）像素数/打印横向（竖向）分辨率=打印的横向（竖向）尺寸。
   • 鼠标 DPI：鼠标 DPI 是指鼠标的定位精度，单位是 dpi 或 cpi，指鼠标移动中，每移动一英寸能准确定位的最大信息数。DPI 是每英寸点数，也就是鼠标每移动一英寸指针在屏幕上移动的点数。比如 400DPI 的鼠标，他在移动一英寸的时候，屏幕上的指针可以移动 400 个点。鼠标 DPI 不是越高越好，不同的 DPI 适合不同的使用场景和用户习惯。

5. 前端中 DPR 与 PPI 的相关概念 设备像素：即屏幕能够显示的最小像素，一般为屏幕的参数。 设备独立像素：即屏幕真正显示的像素，对于高分屏可能将几个像素点合为一个像素点显示。 DPR：device pixel ratio，即设备像素与设备独立像素的比值，可通过window.devicePixelRatio获取。 PPI：pixel per inch，即单位英寸数的像素点体积。

6. BFC(Block Formatting Context)：块级格式化上下文，可以创造出一处独立的空间，使得元素内部的影响不会到外部。 触发条件：

   • html根元素。
   • 脱离文档流的元素，如浮动，定位里面的absolute和fixed。
   • overflow属性不为visible，为hidden，scroll，auto。
   • flex，inline-flex，grid，inline-grid，table，inline-table，inline-block。 作用：
   • 解决了子元素浮动父元素高度塌陷的的问题。
   • 解决了margin合并的问题。
   • 自己不会被浮动元素所覆盖。

   注意BFC内部子元素的布局逻辑与正常文档流仍然相同，也就是仍然会出现margin塌陷等问题，BFC的作用主要是消除对开启BFC元素本身的影响。

   1
   <style>
   2
     .wrap {
   3
       overflow: hidden; // 新的BFC
   4
     }
   5
     p {
   6
       color: #f55;
   7
       background: #fcc;
   8
       width: 200px;
   9
       line-height: 100px;
   10
       text-align: center;
   11
       margin: 100px;
   12
     }
   13
   </style>
   14
   <body>
   15
     <p>Haha</p>
   16
     <div class="wrap">
   17
       <p>Hehe</p>
   18
     </div>
   19
   </body>
   20
   
   21
   <style>
   22
     body {
   23
       width: 300px;
   24
       position: relative;
   25
     }
   26
   
   27
     .aside {
   28
       width: 100px;
   29
       height: 150px;
   30
       float: left;
   31
       background: #f66;
   32
     }
   33
   
   34
     .main {
   35
       height: 200px;
   36
       background: #fcc;
   37
       overflow: hidden;
   38
     }
   39
   </style>
   40
   <body>
   41
     <div class="aside"></div>
   42
     <div class="main"></div>
   43
   </body>

7. 实现元素水平垂直居中的方式

   • 行内元素或者行内块元素

     注意line-height倍数参考的是元素自身font-size的百分比。

     1
     span {
     2
       height: 100px;
     3
       line-height: 100px;
     4
       vertical-align: middle;
     5
     }

   • 块元素居中

     1
     /* 利用定位 */
     2
     .father {
     3
       position: relative;
     4
     }
     5
     .son {
     6
       position: fixed;
     7
       left: 0;
     8
       right: 0;
     9
       top: 0;
     10
       bottom: 0;
     11
       margin: auto;
     12
     }
     13
     
     14
     /* 利用定位加上margin */
     15
     .father {
     16
       position: relative;
     17
     }
     18
     .son {
     19
       position: fixed;
     20
       left: 50%;
     21
       right: 50%;
     22
       margin-left: -50px;
     23
       margin-top: -50px;
     24
       width: 100px;
     25
       height: 100px;
     26
     }
     27
     
     28
     /* 利用定位加上transform */
     29
     .father {
     30
       position: relative;
     31
     }
     32
     .son {
     33
       position: fixed;
     34
       left: 50%;
     35
       right: 50%;
     36
       transform: translate(-50%, -50%);
     37
     }
     38
     
     39
     /* 利用margin与maring-top */
     40
     .son {
     41
       margin: 0 auto;
     42
       margin-top: 父元素高度减子元素高度的一半;
     43
     }
     44
     
     45
     /* table布局 */
     46
     .father {
     47
       display: table-cell;
     48
       width: 200px;
     49
       height: 200px;
     50
       background: skyblue;
     51
       vertical-align: middle;
     52
       text-align: center;
     53
     }
     54
     .son {
     55
       display: inline-block;
     56
       width: 100px;
     57
       height: 100px;
     58
       background: red;
     59
     }
     60
     /* flex布局 */
     61
     .father {
     62
       display: flex;
     63
       justify-content: center;
     64
       align-items: center;
     65
       width: 200px;
     66
       height: 200px;
     67
       background: skyblue;
     68
     }
     69
     .son {
     70
       width: 100px;
     71
       height: 100px;
     72
       background: red;
     73
     }
     74
     .outer {
     75
       width: 400px;
     76
       height: 400px;
     77
       background-color: #888;
     78
       display: flex;
     79
     }
     80
     .inner {
     81
       width: 100px;
     82
       height: 100px;
     83
       background-color: orange;
     84
       margin: auto;
     85
     }
     86
     
     87
     /* grid网格布局 */
     88
     .father {
     89
       display: grid;
     90
       align-items: center;
     91
       justify-content: center;
     92
       width: 200px;
     93
       height: 200px;
     94
       background: skyblue;
     95
     }
     96
     .son {
     97
       width: 10px;
     98
       height: 10px;
     99
       border: 1px solid red;
     100
     }

8. 关于flex数值属性统一设置的问题。

   有关快捷值：auto (1 1 auto) 和 none (0 0 auto)

   • 只有一个非负值：视为flex-grow的值，flex-shrink视为1，flex-basis视为0。
   • 有两个非负值：视为flex-grow与flex-shrink的值，flex-basis视为0。
   • 一个非负值与一个百分数：视为flex-grow与flex-basis的值，flex-shrink视为1。
   • 当只有一个百分数或者长度的时候：视为flex-basis的值，flex-grow为1，flex-shrink为1。

9. grid布局

   1
   .wrapper {
   2
     display: grid;
   3
     /*  声明了三列，宽度分别为 200px 200px 200px */
   4
     grid-template-columns: 200px 200px 200px;
   5
     grid-gap: 5px;
   6
     /*  声明了两行，行高分别为 50px 50px  */
   7
     grid-template-rows: 50px 50px;
   8
   }
   9
   /* 通过repeat减少重复代码 */
   10
   .wrapper {
   11
     display: grid;
   12
     grid-template-columns: repeat(3, 200px);
   13
     grid-gap: 5px;
   14
     grid-template-rows: repeat(2, 50px);
   15
   }

   grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素 grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3 minmax(100px, 1fr)表示列宽不小于 100px，不大于 1fr grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度

   grid-row-gap: 10px 表示行间距是 10px

   grid-column-gap: 20px 表示列间距是 20px

   grid-gap: 10px 20px 等同上述两个属性

   1
   .container {
   2
     display: grid;
   3
     grid-template-columns: 100px 100px 100px;
   4
     grid-template-rows: 100px 100px 100px;
   5
     grid-template-areas:
   6
       "a b c"
   7
       "d e f"
   8
       "g h i";
   9
   }
   10
   /* 上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。
   11
   多个单元格合并成一个区域的写法如下 */
   12
   grid-template-areas:
   13
     "a a a"
   14
     "b b b"
   15
     "c c c";

   如果某些区域不需要利用，则使用"点"（.）表示 grid-auto-flow类似flex-direction，设置横向排列还是纵向排列。

10. 如何理解回流与重绘
    解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树

    将 DOM 树和 CSSOM 树结合，生成渲染树(Render Tree)

    Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

    Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

    Display:将像素发送给 GPU，展示在页面上

    优化手段：尽量使用类名，不使用内联的样式，使用fixed与absolute定位。脱离文档流减少对其他元素的影响。使用transform,opacity,filter等做动画，效率更高

11. css性能优化

    • 首屏内联关键css：防止外部导入css阻塞html显示。
    • 资源压缩，异步加载。
    • 避免使用昂贵的CSS属性，例如border-radius。

12. 文本超出省略显示

    1
    .line {
    2
      overflow: hidden;
    3
      white-space: nowrap;
    4
      text-overflow: ellipsis;
    5
    }

13. 使用CSS画一个三角形

    1
    <!DOCTYPE html>
    2
    <html lang="zh-CN">
    3
      <head>
    4
        <meta charset="UTF-8" />
    5
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7
        <title>Document</title>
    8
        <style>
    9
          .border {
    10
            border-style: solid;
    11
            width: 0;
    12
            height: 0;
    13
            border-width: 0 25px 25px;
    14
            border-color: transparent transparent #ffad60;
    15
          }
    16
        </style>
    17
      </head>
    18
      <body>
    19
        <div class="border"></div>
    20
      </body>
    21
    </html>

14. 使用flex实现一个九宫格布局。

    1
    <!DOCTYPE html>
    2
    <html lang="zh-CN">
    3
      <head>
    4
        <meta charset="UTF-8" />
    5
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7
        <title>Document</title>
    8
        <style>
    9
          .container {
    10
            display: flex;
    11
            flex-wrap: wrap;
    12
            width: 304px;
    13
            height: 304px;
    14
            justify-content: space-evenly;
    15
            align-content: space-evenly;
    16
            background-color: black;
    17
          }
    18
          .container > .item {
    19
            width: 100px;
    20
            height: 100px;
    21
            background-color: white;
    22
          }
    23
        </style>
    24
      </head>
    25
      <body>
    26
        <div class="container">
    27
          <div class="item"></div>
    28
          <div class="item"></div>
    29
          <div class="item"></div>
    30
          <div class="item"></div>
    31
          <div class="item"></div>
    32
          <div class="item"></div>
    33
          <div class="item"></div>
    34
          <div class="item"></div>
    35
          <div class="item"></div>
    36
        </div>
    37
      </body>
    38
    </html>

15. sass

    • 变量

      需要注意的是sass中变量也有作用域

      1
      // sass的变量声明
      2
      $highlight-color: #f90;
      3
      $highlight-border: 1px solid $highlight-color;
      4
      .selected {
      5
        border: $highlight-border;
      6
      }
      7
      
      8
      //编译后
      9
      .selected {
      10
        border: 1px solid #f90;
      11
      }

    • 嵌套css规则

      1
      #content {
      2
        article {
      3
          h1 {
      4
            color: #333;
      5
          }
      6
          p {
      7
            margin-bottom: 1.4em;
      8
          }
      9
        }
      10
        aside {
      11
          background-color: #eee;
      12
        }
      13
      }
      14
      
      15
      /* 编译后 */
      16
      #content article h1 {
      17
        color: #333;
      18
      }
      19
      #content article p {
      20
        margin-bottom: 1.4em;
      21
      }
      22
      #content aside {
      23
        background-color: #eee;
      24
      }
      25
      
      26
      // 对于伪类元素需要使用父选择器的标识符
      27
      article a {
      28
        color: blue;
      29
        &:hover {
      30
          color: red;
      31
        }
      32
      }
      33
      
      34
      // 编译后
      35
      article a {
      36
        color: blue;
      37
      }
      38
      article a:hover {
      39
        color: red;
      40
      }
      41
      
      42
      // 群组选择器的嵌套
      43
      .container {
      44
        h1,
      45
        h2,
      46
        h3 {
      47
          margin-bottom: 0.8em;
      48
        }
      49
      }
      50
      
      51
      nav,
      52
      aside {
      53
        a {
      54
          color: blue;
      55
        }
      56
      }
      57
      
      58
      // 子组合选择器，和同层选择器
      59
      article {
      60
        ~ article {
      61
          border-top: 1px dashed #ccc;
      62
        }
      63
        > section {
      64
          background: #eee;
      65
        }
      66
        dl > {
      67
          dt {
      68
            color: #333;
      69
          }
      70
          dd {
      71
            color: #555;
      72
          }
      73
        }
      74
        nav + & {
      75
          margin-top: 0;
      76
        }
      77
      }
      78
      
      79
      article ~ article {
      80
        border-top: 1px dashed #ccc;
      81
      }
      82
      article > footer {
      83
        background: #eee;
      84
      }
      85
      article dl > dt {
      86
        color: #333;
      87
      }
      88
      article dl > dd {
      89
        color: #555;
      90
      }
      91
      nav + article {
      92
        margin-top: 0;
      93
      }
      94
      
      95
      // 嵌套属性
      96
      nav {
      97
        border: 1px solid #ccc {
      98
          left: 0px;
      99
          right: 0px;
      100
        }
      101
      }
      102
      
      103
      nav {
      104
        border: 1px solid #ccc;
      105
        border-left: 0px;
      106
        border-right: 0px;
      107
      }

    • 混合器

      1
      // 混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性
      2
      @mixin no-bullets {
      3
        list-style: none;
      4
        li {
      5
          list-style-image: none;
      6
          list-style-type: none;
      7
          margin-left: 0px;
      8
        }
      9
      }
      10
      ul.plain {
      11
        color: #444;
      12
        @include no-bullets;
      13
      }
      14
      
      15
      ul.plain {
      16
        color: #444;
      17
        list-style: none;
      18
      }
      19
      ul.plain li {
      20
        list-style-image: none;
      21
        list-style-type: none;
      22
        margin-left: 0px;
      23
      }

JS

谈谈对闭包的理解

闭包是一个函数可以记住并访问它的词法作用域，即时这个函数在这个变量的作用域外执行。换言之，即闭包为函数和它的外部变量的组合。 其作用有：

• 创建私有变量。
• 延长变量的声明周期。

1
// 防抖
2
const debounce = (func, delay, immediate) => {
3
  let timer = null;
4
  return function (...params) {
5
    if (timer) clearTimeout(timer);
6
    else if (immediate) func.apply(this, params);
7
    timer = setTimeout(() => {
8
      func.apply(this, params);
9
      timer = null;
10
    }, delay);
11
  };
12
};
13
// 节流
14
const throttle = (func, delay, immediate) => {
15
  let startTime = 0;
16
  let timer = null;
17
  return function (...params) {
18
    if (!startTime) startTime = Date.now();
19
    const remainTime = delay - (Date.now() - startTime);
20
    if (remainTime > 0) {
21
      if (timer) clearTimeout(timer);
22
      else if (immediate) func.apply(this, params);
23
      timer = setTimeout(() => {
24
        func.apply(this, params);
25
        timer = null;
26
        startTime = 0;
27
      }, remainTime);
28
    }
29
  };
30
};

循环递归深拷贝

1
function deepClone(obj, hash = new WeakMap()) {
2
  if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
3
  if (obj instanceof Date) return new Date(obj);
4
  if (obj instanceof RegExp) return new RegExp(obj);
5
  // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
6
  if (typeof obj !== "object") return obj;
7
  // 是对象的话就要进行深拷贝
8
  if (hash.get(obj)) return hash.get(obj);
9
  let cloneObj = new obj.constructor();
10
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
11
  hash.set(obj, cloneObj);
12
  for (let key in obj) {
13
    if (obj.hasOwnProperty(key)) {
14
      // 实现一个递归拷贝
15
      cloneObj[key] = deepClone(obj[key], hash);
16
    }
17
  }
18
  return cloneObj;
19
}

作用域与执行上下文

1. 作用域 作用域指的是变量与函数的可访问范围。JS 有三种类型的作用域

   • 全局作用域
   • 函数作用域
   • 块级作用域

   JS 中的作用域链是指在查找变量时沿着作用域层级所形成的链条，它由当前执行上下文及其所有父级执行上下文的变量对象组成。

2. 执行上下文 执行上下文指的是代码运行时的环境

   • 全局执行上下文
   • 函数执行上下文
   • eval执行上下文。

3. 代码的执行过程

   • 当执行全局代码时，会创建一个全局执行上下文，并将其压入执行栈。
   • 当执行全局代码中的一个函数时，会创建一个函数执行上下文，并将其压入执行栈。
   • 在函数执行上下文中，会先创建一个变量对象，并初始化其中的变量和函数声明。
   • 然后会创建一个作用域链，并将当前变量对象添加到作用域链的最前端。
   • 接着会确定 this 值，并将其赋值给当前执行上下文。
   • 最后会逐行执行函数内部的代码，并根据作用域链来访问和操作变量和函数。

实现一个严格相等符(===)

先判断类型再判断值是否相等

1
const getType = (variable) => {
2
  const type = typeof variable;
3
  if (type !== "object") return type;
4
  return Object.prototype.toString
5
    .call(variable)
6
    .match(/^\[Object (\w+)\]$/)[1]
7
    .toLowerCase();
8
};
9
const strictEqual = (left, right) => {
10
  return getType(left) == getType(right) && left == right;
11
};

Ajax

• 封装一个简单的ajax请求

  1
  //封装一个ajax请求
  2
  function ajax(options) {
  3
    //创建XMLHttpRequest对象
  4
    const xhr = new XMLHttpRequest();
  5
  
  6
    //初始化参数的内容
  7
    options = options || {};
  8
    options.type = (options.type || "GET").toUpperCase();
  9
    options.dataType = options.dataType || "json";
  10
    const params = options.data;
  11
  
  12
    //发送请求
  13
    if (options.type === "GET") {
  14
      xhr.open("GET", options.url + "?" + params, true);
  15
      xhr.send(null);
  16
    } else if (options.type === "POST") {
  17
      xhr.open("POST", options.url, true);
  18
      xhr.send(params);
  19
  
  20
      //接收请求
  21
      xhr.onreadystatechange = function () {
  22
        if (xhr.readyState === 4) {
  23
          let status = xhr.status;
  24
          if (status >= 200 && status < 300) {
  25
            options.success &&
  26
              options.success(xhr.responseText, xhr.responseXML);
  27
          } else {
  28
            options.fail && options.fail(status);
  29
          }
  30
        }
  31
      };
  32
    }
  33
  }

• 使用

  1
  ajax({
  2
    type: "post",
  3
    dataType: "json",
  4
    data: {},
  5
    url: "https://xxxx",
  6
    success: function (text, xml) {
  7
      //请求成功后的回调函数
  8
      console.log(text);
  9
    },
  10
    fail: function (status) {
  11
      ////请求失败后的回调函数
  12
      console.log(status);
  13
    },
  14
  });

原型链

原型链的尽头

• Function → Function.prototype → Object.prototype → null
• Object → Function.prototype → Object.prototype → null

通过隐式绑定 this

1
Function.prototype.myCall = function (obj, ...params) {
2
  const key = Symbol("key");
3
  obj[key] = this;
4
  const result = obj[key](...params);
5
  delete obj[key];
6
  return result;
7
};
8
Function.prototype.myApply = function (obj, params) {
9
  const key = Symbol("key");
10
  obj[key] = this;
11
  const result = obj[key](...params);
12
  delete obj[key];
13
  return result;
14
};
15
Function.prototype.myBind = function (obj, ...params) {
16
  let func = this;
17
  const bound = function (...args) {
18
    const isNew = Boolean(new.target);
19
    const isValue = isNew ? this : obj;
20
    func.myApply(isValue, [...params, ...args]);
21
  };
22
  if (func.prototype) {
23
    bound.prototype = Object.create(func.prototype);
24
  }
25
  return bound;
26
};

instanceof 函数手写实现

1
const myInstanceOf = (left, right) => {
2
  if (
3
    left === null ||
4
    (typeof left !== "object" && typeof left !== "function") ||
5
    typeof right !== "function"
6
  )
7
    return false;
8
  const proto = Object.getPrototypeOf(left);
9
  while (true) {
10
    if (proto === null) return false;
11
    if (proto === right.prototype) return true;
12
    proto = Object.getPrototypeOf(proto);
13
  }
14
};
15
class Name {}
16
const name1 = new Name();
17
console.log(myInstanceOf(name1, Name));
18
console.log(myInstanceOf(Name, Function));

new 操作符手写实现

1
const newFunc = (constructor, ...params) => {
2
  const obj = Object.create(constructor.prototype);
3
  const result = constructor.apply(obj, params);
4
  return typeof result === "object" && result !== null ? result : obj;
5
};

XSS 攻击

XSS（Cross Site Scripting），跨站脚本攻击，允许攻击者将恶意代码植入到提供给其它用户使用的页面中

• 储存型：恶意代码提交到对应数据库，用户请求拼接在html中返回。
• 反射型：url拼接参数，服务端返回恶意代码。
• DOM 型：js的自身漏洞，利用js插入恶意代码。

解决手段

• 对用户的输入进行合法性检查和过滤，避免接受或存储包含恶意脚本的数据。
• 对用户的输出进行转义或编码，避免浏览器将输出的数据当作脚本来执行。
• 使用 HTTP 头部的 Content-Security-Policy 来限制浏览器加载或执行的资源，避免加载或执行来自不可信来源的脚本。
• 使用 HTTP 头部的 X-XSS-Protection 来启用浏览器的 XSS 防护功能，避免浏览器执行检测到的 XSS 攻击。
• 使用其他的安全措施，比如 HTTPS、HTTPOnly、SameSite 等，来增强用户的安全性和隐私性。

CSRF 攻击

CSRF(Cross Site Request Forgery)攻击是一种利用用户在已登录的网站上执行非本意的操作的攻击方法。

CSRF 攻击的原理是，攻击者构造一个包含恶意请求的网页或链接，然后诱使用户访问这个网页或链接。当用户访问时，浏览器会自动携带用户在目标网站的 cookie 信息，从而使得恶意请求看起来像是用户自己发出的。如果目标网站没有对请求进行有效的验证，就会执行恶意请求的操作，比如转账、修改密码、删除数据等。

CSRF 攻击的危害是非常严重的，它可以导致用户的隐私泄露、账号被盗、财产损失、甚至被控制或劫持。

CSRF 攻击的防御方法主要有以下几种：

• 验证 HTTP Referer 字段，检查请求是否来自合法的来源。
• 在非 GET 请求中增加 token 或验证码，并在服务器端验证其有效性。
• 使用 SameSite 属性来限制浏览器发送跨站请求时携带的 cookie 信息。
• 使用其他的安全措施，比如 HTTPS、CORS、X-Frame-Options 等，来增强用户的安全性和隐私性。

断点续传的大致思路

1. 服务端到客户端。下载类似(IDM，与 Aria2 等工具) 断点续传是一种文件传输技术，它可以在网络中断或其他异常情况下，从上次传输的位置继续传输文件，而不是从头开始。断点续传的原理是利用 HTTP 协议中的 Range 和 Content-Range 头，以及 Etag 或 Last-Modified 头，来指定文件的分片范围和校验文件的唯一性。断点续传的步骤如下：

   • 客户端向服务器发送一个带有 Range 头的请求，指定要获取的文件的部分内容，例如：Range: bytes=500-999 表示请求第 500-999 字节的内容。
   • 服务器收到请求后，判断是否支持断点续传，如果支持，就返回相应的分片内容和状态码 206，以及 Content-Range 头，指定返回的分片范围和文件总大小，例如：Content-Range: bytes 500-999/22400 表示返回的是第 500-999 字节的内容，文件总大小为 22400 字节。
   • 客户端收到分片内容后，将其拼接到已经下载的部分，然后继续发送下一个分片的请求，直到文件下载完成。
   • 在下载过程中，如果发生中断，客户端可以记录已经下载的分片范围，然后在恢复下载时，从下一个分片开始请求。
   • 为了避免文件在服务器端发生变化，导致下载的内容不一致，客户端可以在请求时带上 If-Range 头，指定文件的 Etag 或 Last-Modified 值，用于校验文件的唯一性。如果文件没有变化，服务器会继续返回分片内容，如果文件发生变化，服务器会返回整个文件和状态码 200。

2. 客户端到服务端。

   1. 分片上传 分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（Part）来进行分片上传 大致流程如下：

      • 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；
      • 初始化一个分片上传任务，返回本次分片上传唯一标识；
      • 按照一定的策略（串行或并行）发送各个分片数据块；
      • 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件

   2. 断点续传 断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分

      每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头开始上传下载。用户可以节省时间，提高速度

      一般实现方式有两种：

      • 服务器端返回，告知从哪开始
      • 浏览器端自行处理

      上传过程中将文件在服务器写为临时文件，等全部写完了（文件上传完），将此临时文件重命名为正式文件即可

      如果中途上传中断过，下次上传的时候根据当前临时文件大小，作为在客户端读取文件的偏移量，从此位置继续读取文件数据块，上传到服务器从此偏移量继续写入文件即可

计网

http与https的区别

• http(HyperText Transfer Protocol)，即超文本运输协议，是实现网络通信的一种规范。其传输的数据并不是计算机底层上的二进制包，而是完整的，有意义的数据，如HTML文件，图片文件，查询结果等超文本。能够被上层应用识别到。在实际的应用当中，http协议常用于Web浏览器与网站服务器之间传递消息，以明文方式发送内容，不提供任何方式的数据加密。
• 特点：
  • 支持客户/服务器模式。
  • 简单快速：客户向服务器请求服务的时候，只需要传送请求方法和路径。由于http协议简单，使得http服务器的程序规模小，因而通信速度很快。
  • 灵活：http允许传输任意类型的数据对象。正在传输的对象用Content-Type加以标记。
  • 无连接：限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
  • 无状态：http协议无法根据之前的状态进行本次的请求处理。
• https，即运行在SSL/TLS上的http协议，SSL/TLS运行在TCP/IP协议与各种应用层协议之间。
  • 过程：
    • 浏览器向使用SSL/TLS的网站发送请求的时候，网站服务器会返回一个包含自己的公钥和身份信息的证书，这个证书通常是由可信任的机构颁发的。
    • 浏览器会验证证书的有效性和真实性，如果证书合法，自己生成一段随机的对称密钥，并用公钥加密发送给服务端。
    • 服务段用自己的私钥解密对称密钥，然后用这个对称密钥加密数据，实现加密通信。
    • 浏览器段使用该对称密钥解密数据，显示在页面上。
    • 这样，浏览器和网站之间的通信就是通过对称密钥加密的，第三方无法窃取或篡改数据，从而实现了安全通信。

https相对于http的优势

http的一些问题

• 使用明文通信，内容可能被窃听
• 不验证通信方的身份，因此有可能遭遇伪装。

https 为何更安全

• 对称加密：加密与解密所用的密钥都是同一个，如果保证了密钥的安全，那么就保证了通信的机密性。
• 非对称加密：密钥分为公钥和私钥，公钥加密只能用私钥解密，私钥加密只能用公钥解密。
• 混合加密：https采用的是对称加密+非对称加密，https采用非对称加密来解决密钥交换的问题。即浏览器使用公钥来加密对称密钥，服务端使用私钥来解密对称密钥，实现密钥的私密性。
• 摘要算法：通过摘要算法压缩数据，给数据生成独一无二的ID，验证数据的完整性。
• 数字签名：将ID用私钥加密，确保了消息确实由发送方发送出来的。
• CA 机构：使用 CA 公钥解密证书的数字签名，确保证书和公钥的有效性。 CA 对公钥的签名认证要求包括序列号、用途、颁发者、有效时间等等，把这些打成一个包再签名，完整地证明公钥关联的各种信息，形成“数字证书”

复杂请求的基本概念

复杂请求是指不满足简单请求条件的跨域请求。简单请求的条件是：

• 请求方法是 GET、POST 或 HEAD 之一
• 请求头只包含 Accept、Accept-Language、Content-Language 和 Content-Type 四种，且 Content-Type 的值只能是 text/plain、multipart/form-data 或 application/x-www-form-urlencoded 之一
• 请求中没有使用 XMLHttpRequestUpload 对象注册事件监听器，也没有使用 ReadableStream 对象

复杂请求在发送实际请求之前，需要先发送一个预检请求（preflight request），用 OPTIONS 方法向服务器询问是否允许该跨域请求。预检请求中包含以下两个特殊的请求头：

• Access-Control-Request-Method：表示实际请求的方法
• Access-Control-Request-Headers：表示实际请求的自定义头部

一个基本示例

1
OPTIONS /resources/post-here/ HTTP/1.1
2
Host: bar.example
3
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
4
Accept-Language: en-us,en;q=0.5
5
Accept-Encoding: gzip,deflate
6
Connection: keep-alive
7
Origin: https://foo.example
8
Access-Control-Request-Method: POST
9
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

服务器根据预检请求中的信息，返回一个预检响应（preflight response），告诉浏览器是否允许该跨域请求。预检响应中包含以下几个重要的响应头：

• Access-Control-Allow-Origin：表示允许的请求来源，可以是具体的域名，也可以是*表示任意域名
• Access-Control-Allow-Methods：表示允许的请求方法，是一个以逗号分隔的列表
• Access-Control-Allow-Headers：表示允许的请求头，是一个以逗号分隔的列表
• Access-Control-Allow-Credentials：表示是否允许携带身份凭证（如 cookies），只能是 true 或者省略
• Access-Control-Max-Age：表示预检响应的有效时间，单位是秒

只有当预检响应中的 Access-Control-Allow-Origin 和实际请求的 Origin 相匹配，且 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 包含实际请求的方法和头部时，浏览器才会发送实际请求。否则，浏览器会报错，拒绝执行该跨域请求。 一个基本示例

1
HTTP/1.1 200 OK
2
Date: Mon, 01 Dec 2008 01:15:39 GMT
3
Server: Apache/2.0.61 (Unix)
4
Access-Control-Allow-Origin: https://foo.example
5
Access-Control-Allow-Methods: POST, GET, OPTIONS
6
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
7
Access-Control-Max-Age: 86400
8
Vary: Accept-Encoding, Origin
9
Keep-Alive: timeout=2, max=100
10
Connection: Keep-Alive

原生方法对预检请求进行响应

使用原生方法对跨域请求的预检请求进行响应，需要在服务器端设置一些响应头，来告诉浏览器是否允许该请求，以及允许的方法、头部、凭证等。具体来说，有以下几个步骤：

• 首先，判断请求是否是跨域请求，可以通过检查请求头中的 Origin 字段，如果该字段存在且不等于当前服务器的域名，说明是跨域请求。

• 其次，判断请求是否是预检请求，可以通过检查请求方法是否是 OPTIONS，如果是，说明是预检请求。

• 然后，根据业务逻辑，决定是否允许该跨域请求，如果允许，就在响应头中添加以下字段：

  • Access-Control-Allow-Origin: 表示允许的来源域，可以是具体的域名，也可以是 * 表示任意域名。
  • Access-Control-Allow-Methods: 表示允许的请求方法，可以是多个，用逗号分隔，例如 GET,POST,PUT,DELETE 等。
  • Access-Control-Allow-Headers: 表示允许的请求头，可以是多个，用逗号分隔，例如 Content-Type,Authorization 等。
  • Access-Control-Max-Age: 表示预检请求的有效期，单位是秒，表示在这个时间内，不需要再发送预检请求。
  • Access-Control-Allow-Credentials: 表示是否允许携带凭证，例如 Cookie 或 HTTP 认证，可以是 true 或 false。

• 最后，返回响应，结束预检请求，浏览器会根据响应头中的信息，决定是否继续发送真正的请求。

下面是一个使用原生方法的 Node.js 代码示例：

1
// 引入 http 模块
2
const http = require("http");
3
// 创建一个 http 服务器
4
const server = http.createServer(function (req, res) {
5
  // 获取请求头中的 Origin 字段
6
  const origin = req.headers.origin;
7
  // 获取请求方法
8
  const method = req.method;
9
  // 判断是否是跨域请求
10
  if (origin && origin !== "http://localhost:3000") {
11
    // 判断是否是预检请求
12
    if (method === "OPTIONS") {
13
      // 设置响应头，允许跨域请求
14
      res.setHeader("Access-Control-Allow-Origin", origin); // 允许任意域名跨域
15
      res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); // 允许的请求方法
16
      res.setHeader(
17
        "Access-Control-Allow-Headers",
18
        "Content-Type, Authorization"
19
      ); // 允许的请求头
20
      res.setHeader("Access-Control-Max-Age", "86400"); // 预检请求的有效期为一天
21
      res.setHeader("Access-Control-Allow-Credentials", "true"); // 允许携带凭证
22
      // 返回响应
23
      res.end();
24
    } else {
25
      // 处理其他请求，例如 GET, POST 等
26
      // ...
27
    }
28
  } else {
29
    // 处理非跨域请求，例如本地请求
30
    // ...
31
  }
32
});
33
// 监听 3000 端口
34
server.listen(3000, function () {
35
  console.log("Server is running on port 3000");
36
});

DNS查询过程

1. 查询浏览器 DNS 缓存。
2. 查询操作系统 DNS 缓存。
3. 查询本地域名服务器 DNS 缓存。
4. 查询根域名服务器，返回顶级域名服务器。
5. 本地服务器向顶级域名服务器发送查询请求，返回权限域名服务器的地址。
6. 向权限域名服务器发送请求，获取 IP 地址。
7. 获得 IP 地址形成访问。

CDN原理

1. CDN 的基本原理：CDN 的全称为 Content Delivery Network，即内容分发网络，可作为网站的静态资源服务站点，用来减轻源站的网络请求压力。

   • CDN的作用为返回离用户最近节点的资源，减轻源站网络请求压力，提升用户体验。
   • CDN的工作流程为：
     1. 浏览器请求CDN链接，经过DNS解析流程，返回CNAME记录指向负载均衡系统。
     2. 负载均衡系统通过计算返回离用户最近的节点（即边缘节点）的IP地址。
     3. 浏览器再向边缘节点发送请求获取静态资源。(注：DNS 解析记录的缓存一般只缓存第一次的解析结果，所以边缘节点的IP地址一般不会被缓存这也与直觉相同。)

2. 衡量CDN服务的指标

   • 命中率：用户访问的资源恰好在缓存系统里，可以直接返回给用户，命中次数与所有访问次数之比。
   • 回源率：缓存里没有，必须用代理的方式回源站取，回源次数与所有访问次数之比。

3. 缓存代理 缓存系统也可以划分出层次，分成一级缓存节点和二级缓存节点。一级缓存配置高一些，直连源站，二级缓存配置低一些，直连用户。回源的时候二级缓存只找一级缓存，一级缓存没有才回源站，可以有效地减少真正的回源。现在的商业 CDN 命中率都在 90% 以上，相当于把源站的服务能力放大了 10 倍以上。

UDP与TCP的简单理解，两个协议都位于 OSI 的传输层

• UDP(User Datagram Protocol)：是一个面向用户数据包的通信协议，即对应用层交下来的报文，不合并，不拆分，只是在其上面加上首部后就交给了下面的网络层。
• TCP(Transmission Control Protocol)：是一种可靠的面向字节流的协议，可以想象成流水形式的，发送方 TCP 会将数据放入“蓄水池”（缓存区），等到可以发送的时候就发送，不能发送就等着，TCP 会根据当前网络的拥塞状态来确定每个报文段的大小。

HTTP/1.0/1.1/2.0

1. HTTP 1.0 和 HTTP 1.1 之间有哪些区别

   • 连接方面，http1.0 默认使用非持久连接，而 http1.1 默认使用持久连接。http1.1 通过使用持久连接来使多个 http 请求复用同一个 TCP 连接，以此来避免使用非持久连接时每次需要建立连接的时延。

   • 资源请求方面，在 http1.0 中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，http1.1 则在请求头引入了 range 头域，它允许只请求资源的某个部分，即返回码是 206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接。

   • 缓存方面，在 http1.0 中主要使用 header 里的 If-Modified-Since、Expires 来做为缓存判断的标准，http1.1 则引入了更多的缓存控制策略，例如 Etag、If-Unmodified-Since、If-Match、If-None-Match 等更多可供选择的缓存头来控制缓存策略。

   • http1.1 中新增了 host 字段，用来指定服务器的域名。http1.0 中认为每台服务器都绑定一个唯一的 IP 地址，因此，请求消息中的 URL 并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机，并且它们共享一个 IP 地址。因此有了 host 字段，这样就可以将请求发往到同一台服务器上的不同网站。

   • http1.1 相对于 http1.0 还新增了很多请求方法，如 PUT、HEAD、OPTIONS 等。

2. HTTP 1.1 和 HTTP 2.0 之间有哪些区别

   • 二进制协议：HTTP/2 是一个二进制协议。在 HTTP/1.1 版中，报文的头信息必须是文本（ASCII 编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"，可以分为头信息帧和数据帧。多个帧之间可以乱序发送，根据帧首部的流标识可以重新组装，这也是多路复用同时发送数据的实现条件。

   • 多路复用：HTTP/2 实现了多路复用，HTTP/2 仍然复用 TCP 连接，但是在一个连接里，客户端和服务器都可以同时发送多个请求或回应，而且不用按照顺序一一发送，这样就避免了"队头堵塞"的问题。

   • 数据流：HTTP/2 使用了数据流的概念，因为 HTTP/2 的数据包是不按顺序发送的，同一个连接里面连续的数据包，可能属于不同的请求。因此，必须要对数据包做标记，指出它属于哪个请求。HTTP/2 将每个请求或回应的所有数据包，称为一个数据流。每个数据流都有一个独一无二的编号。数据包发送时，都必须标记数据流 ID ，用来区分它属于哪个数据流。

   • 头信息压缩：HTTP/2 实现了头信息压缩，由于 HTTP 1.1 协议不带状态，每次请求都必须附上所有信息。所以，请求的很多字段都是重复的，比如 Cookie 和 User Agent ，一模一样的内容，每次请求都必须附带，这会浪费很多带宽，也影响速度。HTTP/2 对这一点做了优化，引入了头信息压缩机制，头信息表充当状态。一方面，头信息使用 gzip 或 compress 压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就能提高速度了。

   • 服务器推送：HTTP/2 允许服务器未经请求，主动向客户端发送资源，这叫做服务器推送。使用服务器推送提前给客户端推送必要的资源，这样就可以相对减少一些延迟时间。这里需要注意的是 http2 下服务器主动推送的是静态资源，和 WebSocket 以及使用 SSE 等方式向客户端发送即时数据的推送是不同的。

   队头阻塞的概念：队头阻塞是由 HTTP 基本的“请求 - 应答”模型所导致的。HTTP 规定报文必须是“一发一收”，这就形成了一个先进先出的“串行”队列。队列里的请求是没有优先级的，只有入队的先后顺序，排在最前面的请求会被最优先处理。如果队首的请求因为处理的太慢耽误了时间，那么队列里后面的所有请求也不得不跟着一起等待，结果就是其他的请求承担了不应有的时间成本，造成了队头堵塞的现象。

HTTP常用状态码

100：服务器已收到请求，需进一步响应。 101：用于http和websocket协议升级。 200：常规资源请求成功。 201：请求成功并在服务端创建了新的资源。 301：重定向。 302：临时移动。 400：错误请求。 401：未授权。 502：错误网关。 503：服务不可用。

协商缓存

举个例子，假设客户端第一次请求一个图片文件，服务器返回 200 OK 的状态码，以及图片的内容，同时在响应头中设置了 Last-Modified: Wed, 10 Nov 2021 07:00:51 GMT 和 Etag: "1234567890"，表示该图片的最后修改时间和唯一标识。客户端会将这些信息和图片一起缓存到本地。当客户端再次请求该图片时，会在请求头中添加 If-Modified-Since: Wed, 10 Nov 2021 07:00:51 GMT 和 If-None-Match: "1234567890"，表示只有当图片在这个时间之后被修改过，或者图片的标识发生变化时，才需要重新获取图片。如果服务器检查发现图片没有变化，就会返回 304 Not Modified 的状态码，不会返回图片的内容，客户端就可以直接使用本地缓存的图片。如果服务器检查发现图片有变化，就会返回 200 OK 的状态码，以及新的图片内容，客户端就会更新本地缓存，并显示新的图片。

URL 跳转网站发生了什么

1. URL解析
2. DNS查询
3. TCP连接
4. 发出HTTP请求
5. 响应请求
6. 页面渲染

WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得浏览器和服务器之间可以实现实时双向的数据交换。WebSocket 的优点是：

• 可以减少服务器的资源和带宽消耗，提高通信效率和性能。
• 可以实现服务端主动推送数据给客户端，不需要客户端频繁地轮询服务器。
• 可以支持多种数据格式，包括文本、二进制、图像、音频、视频等。
• 可以兼容多种浏览器和平台，只要支持 HTML5 的浏览器都可以使用 WebSocket。

WebSocket 的工作流程如下：

1. 客户端向服务器发起一个 HTTP 请求，请求头中包含一个 Upgrade 字段，表示要升级协议为 WebSocket。
2. 服务器收到请求后，如果同意升级，就会返回一个 HTTP 响应，响应头中包含一个 Upgrade 字段，表示已经切换到 WebSocket 协议。
3. 客户端和服务器之间建立一个 WebSocket 连接，之后就可以通过这个连接进行双向的数据传输。
4. 客户端或服务器可以随时关闭连接，发送一个关闭帧，然后断开 TCP 连接。

WebSocket 的使用方法如下：

• 在 JavaScript 中，可以使用 WebSocket 对象来创建和管理一个 WebSocket 连接，以及发送和接收数据。WebSocket 对象的构造函数接受一个参数，即服务器的 URL，例如var socket = new WebSocket("ws://example.com")。
• WebSocket 对象有以下几个属性：
  • socket.readyState：表示连接的当前状态，有四种可能的值：0（连接尚未建立），1（连接已经建立，可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）。
  • socket.url：表示连接的绝对 URL。
  • socket.protocol：表示服务器选择的子协议，如果没有选择，就是空字符串。
  • socket.binaryType：表示二进制数据的类型，可以是blob或者arraybuffer。
  • socket.bufferedAmount：表示还有多少字节的数据没有发送出去，可以用来判断发送是否结束。
• WebSocket 对象有以下几个方法：
  • socket.send(data)：向服务器发送数据，可以是文本或者二进制数据。
  • socket.close(code, reason)：关闭连接，可以指定一个数字的状态码和一个字符串的原因。
• WebSocket 对象有以下几个事件：
  • open：当连接建立时触发，可以使用socket.onopen属性或者socket.addEventListener("open", handler)方法来监听。
  • message：当收到服务器的数据时触发，可以使用socket.onmessage属性或者socket.addEventListener("message", handler)方法来监听。事件对象有一个data属性，表示收到的数据，可以是文本或者二进制数据。
  • error：当发生错误时触发，可以使用socket.onerror属性或者socket.addEventListener("error", handler)方法来监听。事件对象没有提供错误的具体信息，只能通过socket.readyState来判断连接的状态。
  • close：当连接关闭时触发，可以使用socket.onclose属性或者socket.addEventListener("close", handler)方法来监听。事件对象有三个属性：code表示关闭的状态码，reason表示关闭的原因，wasClean表示是否是正常关闭。

Node.js

Node.js 的优点与缺点

优点：

• 处理高并发场景性能更佳。
• 适合 I/O 密集型应用，值的是应用在运行极限时，CPU 占用率仍然比较低，大部分时间是在做 I/O 硬盘内存读写操作。

因为Node.js单线程所带来的缺点

• 不适合 CPU 密集型应用。
• 只支持单核 CPU，不能充分利用 CPU。
• 可靠性低，一旦代码的某个环节崩溃，整个系统都会崩溃。

Node.js 的常见全局对象。

全局对象分为两类：

• 真正的全局对象
• 模块的全局变量

真正的全局对象

• Buffer
• global
• setTimeout, setInterval, clearTimeout, clearInterval
• process
• console

模块级别的全局变量

• __dirname:当前文件所在的路径，不包括后面的文件名。
• __filename：当前文件所在的路径与名称，包括文件的名称。
• exports
• module
• require

Node.js中的process对象

• process.env：获取不同环境项目的配置信息。
• process.pid：获取当前进程的pid。
• process.ppid：获取当前进程对应的父进程。
• process.cwd()：获得当前进程的工作目录。
• process.platform：获得当前运行进程的操作系统平台。
• process.uptime()：获得当前进程已运行的时间。
• process.on('uncaughtException', cb)捕获异常信息、 process.on('exit', cb)进程退出监听。
• 三个标准流process.stdin、process.stdout和process.stderr。
• process.title：指定进程名称。
• process.argv：传入的命令行参数。

Node.js中的fs模块

• writeFile/writeFileSync
• appendFile/appendFileSync
• createWriteStream
• readFile/readFileSync
• createReadStream
• rename/renameSync
• unlink/unlinkSync
• mkdir/mkdirSync
• readdir/readdirSync
• rmdir/rmdirSync
• stat/statSync
• copyfile/copyfileSync

1
//将 『三人行，必有我师焉。』 写入到当前文件夹下的『座右铭.txt』文件中
2
fs.writeFile("./座右铭.txt", "三人行，必有我师焉。", (err) => {
3
  //如果写入失败，则回调函数调用时，会传入错误对象，如写入成功，会传入 null
4
  if (err) {
5
    console.log(err);
6
    return;
7
  }
8
  console.log("写入成功");
9
});
10

11
fs.writeFileSync("2.txt", "Hello world");
12
let data = fs.readFileSync("2.txt", "utf8");
13

14
console.log(data); // Hello world
15

16
fs.appendFile("3.txt", " world", (err) => {
17
  if (!err) {
18
    fs.readFile("3.txt", "utf8", (err, data) => {
19
      console.log(data); // Hello world
20
    });
21
  }
22
});
23

24
fs.appendFileSync("3.txt", " world");
25
let data = fs.readFileSync("3.txt", "utf8");
26

27
let ws = fs.createWriteStream("./观书有感.txt");
28
ws.write("半亩方塘一鉴开\r\n");
29
ws.write("天光云影共徘徊\r\n");
30
ws.write("问渠那得清如许\r\n");
31
ws.write("为有源头活水来\r\n");
32
ws.end();
33

34
fs.readFile("1.txt", "utf8", (err, data) => {
35
  if (!err) {
36
    console.log(data); // Hello
37
  }
38
});
39

40
let buf = fs.readFileSync("1.txt");
41
let data = fs.readFileSync("1.txt", "utf8");
42

43
console.log(buf); // <Buffer 48 65 6c 6c 6f>
44
console.log(data); // Hello
45

46
//创建读取流对象
47
let rs = fs.createReadStream("./观书有感.txt");
48
//每次取出 64k 数据后执行一次 data 回调
49
rs.on("data", (data) => {
50
  console.log(data);
51
  console.log(data.length);
52
});
53
//读取完毕后, 执行 end 回调
54
rs.on("end", () => {
55
  console.log("读取完成");
56
});
57
fs.rename("./观书有感.txt", "./论语/观书有感.txt", (err) => {
58
  if (err) throw err;
59
  console.log("移动完成");
60
});
61
fs.renameSync("./座右铭.txt", "./论语/我的座右铭.txt");
62

63
fs.unlink("./test.txt", (err) => {
64
  if (err) throw err;
65
  console.log("删除成功");
66
});
67
fs.unlinkSync("./test2.txt");
68
fs.mkdir("./page", (err) => {
69
  if (err) throw err;
70
  console.log("创建成功");
71
});
72
//递归异步创建
73
fs.mkdir("./1/2/3", { recursive: true }, (err) => {
74
  if (err) throw err;
75
  console.log("递归创建成功");
76
});
77
//递归同步创建文件夹
78
fs.mkdirSync("./x/y/z", { recursive: true });
79

80
//异步读取
81
fs.readdir("./论语", (err, data) => {
82
  if (err) throw err;
83
  console.log(data);
84
});
85
//同步读取
86
let data = fs.readdirSync("./论语");
87
console.log(data);
88
//异步删除文件夹
89
fs.rmdir("./page", (err) => {
90
  if (err) throw err;
91
  console.log("删除成功");
92
});
93
//异步递归删除文件夹
94
fs.rmdir("./1", { recursive: true }, (err) => {
95
  if (err) {
96
    console.log(err);
97
  }
98
  console.log("递归删除");
99
});
100
//同步递归删除文件夹
101
fs.rmdirSync("./x", { recursive: true });
102
//异步获取状态
103
fs.stat("./data.txt", (err, data) => {
104
  if (err) throw err;
105
  console.log(data);
106
});
107
//同步获取状态
108
let data = fs.statSync("./data.txt");
109

110
fs.copyFileSync("3.txt", "4.txt");
111
let data = fs.readFileSync("4.txt", "utf8");
112

113
console.log(data); // Hello world
114

115
fs.copyFile("3.txt", "4.txt", () => {
116
  fs.readFile("4.txt", "utf8", (err, data) => {
117
    console.log(data); // Hello world
118
  });
119
});