百度某部门面试原题（下）

vue keep-alive组件有什么用

用于保留组件状态或避免重新渲染（缓存的作用）

两个属性include与exclude

• include：字符串或者正则表达式。只有匹配的组件会被缓存
  
• exclude：字符串或者正则表达式。任何匹配的组件都不会被缓存。
• 
  

二者都可以用逗号分割字符串、正则表达式或者一个数组。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

如何监听一个变量的变化 长度 index

defineProperty

var a = { watchValue:0 };
var lastTimeValue=a.watchValue;
Object.defineProperty(a, 'watchValue', {
  get: function() {
    console.log('get：' + watchValue);
    return watchValue;
  },
  set: function(value) {
    watchValue = value;
    if(lastTimeValue!=watchValue){
        lastTimeValue=watchValue;
        console.log('value changed!! set: ' + watchValue);
    }
  }
});

proxy

var observe1 = (object, onChange) => {
  const handler = {
    get(target, property, receiver) {
      try {
        return new Proxy(target[property], handler);
      } catch (err) {
        return Reflect.get(target, property, receiver);
      }
    },
    set(target, key, value, receiver) {
      onChange(value);
      return Reflect.set(target, key, value, receiver);
    }
  };
  return new Proxy(object, handler);
};
var obj = {
  foo: false,
  a: {
    x:{y: 4},
    b:[{c: false}]
  }
};
var watchedObj = observe1(obj,(val)=>{
  console.log(`哈哈哈，监听到值变化为${val}了`);
});
watchedObj.foo = true; 
watchedObj.a.x.y = 5; // 监听到值变化为5了
watchedObj.a.b[0].c = true;

webpack lorder / plugin

webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。

loader的使用方式

1：在配置文件webpack.config.js中配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

2：通过命令行参数方式

webpack --module-bind 'txt=raw-loader'

3：通过内联使用

import txt from 'raw-loader!./file.txt';

webpack常用的loader

样式：style-loader、css-loader、less-loader、sass-loader等文件：raw-loader、file-loader 、url-loader等编译：babel-loader、coffee-loader 、ts-loader等校验测试：mocha-loader、jshint-loader 、eslint-loader等比如下面配置，可以匹配.scss的文件，分别经过sass-loader、css-loader、style-loader的处理。

sass-loader转化sass为css文件，并且包一层module.exports成为一个js module。

style-loader将创建一个style标签将css文件嵌入到html中。

css-loader则处理其中的@import和url()。

module.exports = {
  module: {
    rules: [
        {
          test: /\.scss$/,
          use:[
              {loader:'style-loader'},
              {loader:'css-loader',options:{sourceMap:true,modules:true}},
              {loader:'sass-loader',options:{sourceMap:true}}
          ],
          exclude:/node_modules/
      }
    ]
  }
}

webpack常用的plugin

首先webpack内置UglifyJsPlugin，压缩和混淆代码。webpack内置CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。ProvidePlugin：自动加载模块，代替require和import

写一个webpack插件步骤如下：

1. 编写一个JavaScript命名函数。

2. 在它的原型上定义一个apply方法。

3. 指定挂载的webpack事件钩子。

4. 处理webpack内部实例的特定数据。

5. 功能完成后调用webpack提供的回调。

编写插件之前要理解compiler和compilation两个对象，以及webpack生命周期的各个阶段和钩子，plugin比loader强大，通过plugin你可以访问compliler和compilation过程，通过钩子拦截webpack的执行。

package.json package.lock.json 区别

package.json

Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块的描述文件，被称为 package.json。

属性说明：

• name - 包名；
• version - 包的版本号；
• description - 包的描述；
• homepage - 包的官网URL；
• author - 包的作者，它的值是你在 https://npmjs.org 网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan <zhangsan@163.com>；
• contributors - 包的其他贡献者；
• dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下；
• repository - 包代码的 Repo 信息，包括 type 和 URL，type 可以是 git 或 svn，URL 则是包的 Repo 地址；
• main - main 字段指定了程序的主入口文件，这个字段的默认值是模块根目录下面的 index.js；
• keywords - 关键字
• 
  

devDependencies、dependencies、peerDependencies的区别

• devDependencies是只会在开发环境下依赖的模块，生产环境不会被打入包内。安装时，加上--save-dev
• dependencies依赖的包不仅开发环境能使用，生产环境也能使用。安装时，加上--save
• peerDependencies是用来发布npm插件时指定所需要兼容的宿主包的版本。
  
  

package.lock.json

当我们安装依赖时，package-lock.json 文件会自动生成。package-lock.json 文件中记录了下载源地址，可以加快我们的 npm install 速度。

怎么转化less为css

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

webpack的配置如下：

module: {
        rules: [{
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"]
//编译方向从右到左less-loader=>css-loader=>style-loader
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    }

把样式文件less转为css并且单独提取出来（不放置在bundle.js中）

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 plugins: [
        new ExtractTextPlugin('style.css')
        //if you want to pass in options, you can do so:
        //new ExtractTextPlugin({
        //  filename: 'style.css'
        //})
    ]
}

地址栏输入一个url到页面渲染过程

1、HTTP 请求准备阶段

• 构建请求--浏览器构建请求行信息，准备发起网络请求 GET /index.html HTTP1.1
• 查找缓存--如果浏览器发现请问资源在浏览器中存在副本，根据强缓存规则，如没有过期那么直接返回资源，如何查找失败进入下一个环节：
  --准备 ip 地址和端口
  --DNS（域名和ip的映射系统） 域名解析，拿到ip之后找端口，默认为80
  --建立tcp链接（三次握手）
  --如果是https 还需要建立TLS连接
• 
  

2、HTTP 发送请求

浏览器向服务端发起http请求，把请求头和请求行一起发送个服务器，服务端解析请求头如发现cache-control和etag（if-none-match），if-modified（if-modified-since）字段就会判断缓存是否过期，如果没有返回304，否则返回200

3、HTTP 响应返回

• 浏览器拿到响应数据，首先判断是否是4XX或者5XX是就报错，如果是3XX就重定向，2XX就开始解析文件，如果是gzip就解压文件
• TCP断开连接
• 4次挥手
  
• 浏览器解析渲染
  
• 建立根据html建立dom树和css树，如果遇到script首选判断是否defer和async否则会阻塞渲染并编译执行js，如果没有则组合生成render tree，最后浏览器开启GPU进行绘制合成图层，将内容显示屏幕。
• 
  

content-type作用

Content-Type 实体头部用于指示资源的MIME类型 media type 。

在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找，并不一定遵循此标题的值；为了防止这种行为，可以将标题 X-Content-Type-Options 设置为 nosniff。

在请求中 (如POST 或 PUT)，客户端告诉服务器实际发送的数据类型。

Content-Type 的值类型：

1.1 application/json：消息主体是序列化后的 JSON 字符串

1.2 application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式

1.3 multipart/form-data： 需要在表单中进行文件上传时，就需要使用该格式。常见的媒体格式是上传文件之时使用的

1.4 text/plain：数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符

介绍知道的状态码，状态码301、302区别

状态码分为5类：

301：（永久移动）请求的网页已被永久移动到新位置。服务器返回此响应（作为对GET或HEAD请求的响应）时，会自动将请求者转到新位置。

302：（临时移动）服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。此代码与响应GET和HEAD请求的301代码类似，会自动将请求者转到不同的位置。

HTTP状态码301与302的区别：

1、它们之间关键区别在，资源是否存在有效性；

2、301资源还在只是换了一个位置，返回的是新位置的内容；

3、302资源暂时失效，返回的是一个临时的代替页上。

sessionstorage localstorage区别

1.生命周期

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2.存储大小

localStorage和sessionStorage的存储数据大小一般都是：5MB

3.存储位置

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

4.存储内容类型

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5.获取方式

localStorage：window.localStorage

sessionStorage：window.sessionStorage

6.应用场景

localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据

sessionStorage：敏感账号一次性登录

浏览器为啥第二次访问就快了

主要原因是这些网站把很多资源都缓存在了本地，浏览器缓存直接使用本地副本来回应请求，而不会产生真实的网络请求，从而节省了时间。同时，DNS 数据也被浏览器缓存了，这又省去了 DNS 查询环节。

DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存的。

1）、DNS 缓存比较简单，它主要就是在浏览器本地把对应的 IP 和域名关联起来。

2）、重点看下浏览器资源缓存，下面是缓存处理的过程：

怎么减少页面加载时间

1、压缩css、js文件

2、合并js、css文件，减少http请求

3、外部js、css文件放在最底下

4、减少dom操作，尽可能用变量替代不必要的dom操作

5、优化图像（格式选择、懒加载等等）

6、使用CDN

7、使用缓存

8、减少 http 请求（合并文件，合并图片）

9、标明高度和宽度

10、网址后加斜杠

11、优化TCP协议

遇到的棘手的问题,完成了什么工作

开放性题目，自由作答。

三、最后

   这套题目，考到的知识点比较细，所以我们在平时学习的时候要多多去挖掘，"蜻蜓点水 "的背后是要深入。