2021-04-06

img src 遇到的坑， 引发的一系列拓展思考。 

一.  遇到的问题， 如何解决

Vue 中 拼接静态的 静态路径时候， 使用 ../assets/img/xxx.png 失效的问题。

解决方式， 将路径改成 src 同级下面的 static目录中，./static/xxx.png

 

1、 各种实际详情例子

vue中的各种实例

前两种种都是编译前的

后两种则是编译之后的

涉及到 ./assets 和 ./static的区别

第一种： webpack 编译会通过vue-html-loader 和css-loader 将 assets 看做模块依赖解析，并从中获取 图片的信息，通过base64编码，引入嵌入成 html 中的内容。

第二种： require 是通过 file-loader 处理，并 return 处理之后的URL,y一些小数据被编译成 base64 嵌入到 html 中。

第三种：第三种vue指令编译之后，变成html5中访问相对url方式，由于编译之后的代码在内存中，默认是与 src 同级， 此时的相对路径错误，访问不到对应资源

第四种： src 同级下的 static 属于 “真正” 的静态资源，不会被 webpack 处理， 因此此时和第三种类似，可以被访问到。

 

2、 src 和 href 的区别？

答： src (source n&vt 资源，从... 获取资源) ， 是引入资源，并替换当前元素，会将’指定的资源下载并引入到页面中来。'常用的有src 属性的元素有 img、script、 iframe...

 

当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

        href (hypertext reference 超文本引用)，是引用资源 和页面关联， 在页面和资源之间建立关联。常用的有href 属性的元素有 a、link、 iframe...

link css时候，若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

说白了： href 是连接, src 是替换当前元素吧

 

 3、base64编码

是什么？

base64 是用于传输8bit字节码的一种转码方式，用64种可打印字符组成的文本来表示二进制数据。a-Z 、0-10 、* /

webpack 中 file-loader  ->  url-loader  中配置 limit , 可以将 小文件的图片资源 转换成 base64文本格式，放到捆绑包bound.js中使用。将图片像素转成文本方式，而不是使用服务器静态资源也会有一系列优缺点。

 优缺点： 

• base64是图片的文本格式，降低服务器资源损耗
• 网页使用base64, 不再请求服务器调用图片资源，减少对服务器请求
• 适用于不同平台、语言的传输

缺点：

• 大文件文件较长，不适合，存储在数据库也会增大数据库压力。
• 如果文本格式内容太多，加载网页的速度会下降，影响用户体验。
• base64无法缓存，只能缓存包含base64的文件，如js和css, 这比直接缓存图片较差，另外html改动频繁，没有缓存效益

常见的格式： 

• data:,文本数据
• data:text/plain,文本数据
• data:text/html,HTML代码
• data:text/html;base64,base64编码的HTML代码
• data:text/css,CSS代码
• data:text/css;base64,base64编码的CSS代码
• data:text/javascript,Javascript代码
• data:text/javascript;base64,base64编码的Javascript代码
• data:image/gif;base64,base64编码的gif图片数据
• data:image/png;base64,base64编码的png图片数据
• data:image/jpeg;base64,base64编码的jpeg图片数据
• data:image/x-icon;base64,base64编码的icon图片数据

总结：
  适用于小图片资源，它不是为了节省存储空间，而是为了减少请求，因为请求耗时且消耗服务器。

  但图片过大，文本大损耗内存，并且请求时候更慢，得不偿失

 

4、import 和 require 的区别 (转载)

规范的区别：

require 是CommonJS/AMD规范；

import 是ES6中引入的，为了兼容会用babel转化成es5

调用时间的区别：
require: 在运行时候调用。

import ：在编译的时候调用，因此一般放在前面,（当然不放在前面也会提升到前面的，效率更高一些）

本质：

require: 是赋值过程，因此一般在编译时候调用。

             也就是拷贝过程

             引入基础类型，属于复制

             引入复杂类型，属于浅拷贝，未执行的模块不输出

import ：是解构过程，也是引用过程（在export 中修改的只， 后面可以取到），为了兼容，一般node中会使用babel,将es6转成es5的require

 

let { exists, readFile } = require('fs');

会加载 整个 fs 模块，然后取用 其中的两个方法

// ES6模块
import { exists, readFile } from 'fs';

只从模块中加载两个方法，其他值不引用，默认使用的是 ‘严格模式’

扩展：

 

5、link href="xxx.css" 和  @import 的区别

 a. link href  是xhtml 标签， 处了 href 加载 css外， 还有 rel 、rss 、 引入网站图标 等作用。 而@import 属于css 范畴,只能加载 css. 

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />

title定义的是网页的标题，该网页打开时，title的内容会出现在浏览器选项卡的标题栏上，也是网页搜索的重点内容。

link这句话定义了本网页可以通过rss/来读取内容。

RSS（简易信息聚合，也叫聚合内容）是一种描述和同步网站内容的格式。网站提供RSS输出，有利于让用户获取网站内容的最新更新。

 

b. link 引入时候，可以在页面载入时候同步加载。 而@import 需要在网页全部加载后再加载。

c. link href  是xhtml 标签, 无兼容问题。 @import 是css2.1提出，低版本不兼容。

d. link 是 标签，可用通过js控制dom来修改样式。这些基于文档的，@import 不能通过dom 来插入样式。