面试总结-其他

1，webpack的基本属性及原理

001.谈谈你对webpack的看法:

webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

002.webpack的基本功能和工作原理？

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

003.webpack构建过程：

从entry里配置的module开始递归解析entry依赖的所有module, 每找到一个module，就会根据配置的loader去找对应的转换规则。

对module进行转换后，再解析出当前module依赖的module 这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk。

最后webpack会把所有Chunk转换成文件输出 在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

004.webpack打包原理:

将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载。

005.什么是entry，output，loader，plugins，bundle，chunk，module?

entry 入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js

output 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

loader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。

plugins(插件)作用更大，可以打包优化，资源管理和注入环境变量

bundle是webpack打包出来的文件，

chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。

module是开发中的单个模块

006.npm打包时需要注意哪些？如何利用webpack来更好的构建？

完善基本信息;
定义依赖;
忽略文件;
打标签;

007.有哪些常见的Loader？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件;

url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去;

source-map-loader：加载额外的 Source Map 文件，以方便断点调试;

image-loader：加载并且压缩图片文件;

babel-loader：把 ES6 转换成 ES5;

css-loader：加载 CSS，支持模块化、压缩、文件导入等特性;

style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS;

eslint-loader：通过 ESLint 检查 JavaScript 代码;

008.webpack规范:

webpack默认遵循commonjs规范 module.exports

使用webpack进行打包时有两种模式：
开发模式：主要是用于测试,代码调试等;
生产模式：要考虑性能问题,要压缩 如果没有插件 就不会压缩;

默认情况下webpack的配置文件叫webpack.config.js，可以通过--config指定webpack的配置文件名

009.loader:

css需要两个loader来处理：css-loader style-loader

postcss-loader 他提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。

-webkit-transform: rotate(45deg); transform: rotate(45deg);

mini-css-extract-plugin 以前都是之间引入内部样式，把css专门打包成一个css文件，在index.html文件中引入css

optimize-css-assets-webpack-plugin css压缩
terser-webpack-plugin css压缩 js不能压缩了,然后有一个插件,能压缩js
file-loader 是让webpack打包图片
url-loader可以让图片转化base64，也可以让webpack打包图片

webpack 默认情况下不支持js的高级语法,所以需要使用babel;
babel转化; npm i @babel/core @babel/preset-env babel-loader --save-dev

010.plugins:

html-webpack-plugin 根据模块生成一个html文件 此时不会在dist文件夹下面新建index文件了

我需要在public新建 index文件
根据这个模板文件 在内存中生成 index.html 然后自动引入bundle.js

clean-webpack-plugin 去掉没有用到的模块

011.loader与plugin的区别？

• loader是使webpack拥有加载和解析非js文件的能力
• plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

2，node的核心模块

http模块：用来创建操作服务器

引入模块
var http = require('http')

使用创建服务器
http.createServer(function(req, res) {
    res.end('hello')
}).listen(3000, function() {
    console.log('runing...')
})

fs模块：用来读写文件

引入模块
var fs=require('fs')

读取和写入文件
//读取文件，参数一路径，参数二回调函数
fs.readFile('./one.txt', function(error, data) {
    // error代表错误对象，data成功够的数据,如果成功则error为null
    //toString将读取到得二进制文件转化为字符
    console.log(data.toString())
})
//写入文件,参数：路径,内容,回调函数
fs.writeFile('./tow.txt', '你好呀', function(error) {
    //error代表错误对象，如果执行穿成功则为null
    if (error == null) {
        console.log("文件写入成功")
    } else {
        console.log("文件写入失败")
    }
})

注：读取时需要转化为字符串才能看懂，否则是一堆16进制数字

path模块：路径操作模块

引入模块
var path = require('path')

__filename和__dirname
console.log(__filename)
console.log(__dirname)
一个返回文件所在目录（文件）一个不包含

path使用
拼接路径
console.log(path.join(__dirname, 'index.html'))
console.log(path.join(__dirname, '\index.html'))
console.log(path.join(__dirname, '/index.html'))

url模块：地址操作模块

引入模块
var url = require('url')

使用方式
var http = require('http')
var url = require('url')
var fs = require('fs')
http.createServer(function(req, res) {
    var parseObj = url.parse(req.url, true)
    console.log(parseObj)
    res.end('hello')
}).listen(3000, function() {
    console.log('runing...')
})

3，前端缓存

保持状态：

cookie保存在浏览器端，session保存在服务器端

使用方式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

存储内容：

cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

存储的大小：

cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

安全性：

cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

　　　　　 原因如下：（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；

　　　　　　　　　　　（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；

　　　　　　　　　　　（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。

　　　　　　　　　　　（4）sessionID是加密的

　　　　　　　　　　　（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

　　　　（2）保存上次登录的时间等信息。

　　　　（3）保存上次查看的页面

　　　　（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

　　（1）网上商城中的购物车

　　（2）保存用户登录信息

　　（3）将某些数据放入session中，供同一用户的不同页面使用

　　（4）防止用户非法登录

缺点：

            ** cookie**：（1）大小受限

　　　　　　　　（2）用户可以操作（禁用）cookie，使功能受限

　　　　　　　　（3）安全性较低

　　　　　　　　（4）有些状态不可能保存在客户端。

　　　　　　　　（5）每次访问都要传送cookie给服务器，浪费带宽。

　　　　　　　　（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

　　　　session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

　　　　　　　　（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

　　　　　　　　（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量

localstorage

由于cookie每次都会随着请求头一起提交，非常浪费带宽，所以一般使用localstorage和sessionstorage进行缓存，这俩不随请求头提交。

localstorage可长时间保存，可跨标签页，不可跨域名。

sessionstorage

localstorage不可长时间保存，不可跨标签页，不可跨域名，每次关闭标签页就消失了。

4，websocket 即时通信

WebSocket是一个协议，归属于IETF。

• HTTP是运行在TCP协议传输层上的应用协议，而WebSocket是通过HTTP协议协商如何连接，然后独立运行在TCP协议传输层上的应用协议。
• Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。
• websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信

为什么需要WebSocket

添加WebSocket特性，是为了更好、更灵活，轻量的与服务器通讯。因为WebSocket提供了简单的消息规范，可以更快的适应长连接的环境，其实现在HTTP协议自身就可以做，但是不太轻便。

WebSocket最大的特点就是实现全双工通信：客户端能够实时推送消息给服务端，服务端也能够实时推送消息给客户端。

WebSocket可以做聊天室，股票实时价格显示等应用

纠正WebSocket误区

WebSocket是一种应用协议，而我们常常看到了HTML5 WebSocket是API,不要将其进行混淆。

广义上的 HTML5 里面包含的是 WebSocket API，并不是 WebSocket。简单的说，可以把 WebSocket 当成 HTTP，WebSocket API 当成 Ajax。

5，fixed与absolute

fixed: 固定定位     absolute：绝对定位

在没有滚动条的情况下两者其实没有差异。但是在有滚动条后，fixed始终会在定好的位置不动，而absolute会随参照对象元素的宽高变化为移动。

一般fixed用在遮盖层和固定在页面某个位置（固定在顶端的菜单栏 / 弹出框居中显示 / 页面两侧的广告位等）。

在遮罩中最好使用fixed代替absolute,这样即使在敦东的时候，也能始终让遮罩盖住整个窗口！！

6，动画与过度

transition

什么叫过渡？字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。

先从一个简单的demo来看看transition的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <title>transition</title>
  <style>
    #box {
      height: 100px;
      width: 100px;
      background: green;
      transition: transform 1s ease-in 1s;
    }

    #box:hover {
      transform: rotate(180deg) scale(.5, .5);
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

animation

在官方的介绍上介绍这个属性是transition属性的扩展，弥补了transition的很多不足，我理解为animation是由多个transition的效果叠加，并且可操作性更强，能够做出复杂酷炫的效果(前提是你爱折腾)，我们以一个例子来介绍animation的威力：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>animation</title>
  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 15px solid black;
      animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
    }

    .box:hover {
      animation-play-state: paused;
    }

    @keyframes changebox {
      10% {
        background: red;
      }
      50% {
        width: 80px;
      }
      70% {
        border: 15px solid yellow;
      }
      100% {
        width: 180px;
        height: 180px;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

7，CSS选择符有哪些？

1. id选择器（ #myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 紧邻同胞选择器 h1 + p（选的是h1后紧跟的那个p）
5. 一般同胞选择器 h1 ~ p（选择所有跟在h1后的p）[css3]
6. 子选择器（ul > li）
7. 后代选择器（li a）
8. 通配符选择器（ * ）
9. 属性选择器（a[rel = "external"]）
10. 伪类选择器（a:hover, li:nth-child）

8，position的值relative和absolute定位原点是？

position

说明

static

默认值。
没有定位，元素出现在正常的流中
（忽略 top, bottom, left, right, z-index 声明）。

inherit

从父元素继承 position 属性的值。

absolute

绝对定位。
不为元素预留空间，
相对于最近的非 static 定位的祖先元素进行定位。

fixed （老IE不支持）

绝对定位。
不为元素预留空间，
相对于浏览器窗口进行定位。
元素的位置在屏幕滚动时不会改变。

relative

相对定位。
相对于其正常位置进行定位。
该关键字下，元素先放置在未添加定位时的位置，
再在不改变页面布局的前提下调整元素位置
（因此会在此元素未添加定位时所在位置留下空白）。

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。

9，CSS3有哪些新特性？

1. 圆角 （border-radius:8px）

2. 新增各种CSS选择器、伪类 （经常用到 :nth-child）

3. 文字渲染 （Text-decoration）

   转化为简写属性，可设置text-decoration-color, text-decoration-style, text-decoration-line三个属性，默认值为currentcolor solid none。

4. 透明色 & 透明度（opacity）

5. 旋转 （transform）

   旋转 rotate，缩放 scale，倾斜 skew，平移 translate

6. 动画(animation) & 过渡效果(transition)

7. 阴影（box-shadow, text-shadow）

   box-shadow: x-offset y-offset blur-radius spread-radius color;
   
   text-shadow: x-offset y-offset blur-radius color;
   复制代码
   

8. 新的布局方式，如 多列布局 multi-columns 、 弹性布局 flexible box 与 网格布局 grid layouts

9. 线性渐变（gradient）

10. 多背景（background-image可以设置多个url或linear-gradient）

11. 媒体查询(@media MDN) (可以看看这个)

12. 边框可以设置图片（border-image）

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

MDN

什么是flexbox

CSS3新增布局。

Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

• 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。

• 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

在布局上有了比以前更加灵活的空间。

具体：www.w3cplus.com/css3/flexbo…

应用场景

1. 水平垂直居中

2. 一边定宽，一边自适应

3. 多列等分布局

4. 圣杯布局

5. sticky footer

我在项目中的应用

1. sticky footer (demo)

   如果页面内容不够长的时候，footer固定在视窗底部；如果内容足够长时，footer会被内容向下推。

   <div class="detail-flex">
       <div class="detail-content">detail-content</div>
       <div class="detail-footer">detail-footer</div>
   </div>
   复制代码
   
   .detail-flex
       display: flex
       flex-direction: column
       position: fixed
       z-index: 100
       top: 0
       left: 0
       width: 100%
       height: 100%
       overflow: auto
       
       .detail-content
           flex: 1 0 auto
           
       .detail-footer
           flex: 0 0 auto
   

http和https的区别

1. https需要到ca申请证书，免费证书较少
2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议
3. http和https使用的完全不同的连接方式，用的端口也不一样，前者是80，后者是443
4. http连接是无状态的，https协议是由ssl+http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

http1.1、1.x和2.0

http1.1

1. 缓存处理，在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略
2. 长连接，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点
3. 断点续传，HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接
4. 24个状态响应码
5. Host头处理，HTTP1.1的请求消息和响应消息都应支持Host头域，且请求消息中如果没有Host头域会报告一个错误（400 Bad Request）

http1.x

1. 长连接复用，若干个请求排队串行化单线程处理，后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时等，后续请求只能被阻塞，毫无办法，也就是人们常说的线头阻塞
2. 请求优先级，允许给每个request设置优先级，这样重要的请求就会优先得到响应。比如浏览器加载首页，首页的html内容应该优先展示，之后才是各种静态资源文件，脚本文件等加载，这样可以保证用户能第一时间看到网页内容
3. header压缩，选择合适的压缩算法可以减小包的大小和数量。
4. 服务端推送

基于HTTPS的加密协议传输，大大提高了传输数据的可靠性

http2.0

1. 二进制格式，HTTP2.0的协议解析采用二进制格式
2. 多路复用，多个请求可同时在一个连接上并行执行。某个请求任务耗时严重，不会影响到其它连接的正常执行
3. header压缩，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小
4. 服务端推送