前端常识

最新推荐文章于 2024-05-15 16:36:12 发布

秋榆枫

最新推荐文章于 2024-05-15 16:36:12 发布

阅读量394

点赞数

文章标签：经验分享

本文链接：https://blog.csdn.net/maplelever/article/details/130119420

版权

前端常识

幸福的世界里绝没有愚蠢着、懦弱者和懒惰者的地位

ESLint

什么是ESLint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。

在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：

ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析代码中的模式。
ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：

在注释中配置：使用JavaScript注释直接把配置嵌入到JS文件中。
配置文件：使用下面任一的文件来为全部的目录和它的子目录指定配置信息。

可以被配置的信息主要分为3类：

Environments：你的 javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）中。
Globals：执行代码时脚步需要访问的额外全局变量。
Rules：开启某些规则，也可以设置规则的等级。

安装

ESLint 支持多种安装方式，可以通过 npm 来安装，也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

全局安装

npm i -g eslint

局部安装（推荐）

npm i -D eslint

初始化

安装完毕后，接下来新建一个配置文件.eslintrc.js，或者使用如下的命令行来自动生成，命令如下：

eslint --init

配置

注意：如果你之前使用的版本低于 1.0.0，请查看迁移指南。运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建。

ESlint的特点

内置规则和自定义规则共用一套规则 API。

内置的格式化方法和自定义的格式化方法共用一套格式化 API。

额外的规则和格式化方法能够在运行时指定。

规则和对应的格式化方法并不强制捆绑使用。

每条规则都是各自独立的，可以根据项目情况选择开启或关闭。

用户可以将结果设置成警告或者错误。

ESLint 并不推荐任何编码风格，规则是自由的。

所有内置规则都是泛化的。

Babel

Babel官网对Babel的定义就是：

Babel 是一个 JavaScript 编译器。

用通俗的话解释就是它主要用于将高版本的JavaScript代码转为向后兼容的JS代码，从而能让我们的代码运行在更低版本的浏览器或者其他的环境中。

比如我们在代码中使用了ES6箭头函数：

var fn = (num) => num + 2;

但我们如果用IE11浏览器（鬼知道用户会用什么浏览器来看）运行的话会出现报错；但是经过Babel编译之后的代码就可以运行在IE11以及更低版本的浏览器中了：

var fn = function fn(num) {
  return num + 2;
}

Babel就是做了这样的编译转换工作，来让我们不用考虑浏览器的兼容性问题，只要专心于代码的编写工作。

Babel 的使用

单体文件
命令行
配合Webpack使用

本文将介绍Babel配合webpack使用的情况

配置文件

Babel的配置文件主要有.babelrc、.babelrc.js、babel.config.js和package.json，他们的配置选项都是相同的，作用也是一样，主要区别在于格式语法的不同，因此我们在项目中只需要选择其中一种即可。

对于.babelrc，它的配置主要是JSON格式的，像这样：

{
  "presets": [...],
  "plugins": [...]
}

而.babelrc.js和babel.config.js同样都是JS语法，通过module.exports输出配置：

module.exports = function (api) {
  api.cache(true);
  const presets = [ ... ];
  const plugins = [ ... ];
  if (process.env["ENV"] === "prod") {
    plugins.push(...);
  }
  return {
    presets,
    plugins
  };
}

我们还可以根据环境来进行动态的配置。而在package.json中，需要增加babel的属性：

{
  "name": "demo",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

我们可以在配置文件中加入一些插件或者预设，来扩展@babel/core的转换功能；只需要将对应的插件或预设名字加入数组即可；比如我们常用的ES6箭头函数，就是通过@babel/plugin-transform-arrow-functions这个插件来转换：

//.babelrc
{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

但有时候我们需要对插件和预设设置参数，就不能直接使用字符串的形式了；而应再包裹一层数组，数组的第一项是名称，第二项是设置的参数对象：

//.babelrc
{
  "plugins": [
    [
      "@babel/plugin-transform-arrow-functions", 
      { "spec": true }
    ]
  ]
}

下面介绍presets与plugins

这样我们的箭头函数就能正常转换了

Plugins

Plugins顾名思义插件。

babel 本身不具有任何转化功能，我们要的代码要转换某些功能，比如将es6转换为es5，我们就需要下载相应的插件，并且将这些插件配置到.babelrc文件的plguins里面。

比如将箭头函数转换为浏览器能识别的普通函数我们就需要用到 @babel/plugin-transform-arrow-functions插件，并将其添加到配置文件

1.首先下载插件 npm i @babel/plugin-transform-arrow-functions -D

2.添加至配置文件

//.babelrc
{
    "plugins":[
          "@babel/plugin-transform-arrow-functions"
        ]
}

这样babel就能够将箭头函数转换为普通函数了

//转换前
var a = () => {};
//转换后
var a = function () {};

Presets

Presets顾名思义预设。

我们要转换一些语法就得使用各种插件，并且添加到配置文件，如果每次项目需要的babel插件都差不多，而我们每次都要进行重复的下载，配置工作，这样效率是不是很低，很繁琐。

这个时候我们就可以利用presets这个功能，将一些常用的babel插件，配置放入预设中，下载直接将这个预设放入配置文件即可

比如项目中经常要使用到 @babel/plugin-transform-arrow-functions和@babel/plugin-transform-for-of插件，那么我们可以将这两个插件设为预设具体操作参照文档将其设为预设后。

下次在.babelrc文件配置即可，如假设预设为 myPreset，那么在配置文件

//.babelrc
{
    "presets":["myPreset"    ]
}

当然除了我们自定义预设，我们还可以使用别人定义好的一些预设，如你经常看到的 @babel/preset-env、@babel/preset-react

使用方法

1.下载preset npm i @babel/preset-env

2.配置文件

//.babelrc
{
    "presets":["preset-env"    ]
}

正向代理和反向代理

正向代理：客户端向目标服务器无法向某服务器发送请求，于是客户端先将请求发送至第三方服务器（代理服务器），让第三方服务器转发至目标服务器，这样目标服务器就不知道真正的客户端是我，只会以为代理服务器是客户端，这样是不安全的，因为真正的服务器是处于暴露情况下的。

反向代理：客户端向代理服务器发送请求，此服务器收到请求后，将请求转发至真正的服务器，对于客户端来说，它以为真正的服务器就是代理服务器，这样真正的服务器就是出于不暴露状态，比较安全。

区别

两种代理的区别就是：

正向代理的话，客户端知道真正的服务器地址，反而服务器不知道真正的客户端地址

反向代理的话，客户端不知道真正的服务器地址，只知道代理服务器的地址，服务器可以通过代理服务器知道发送请求的客户端是谁，前提是只有一台反向代理服务器，如果存在多台反向代理服务器，服务器也不一定知道真正的客户端是谁（需要一层一层向上追查IP）。

从用途上来区分

正向代理：正向代理用途是为了在防火墙内的局域网提供访问internet的途径。另外还可以使用缓冲特性减少网络使用率
反向代理：反向代理的用途是将防火墙后面的服务器提供给internet用户访问。同时还可以完成诸如负载均衡等功能

从安全性来讲

正向代理：正向代理允许客户端通过它访问任意网站并且隐蔽客户端自身，因此你必须采取安全措施来确保仅为经过授权的客户端提供服务
反向代理：对外是透明的，访问者并不知道自己访问的是代理。对访问者而言，他以为访问的就是原始服务器

应用场景

正向代理主要是用场景是客户端。由于网络不通等原因，突破自身ip限制，通过访问中间转发环节即正向代理服务器进行访问目标服务器。
反向代理服务器主要使用场景是服务端。服务提供方通过反向代理服务器实现目标服务器的动态切换，进而实现目标服务器的负载均衡。

Mdn文档

MDN Web Docs（旧称Mozilla Developer Network、Mozilla Developer Center，简称MDN）是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。

我们的js、html、css都可以看这里的官方文档，有中文，权威性高

MDN网址：https://developer.mozilla.org/zh-CN/

通过W3C查文档学习也可以，但是MDN更普遍和常用。

W3C 指万维网联盟（World Wide Web Consortium）创建于1994年10月，由 Tim Berners-Lee 创建，W3C 是一个会员组织，它的工作是对 web 进行标准化，创建并维护 WWW 标准，W3C 标准被称为 W3C 推荐（W3C 规范）

W3C网址：https://www.w3.org/

.md文件是什么？

　1、首先来普及一下什么是md文件， md全称markdown，markdown也是一种标记语言。　　

2、md文件其实可以用常用的文本编辑器都可以打开，例如记事本、EditPlus、sublime等等。　　

3、用记事本打开，把markdown文件拖到记事本图标上就可以打开。　　

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

语法糖

定义：通过这类方式编写出来的代码，即好看又好用,好似糖一般的语法。固美其名曰：语法糖

语法糖（Syntactic sugar）：

计算机语言中特殊的某种语法
这种语法对语言的功能并没有影响
对于程序员有更好的易用性
能够增加程序的可读性

readme文件的作用

README: 项目说明文件

这个我觉得是每个项目都应该有的一个文件，目的是能简要描述该项目的信息，让读者快速了解这个项目。

它需要说明以下几个事项:

软件定位，软件的基本功能。
运行代码的方法: 安装环境、启动命令等。
简要的使用说明。
代码目录结构说明，更详细点可以说明软件的基本原理。
常见问题说明。

此文件主要是用来对于项目整个流程的梳理，让别人能够更快了解你的项目流程、目的等东西，整个项目的一个注释作用。

Python 浅谈编程规范和软件开发目录规范的重要性

其实就是为什么要写注释，为什么要将项目流程清楚展示给别人，由于我们前期进入一般都是维护别人的代码，所以清楚的展示尤为重要，让别人能够看得懂。

https://www.cnblogs.com/wj-1314/p/7551184.html

如何为开发项目编写规范的README文件（windows），此文详解

https://www.cnblogs.com/wj-1314/p/8547763.html

性能优化技巧

前端是庞大的，包括 HTML、 CSS、 Javascript、Image等等各种各样的资源。

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

几种性能优化的方法

使用懒加载

懒加载也就是延迟加载，懒加载是一种网页性能优化的方式，它能极大的提升用户体验。例如访问网站要加载的数据太多，就会占用很多时间，所以要使用懒加载，优先加载可视区域的数据。

使用路由的懒加载和图片的懒加载

使用keep-alive

在vue组件中使用keep-alive

动态组件
<component :is="com"></component>
// component 是渲染动态组件的标签 is属性的值是哪个组件的名 component就会显示哪个组件
<keep-alive>
   <router-view />
 </keep-alive>

当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中

作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，加载时间及性能消耗，提高用户体验性

减少http / axios 请求

每个请求都是有成本的，既包含时间成本也包含资源成本。因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间。所以要合理设计减少http或者axios请求

图片处理

　　1、雪碧图

　　CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台

　　2、Base64

　　将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33%

　　3、使用字体图标来代替图片

减少重定向

　　尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验

　　如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第一次从http重定向到https之后，每次访问http，会直接返回https的页面

使用局部变量，不使用全局变量

可以避免全局变量的污染，不会占据存储空间。

减小资源大小

　　1、HTML压缩

　　HTML代码压缩就是压缩在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等

　　2、CSS压缩

　　CSS压缩包括无效代码删除与CSS语义合并

　　3、JS压缩与混乱

　　JS压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码可读性，实现代码保护

　　4、图片压缩

　　针对真实图片情况，舍弃一些相对无关紧要的色彩信息

优化网络连接

使用CDN

CDN全称是Content Delivery Network，即内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度

使用DNS预解析

当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址

DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度

及时清理环境

及时消除对象引用，清除定时器，清除事件监听器，创建最小作用域变量，可以及时回收内存

webpack优化

打包公共代码

使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件

webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk

通过设置 optimization.splitChunks.chunks: "all" 来启动默认的代码分割配置项

动态导入和按需加载

webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 提案的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure

剔除无用代码

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup

JS的tree shaking主要通过uglifyjs插件来完成，CSS的tree shaking主要通过purify CSS来实现的

http历史

vue解决白屏问题

原因

单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js 和vendor.js)，所以当网速差的时候会产生一定程度的白屏

解决办法

1、路由懒加载，组件懒加载

路由懒加载

// 1、Vue异步组件技术：
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/home.vue'], resolve)
}
// 2、es6提案的import()
{
  path: '/',
  name: 'home',
  component: () => import('../views/home.vue')
}
// 3、webpack提供的require.ensure()
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('../views/home.vue')), 'home')
}

组件懒加载

components:{
  "dailyModal":()=>import("./dailyModal.vue")
},
components:{
  "dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},

2、CDN 资源优化

CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。

随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。此时我们可以使用 CDN 的方法，优化网络加载速度。

将 vue、vue-router、vuex、axios 这些 vue 全家桶的资源，全部改为通过 CDN 链接获取，在 index.html 里插入相应链接。

<body>
  <div id="app"></div>
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
      <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
     <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
     <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>

在 vue.config.js 配置 externals 属性

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios':'axios'
    }
 }

卸载相关依赖的 npm 包

npm uninstall  vue vue-router vuex axios

3、gZip 加速优化

所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。

gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
      new CompressionPlugin({
        // gzip压缩配置
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false, // 是否删除原文件
      })
    )
  }
}

4、vue.config.js中关闭productionSourceMap

productionSourceMap是用来报错时定位到代码位置。

如果不想让别人看到源码可以设置为false，并且可以减少打包后包的体积，加密源码。

productionSourceMap: false,

5、SSR，服务端渲染，在服务端事先拼装好首页所需的 html

6、首页加 loading或骨架屏（优化体验）

随着 SPA 在前端界的逐渐流行，单页面应用不可避免地给首页加载带来压力，此时良好的首页用户体验至关重要。很多 APP 采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。

所谓的骨架屏，就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现，降低了“白屏”的不良体验。

防抖和节流的原理和使用场景

函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

（1）防抖：就是将一段时间内连续的多次触发转化为一次触发。

const debounce=(fn, delay) => {
    //记录上一次的延时器
    let timer = null;
    return () => {
        //清除上一次延时器
        clearTimeout(timer);
        //重新设置新的延时器
        timer = setTimeout(() => {
            fn()
        }, delay)
    }
};

（2）节流：在单位时间内只触发一次函数，若单位时间内多次触发只有一次生效

 // 封装节流函数
  function double(fn, time) {
    let isLoad = false
    return () => {
      if (!isLoad) {
        // 设置为true后，即禁止下一个计时器执行
        isLoad = true
        setTimeout(() => {
          fn()
          // 等这个计时器执行完毕后，再设置为false，才允许下一个计时器执行
          isLoad = false
        }, time)
      }
    }
  }

防抖常用场景

输入框远程查询事件
在线文档自动保存
浏览器视口大小改变

节流常用场景

按钮提交事件（当然也可做成点击后就loading）
页面滚动事件的触发
累计计算鼠标移动距离

强缓存与协商缓存（http缓存）

源自于：https://zhuanlan.zhihu.com/p/397950806

前言：

在浏览器向服务器请求资源的时候，许多静态的资源是长时间不会更改的。如果重复的发起请求，不断从服务器获取长时间不会改变的资源，不仅会浪费宽带，增加服务器的压力，甚至影响到用户的体验。通过 http 缓存就能设置资源缓存。缓存后能减少资源的请求、减少响应的时间。

http缓存：

客户端向服务器发起请求时，会根据HTTP响应头的字段加载缓存的资源。
http 缓存从第二次开始。第一次请求从服务器加载所有资源，第二次请求浏览器根据响应头的字段加载缓存资源。
http 缓存分为 强缓存 与 协商缓存。无论是命中哪个缓存资源都是从客户端本地加载，不同的是协商缓存会向服务器发起请求，强缓存不会向服务器发起请求。

强缓存（Cache-Control）：

强制缓存在客户端本地，请求直接从本地缓存中加载，不去请求服务器，返回的状态码是 200。强缓存需要 Cache-Control 字段， Cache-Control 是 HTTP 响应头中的字段。你可能在网上会看到有人会说还有 expires，pragma ，但都是 http1.0 的产物，现在应用最广泛的是 http1.1。所以我们减少一点学习压力，熟悉 Cache-Control 字段即可。

当我们向服务器请求资源时，服务器认为需要被缓存的资源比如（css，js文件、图片），这些资源在响应头中都会默认携带 Cache-Control: public, max-age=0 。public, max-age=0 是默认值（相当于没有对资源缓存进行处理）。

`Cache-Control` 属性值：

强缓存依赖 Cache-Control 字段，所以我们需要熟悉该字段的属性值，多个属性值用逗号隔开。

1. public           这些资源可以被任意对象缓存（如：客户端，代理服务器，等等）
2. private          这些资源只能在客户端缓存
3. max-age=xx       设置资源缓存的最大时间，超过时间表示缓存过期，请求会发到服务器（单位：秒）
4. no-cache         加载缓存资源前，强制发送请求到服务器进行“协商缓存”
5. no-store         不被做任何缓存

浏览器缓存：

浏览器缓存分为：内存缓存(memory-cache)、硬盘缓存(disk-cache)

打开浏览器控制台，选择Network（网络），再刷新浏览器，我们就能看到请求资源详情：

一般频繁操作的文件都缓存在内存中，加载十分迅速。操作不频繁的文件就会缓存在硬盘中，加载速度也会较慢。

到底什么文件会缓存在内存中、什么会缓存在硬盘中，我们并不需要关心，让浏览器自己决定就行。我们只需要知道后面的请求可以直接走缓存，而不用请求服务器获取资源。其实就是博主也不明白，但好像确实不用深究（强行续命一秒钟），不过有明白的小伙伴欢迎留言。

协商缓存（Etag）：

请求的资源通过资源标识与服务器协商比对，协商成功，服务器返回304状态码，浏览器从本地加载。协商缓存需要用到 Etag 字段与 if-none-match，Etag 是 HTTP 响应头中的字段，Etag 的值是根据资源内容编码生成的一段字符串（资源标识），内容不同就会生成不同的Etag。你可能在网上看到还有 Last-modified ，了解即可。

再次发起请求时，请求头会带有 if-none-match 字段，值为上一次响应的 Etag（没有则不会携带）。服务器会将请求的资源生成资源标识与发送过来的值进行比对，比如果比对成功则返回 304 状态码，浏览器从本地加载该资源。

如果协商失败服务器会返回新的资源+新的Etag（资源标识）。

API

API（Application Programming Interface，应用程序接口）是一些预先定义的接口（如函数、HTTP接口），或指软件系统不同组成部分衔接的约定。 [1] 用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。

在操作系统中的意思：

程序接口：操作系统向编程人员提供了“程序与操作系统的接口” ，简称程序接口，又称应用程序接口 API(Application Programming Interface)。该接口是为程序员在编程时使用的，系统和应用程序通过这个接口，可在执行中访问系统中的资源和取得 OS 的服务，它也是程序能取得操作系统服务的唯一途径。

通俗来说，API就是系统预留一个通道，按照约定对系统进行一些操作，如常见的就是系统的数据进行增删改查。

我的理解：就是别人讲功能写好了，打包了，直接调用就可以了，我们可以通过这个接口对系统进行一些操作，或者实现一些功能

例子：

研发人员A开发了软件A，研发人员B正在研发软件B。

有一天，研发人员B想要调用软件A的部分功能来用，但是他又不想从头看一遍软件A的源码和功能实现过程，怎么办呢？

研发人员A想了一个好主意：我把软件A里你需要的功能打包好，写成一个函数；你按照我说的流程，把这个函数放在软件B里，就能直接用我的功能了！

其中，API就是研发人员A说的那个函数。

CDN

全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络

工作原理

主要概括：CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容，比如说，是北京的用户，我们让他访问北京的节点，深圳的用户，我们让他访问深圳的节点。通过就近访问，加速用户对网站的访问。解决Internet网络拥堵状况，提高用户访问网络的响应速度。

原理

CDN这个技术其实说起来并不复杂，最初的核心理念，就是将内容缓存在终端用户附近。

内容源不是远么？那么，我们就在靠近用户的地方，建一个缓存服务器，把远端的内容，复制一份，放在这里，不就OK了？

因为这项技术是把内容进行了分发，所以，它的名字就叫做CDN——Content Delivery Network，内容分发网络。

大家可能觉得，这个不就是“镜像服务器”嘛？其实不一样。镜像服务器是源内容服务器的完整复制。而CDN，是部分内容的缓存，智能程度更高。

确切地说，CDN=更智能的镜像+缓存+流量导流。

而且还需要注意的是，CDN并不是只能缓存视频内容，它还可以对网站的静态资源（例如各类型图片、html、css、js等）进行分发，对移动应用APP的静态内容（例如安装包apk文件、APP内的图片视频等）进行分发。

原理图：

总结一下CDN的工作原理：通过权威DNS服务器来实现最优节点的选择，通过缓存来减少源站的压力。

CDN的好处

采用CDN技术，最大的好处，就是加速了网站的访问——用户与内容之间的物理距离缩短，用户的等待时间也得以缩短。
分发至不同线路的缓存服务器，也让跨运营商之间的访问得以加速。
CDN还有安全方面的好处。内容进行分发后，源服务器的IP被隐藏，受到攻击的概率会大幅下降。而且，当某个服务器故障时，系统会调用临近的健康服务器，进行服务，避免对用户造成影响。

简单介绍下CDN与传统网站访问的区别：

传统访问：

使用了CDN的网站访问：

与传统访问方式不同，CDN网络则是在用户和服务器之间增加缓存层，将用户的访问请求引导到最优的缓存节点而不是服务器源站点，从而加速访问速度。

DNS

dns概念

DNS是互联网的一项服务，它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。简单的讲DNS就是翻译官，就像把http://www.baidu.com翻译成220.181.111.188让机器理解。

DNS中保存了一张域名(domain name)和与之相对应的IP地址 (IP address)的表，以解析消息的域名。

DNS是用来做域名解析的，它会在你上网输入网址后，把它转换成IP，然后去访问对方服务器，没有它，你想上百度就要记住百度的IP，上163就要记住163的IP，有了DNS的处理，你只需要记住对应网站的域名–也就是网址就可以了。

其中域名必须对应一个IP地址，一个IP地址可以同时对应多个域名，但IP地址不一定有域名。

dns服务器（域名服务器）

dns服务器是Domain Name System或者Domain Name Service的缩写，指的是计算机域名系统，主要由两部分组成，一个是解析器另一个是域名服务器。

dns服务器的主要作用就是能将域名地址转换成网络能识别人ip地址，接着就能进行网络通讯了，也就是你能访问这个网站了。

平时上网的时候如果想要查找一个网站，那么会输入一个网址，这就是由dns服务器解析出来的地址，因此会比较容易查询得到，也能让我们上网的时候更加方便快捷。

负载均衡

负载均衡是指如果一个系统的请求很多，我们可以把请求转发到不同的服务器上，用来分流。就类似于接了一个水管放水，水流量很大时候，水压大很可能会让一个水管爆炸，这时候接三个水管，就没问题了（这三个水管就是一个集群）。类似的在nginx服务器中配了3个tomcat服务器，每个tomcat服务器上都部署了整个系统，那么当请求数大的时候，可以分发到不同的tomcat。（其实这里每个tomcat上部署同一个功能模块也叫集群）

优点

负载均衡技术具有一下优势：

（1）高性能：负载均衡技术将业务较均衡的分担到多台设备或链路上，从而提高了整个系统的性能；

（2）可扩展性：负载均衡技术可以方便的增加集群中设备或链路的数量，在不降低业务质量的前提下满足不断增长的业务需求；

（3）高可靠性：单个甚至多个设备或链路法神故障也不会导致业务中断，提高了整个系统的可靠性；

（4）可管理性：大量的管理共组都集中在使用负载均衡技术的设备上，设备集群或链路集群只需要维护通过的配置即可；

（5）透明性：对用户而言，集群等于一个或多个高可靠性、高性能的设备或链路，用户感知不到，也不关心具体的网络结构，增加或减少设备或链路数量都不会影响正常的业务。

相对链接与绝对链接

相对路径

相对路径就是相对于当前文件的路径

以下为建立路径所使用的几个特殊符号，及其所代表的意义。

“./”：代表目前所在的目录。

“../”：代表上一层目录。

以”/”开头：代表根目录

相对路径的优点：

A、容易移动内容，可以整个目录移动。

B、测试方法比较灵活，本机测试时比较方便。

相对路径的缺点：

A、部分内容页面换了位置时，链接容易失效。

B、容易被人大面积采集抄袭。

绝对路径

是从盘符开始的路径，形如C:\windows\system32\cmd.exe，而相对路径：是从当前路径开始的路径，如当前路径为C:\windows，要描述上述路径，只需输入入system32\cmd.exe 。

1、绝对路径的优点

A、如果有人抄袭你的网站内容，里面的链接还会指向你的网站，
如果有人将你的网页保存到本地电脑中，里面的链接、图片、css、
以及js仍然会连接到你的网站。
B、如果网页位置改变，里面的链接还是指向正确的URL。

2、绝对路径的缺点：

A、在编码编写时不方便使用绝对路径，因为链接应该指向真正的域名而
不是开发站点。

相对连接和绝对连接的利弊

据说绝对链接是搜索引擎比较喜欢的，而且搜索引擎不太喜欢或者识别相对连接，个人认为这个是绝对不成立的，比如某些网站，整站都是相对连接，但是搜索引擎依然爬他的整站而且还收录了很多页面。相对链接的好处还有就是，当你做好这个网站以后，突然有一天你心血来潮希望换一个域名，那么没有什么麻烦的，直接把域名和空间的解析重新做一遍就可以了，因为网站都是相对链接，换域名不会影响网站的网址的链接，但是绝对链接就做不到这些了。

相对连接和绝对链接也许各有利弊，但是并不是那么重要，而且我们做网站还是喜欢使用相对链接要好一些。