前端面试题

关于浏览器

1. 主流浏览器和内核？

2. 浏览器的缓存机制？

浏览器的缓存分为两种情况：

• 强缓存： 不会向服务器发送请求，直接从缓存中读取资源

    实现方式设置：http请求头添加Expires 和 Cache-Control。
    *Expires（http1.0）: 缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点 
     Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以
     直接从浏览器缓存取数据，而无需再次请求。
        
    *Cache-Control（http1.1)：可以在请求头或者响应头中设置，并且可以组合使用多种指令
        
  

• 协商缓存： 协商缓存是强制缓存失效后。浏览器携带缓存标识向服务器发送请求，由服务器根据标识决定是否使用缓存

    协商缓存生效，返回304和Not Modified
    协商缓存失效，返回200和请求结果
  

参考：www.jianshu.com/p/54cc04190…

3.浏览器是如何渲染页面的？（在浏览器中输入网址后发生了一系列什么操作？）

• 输入的网址在通过DNS解析后得到服务器地址

• 浏览器向服务器发起http请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回给浏览器。

  关于TCP的三次握手？四次挥手？
  

• 浏览器接收到代码后，经过三大步骤进行解析

   （1）DOM构造： 浏览器首先将收到的html代码通过DOM解析器，解析构建为一颗DOM树；
  

  

  （2）布局：浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放形成文档流。
  
  （3）绘制页面：布局完成之后，我们在页面上其实是看不到任何内容的浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上
  ，但并没有可视化。因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。
  

原文地址：www.zhihu.com/question/34…

3.浏览器兼容问题的解决？

4.web性能优化

5.关于js的两种基本类型null和undefined

    console.log(typeof undefined); //undefined
    console.log(typeof null); //object
    console.log( undefined == null); // true
    console.log( undefined === null); // false

（1） undefined： 声明的变量没有赋值，这时变量的默认值为undefined;

（2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址;

 2、何时使用null?
 当使用完一个比较大的对象时，需要对其进行释放内存时，设置为null(闭包回收案例)

vue部分知识

1. vue的生命周期/生命周期钩子/生命周期钩子在什么情况下会被调用

vue生命周期是指vue对象从构建到销毁的整个过程。

钩子函数是指在每个Vue实例被创建时都要经过一系列的初始化过程中执行的函数。

钩子函数

• beforeCreate // created 创建前/后

• beforeMount // mounted 挂载前/后

• beforeUpdate // updated 更新前/后

• beforeDestory // destoryed 销毁前/后

2. route,router,routes的区别

3. watch/computed的区别？ watch 的deep，immediate属性的作用

watch: 属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑，监听的属性必须在data里面声明

//写法1

watch: {
    TaskCode(newVal,oldVal){  //监听的变量TaskCode必须要在data里面声明
        console.log(newVal); //打印变化后的值
    
        //注意：TaskCode最初在data里绑定的时候watch是不会执行的，要等到监听的属性改变时才执行监听计算
    }
}
 
 //写法2
 watch: {
    TaskCode: {
        handler(newVal) {
            console.log('watch22');
        },
        immediate: true,  //页面加载立即监听,最初在data里绑定的时候watch就监听了
        deep: true   //用来做深监听，比如对象或数组的监听
}
 }

computed：定义的每一个计算属性，都会被缓存起来，当计算属性里面依赖的一个或多个属性变化了，
才会被动的发生改变（重新计算当前计算属性的值）

computed:{
    getData(){   //监听自定义的属性getData，getData不用再data里面声明
        console.log('computed');
        return this.waitnum    //返回依赖变化后的值，只有当依赖改变的时候才会去重新计算，页面一加载，waitnum被赋值，
        就会执行，一般在created前执行
    }
}

区别：
    1.computed的话是通过几个数据的变化，来影响一个数据，监听的属性是自定义的，不用再data里面声明；
    2.而watch，则是可以一个数据的变化，去影响多个数据，监听的属性必须在data里面声明；
补充：
	1.computed是计算属性，watch是监听属性；
	2.computed是计算属性有依赖（return），并且基于它们的依赖进行缓存,当依赖发生改变，才会触发；
	3.watch监听的属性要在data里先声明，computed可以不用；
	4.computed页面加载就会执行；watch只有监听的属性发生变化才会执行，如果需要页面开始就执行需要添加immediate: true；
    5.watch要监听对象的时候，需要深监听, 加上属性 deep: true;
    
    

4. vue-router的底层原理

vue-router通过hash与History 两种方式实现前端路由，更新视图但不重新请求页面 

5. vue.nextTick() 方法

理解： 当数据更新了，在dom中渲染后，自动执行该函数

使用场景：

* Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

* 与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

6. keep-alive

Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive>  标签包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

使用场景：

    在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，
当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，
这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。

8. vue自定义事件

9. vue的mvvm底层原理

Object.defineProperty监听到data的属性发生了改变， View通过View-Model的DOM Listeners将事件绑定到Model上，
而Model则通过Data Bindings来管理View中的数据

9.1 vue发布-订阅模式

export default {
    data() {
        return {
            name: '张三'，
            age: 18
        }
    }
}

vue是数据驱动视图的，实例中的data属性，上边挂在了很多数据，如name， age等，他们分别都是被观察者，name拥有一个自己的dep，age也拥有一个dep，两个他们是不同的实例。也就是说，当age的值改变后，就会让age拥有的dep上的所有watcher触发update 这个update方法内部去做更新视图的操作

参考： juejin.cn/post/684490…

10. MVC 和MVVM的区别

1、实现数据与视图的分离

2、通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

11.vue-router的钩子函数

• 1、全局的钩子

    beforeEach（to，from，next）
        页面加载之前
        页面跳转之前权限认证，访问拦截
    
    afterEach（to，from，next）
        页面加载之后
  

• 2、组建内的导航钩子

• 3、路由内的导航钩子

12.vue 导航守卫

导航守卫一共有三种形式：

• 全局导航守卫

• 路由独享守卫

• 组件内守卫

    说明： 主要使用的全局导航守卫：（全局前置守卫 router.beforeEach((to, from, next)) 就是对所有的路由都会拦截）
    我们可以通过对路由拦截来判断是否有权限跳转到某个页面
    
  

使用场景： 例如判断用户是否登录，登录才能访问某些页面，如果没有登录，就跳到登录页 //导航守卫需要结合meta(路由元信息)来实现

const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) => {
    <!--to：这是你要跳去的路由对象。-->
    <!--from：这是你要离开的路由对象。-->
    <!--next：是一个方法，它接受参数。这个方法必须调用要不就跳不过去了，你可以把它看做保安。必须给它打个招呼，要不然不让你过。-->
    <!--next（false）。如果传入false。保安就不让过了。也就是中断跳转。-->
    <!--next（{path：“/”}）。这个意思是保安不让过，并把你交到另一地方审查了。也就是中断跳转，跳转到一个新的路径。-->
    
})

2.导航守卫中的next的用处？

13.vue 路由元信息

在路由列表中，每个路由都可以配置一个 meta 元数据字段， 我们可以在这里设置一些自定义信息
可以配合导航守卫来实现一些逻辑

const router = new VueRouter({
  routes: [
    {
        path: '/foo',
        component: Foo,
        meta: {                         //路由元信息
            requiresAuth: true 
            title: '我是首页' 
        }  
    }
  ]
})

1.在组件中获取meta数据

我们可以通过 $route.meta.xxxx 获取路由元信息中的数据，下面我们将其直接显示在页面上。

<template>
  <div>
    <h1>{{$route.meta.title}}</h1>
  </div>
</template>

2.在路由钩子中获取 meta 数据

当跳转到某个页面时，如何在这个页面组件内改变网页标题。
可以在全局的钩子函数 beforeEach 中获取 meta 中的 title 数据，并设置为页面标题

//全局路由改变前钩子
router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  next(); //必须调用要不就跳不过去了
})

14.如何在vue项目中实现按需加载？

15.vue中的混入（mixin）

混入：用来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项；

• 局部混入（普通混入）
• 全局混入（可以用来全局注册一个方法)

原文地址： www.cnblogs.com/weisuoyuwei…

关于vue-cli的相关知识

1.vue-cli和webpack是什么关系?

2.为什么我用vue-cli就build成功了？

js部分知识点

1. js的原型链

原型: 每个对象都会在其内部初始化一个属性，就是prototype(原型)

**原型链**: 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，
这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念

**简单化理解：就是利用原型，让一个引用类型继承另一个引用类型的属性和方法 **

首先，fn的构造函数是Foo()。所以： fn._ _ proto _ === Foo.prototype 又因为Foo.prototype是一个普通的对象，它的构造函数是Object，所以： Foo.prototype. _ proto _ _=== Object.prototype 通过上面的代码，我们知道这个toString()方法是在Object.prototype里面的，当调用这个对象的本身并不存在的方法时，它会一层一层地往上去找，一直到null为止。

原文链接： blog.csdn.net/qq_36996271…

2. 冒泡排序的原理

3. 闭包

闭包就是能够读取其他函数内部变量的函数。通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

闭包的用处有哪些？

• 一个是它可以读取函数内部的变量
• 让这些变量的值始终保持在内存中

代码：

  function a() {
    var i = 0;
    function b() {
      alert(++i);
    }
    // console.log(b);
    return b;
  }
  var c = a();
  c(); //1
  c(); //2
  c(); //3
  //依次弹出1,2,3。
  //原因： i是函数a中的一个变量，它的值在函数b中被改变，函数b每执行一次，i的值就在原来的基础上累加 1
  因此，函数a中的i变量会一直保存在内存中。 参数和变量不会被垃圾回收机制回收

闭包的优缺点？

优点

• 希望一个变量长期存储在内存中
• 避免全局变量的污染

缺点

• 用闭包会占有内存资源
• 过多的使用闭包会导致内存泄露等

解决闭包造成的内存泄漏方法？

在退出函数之前，将不使用的局部变量赋值为null

4. 递归，实现函数clone,对5种主要的数据类型（Number，String，Object，Arry,Boolean）进行递归复制

递归函数即自己调用自己

使用递归注意点： 递归中可以函数自身调用自身，使用时类似于条件循环一样，要有递归的终止条件，否则容易出现死循环

  let obj = {
    name: '张三',
    age: 18,
    hair: 'black',
  }

  function  cloneObj(p) {
    let newObj = {}
    if(typeof (p) !== 'object'){
      return p
    } else {
      for (var attr in p) {
        newObj[attr] = cloneObj(p[attr]);
      }
    }
    return newObj
  }
  let Obj2 = cloneObj(obj) 

5. js有几种数据类型

值类型 (基本类型)： 字符串（string）、数值（number）、布尔值（boolean）、undefined、null  （5个）
引用类型： 对象（Object）、数组（Array）、函数（Function）

区别：

• 值类型： 占用空间固定，保存在栈中
• 占用空间不固定，保存在堆中

6.深克隆和浅克隆

• 浅克隆: 直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值， 如果是引用类型，则赋值的是地址

• 深克隆： 就是把数据赋值给对应的变量，是拷贝对象各个层级的属性。

实现深克隆的方式：

方法一: 递归
方法二: JSON.stringify 和 JSON.parse

 let obj = {
    name: '张三',
    age: 18,
    hair: 'black',
  }

  let _obj = JSON.stringify(obj) //变成json字符串
  let newObj = JSON.parse(_obj) // 拷贝一个字符串会新辟一个新的存储地址，这样就切断了引用对象的指针联系
  obj.name = '小王'
  console.log(obj);
  console.log(newObj);

浅谈ECMAscript 和JavaScript

1.ECMAScript是什么：

    ECMAScript是Ecma国际发布的一个脚本程序设计语言规范，用于制定行为准则；比如它规定=用来进行赋值，
具体能赋哪些值与它的具体实现密切相关。比如可以将一个获取的div对象赋值给一个变量，这就是它的具体实现。 
ECMAScript还有其他具体实现，比如当前比较火的node.js。

2.关于JavaScript

JavaScript则是这套行为准则（ECMAScript）在浏览器平台上的具体实现，不能认为是一种语言。

3.两者的关系：

JavaScript是ECMAScript规范在浏览器上的具体实现。利用此规范，JavaScript可以操作DOM对象
和window对象。也就是说，JavaScript涵盖了三方面的内容，ECMAScript、DOM对象与BOm（window）对象

5.关于dom对象（文档对象模型）

6.DOM解析器

每个浏览器软件都有一个名为dom parser的程序，负责将HTML文档解析为dom。

将数据从HTML解析到DOM树过程

取一个简单的HTML文件。它有根元素<html>。它的子元素是<head>和<body>，每个子元素都有自己的子元素。
因此，从本质上讲，浏览器读取HTML文档中的数据，类似于：

    <html>
      <head>
        <meta/>
        <link/>
      </head>
      <body>
        <header>
          <h1></h1>
             <h2></h2>
        </header>
        <main>
          <article>
            <p></p>
            <p></p>
            <p></p>
          </article>
        </main>
        <footer>
          <div></div>
        </footer>
      </body>
    </html>

浏览器dom解析器像这样将它们排列成一个DOM树：

DOM树中每个HTML元素（及其所属内容）的标签称为节点。根节点是<html>的节点。
JavaScript中的DOM接口称为文档（因为它是HTML文档的表示）。因此，我们通过JavaScript中的文档接口访问HTML文档的DOM树
我们不仅可以访问，还可以通过DOM操作HTML文档。我们可以向网页添加元素，删除并更新它们。

7.为什么要避免频繁的操作dom

背景： dom操作影响性能最主要是因为它导致了浏览器的重绘（repaint）和重排（reflow）。

    （1）重绘:  就是指页面某些部分需要重新绘制，由于节点的几何属性发生改变或者由于样式发生改变，
    例如改变元素背景色时，屏幕上的部分内容需要更新，而元素的位置和尺寸并没有改变。

    例如：当我们使用javascript更新网页上的div标签的颜色。您需要做的是访问相应的dom节点对象并修改color属性。
    这不应该影响树的其余部分（树中的其他节点）
    
    （2）重排： 元素的位置或尺寸发生了改变，浏览器需 要重新计算渲染树，导致渲染树的一部分或全部发生变化。渲染树重新建立后，浏览器会重新绘制页面上受影响的元素。
    
    例如：如果要从树中删除节点或向其中添加节点，整个树可能需要重新渲染，这是一项昂贵的工作。
    完成这项工作需要时间和浏览器资源，所以尽量避免频繁的操作dom；

原文地址： www.jianshu.com/p/6b53ff21b…

www.cnblogs.com/ziyoublog/p…

8.扩展：vue中的虚拟dom

7.关于Bom对象（浏览器对象模型）

原文参考：www.softwhy.com/article-980…

ES6的知识点(ES是ECMAScript的缩写)

1.ES6的箭头函数与ES5的普通函数有什么区别？

• this指向不同

    箭头函数：函数体内的this对象是固定的，就是定义时所在的对象，而不是使用时所在的对象
    普通函数: 普通函数中this指向不是固定的，谁调用它，this就指向谁
  

2. Es6的Symbol？

背景：ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，
你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生
冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，
这样就从根本上防止属性名的冲突。

ES6 引入了一种新的原始数据类型Symbol

let s = Symbol();

typeof s
// "symbol"

通过Symbol函数生成的数值是独一无二的

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

使用场景(暂时没有用到，待补充) 扩展：js基本数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

3. 局部作用域

背景： var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。
为了纠正这种现象，ES6 新增了let，const命令，用来声明变量。如果在变量声明前使用会报错；
并且let，const声明的变量会形成一个局部作用域；

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

let与const的区别：

let： 用来声明一个变量
const: 声明一个常量，如果声明的变量是基本数据类型，则不能重新赋值，引用类型可以；

4. 模块

为什么要模块化？
    ES6前，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来
优点：
    1.代码可维护性更高
    2.模块化的代码可以实现按需加载，提交性能
    3.实现代码复用
    
模块化的命令？（export和import）
    1.export命令用于规定模块的对外接口，导出模块；
        *export default（默认导出）
        *export{方法名}  （按需导出）
        
    2.import命令用于输入其他模块提供的功能，导入模块；
    

5. 解构赋值

背景： 在es5中我们进行相关赋值的时候，只能一个一个进行赋值，使用逗号的进行赋值也只是最右边的赋值 才生效;
在es6中出现了赋值解构，分两种情况一个是数组解构，一个是对象解构赋值;

• 数组的结构赋值

    注意点： 从数组中提取值，按照对应位置，对变量赋值
  

• 对象的解构赋值

    注意点： 从对象中提取值，按照对应属性名，对变量赋值 
  

• 字符串的解构赋值

解构赋值的用途：

1.交换变量的值,简单易读，语义清晰

  let x = 1;
  let y = 2;
  [x, y] = [y, x];
  console.log(x, y);  // 2, 1

2.从函数返回多个值：函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。


3.将一组参数与变量名对应起来

// 参数是一组有次序的值
  function f([x, y, z]) {  }
  
  f([1, 2, 3]);

// 参数是一组无次序的值
 function f({x, y, z}) {  }
 
 f({x:1, z:2, y:3});

参考文章：es6.ruanyifeng.com/#docs/destr…

6.扩展运算符

扩展运算符（spread）是三个点（...）可以将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])  // 1 2 3
console.log(1, ...[2, 3, 4], 5)   // 1 2 3 4 5

用途：主要用于函数调用

注意：

  let obj = {a:1,b:2,c:3}
  let obj2 = {...obj}
  obj.b= 4
  console.log(obj);  // {a:1,b:4,c:3}
  console.log(obj2);  //{a:1,b:2,c:3},扩展运算符实现对对象的深拷贝

7.Promise 对象

8.关于es5的相关

html/css的知识点

1.简述一下你对HTML语义化的理解？

* html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
* html语义化,在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读和维护;
* 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

2.网页验证码是干嘛的，是为了解决什么安全问题？

区分用户是计算机还是人的公共全自动程序。可以防止恶意改变密码、刷票、论坛灌水；

3.rem 与 em的区别？

4.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

分为两种， IE 盒子模型、W3C 盒子模型；
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
区  别： IE的content部分把 border 和 padding计算了进去；

###5.CSS优先级（权重）如何计算？

权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

5.CSS3新增伪类有那些？

::after			在元素之前添加内容,也可以用来做清除浮动。
::before			在元素之后添加内容
:disabled 		控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

6.如何居中div？

• 水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div{
    width:200px; //div有固定宽度
    margin:0 auto;
   }

• 水平垂直居中一（已知div的宽高）

div {
    position: relative;		/* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
    background-color: pink;	 	/* 方便看效果 */

   }

• 水平垂直居中二（ 未知容器的宽高，利用 transform 属性）

div {
    position: absolute;		/* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;	 	/* 方便看效果 */

  }

• 水平垂直居中三（利用 flex 布局，实际使用时应考虑兼容性）

.father {
    display: flex;
    align-items: center; 		/* 垂直居中 */
    justify-content: center;	/* 水平居中 */

  }

7.经常遇到的浏览器的兼容性有哪些？

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一；

• IE下,可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性 Firefox下,只能使用getAttribute()获取自定义属性。

   解决办法：统一通过getAttribute()获取自定义属性。 
  

• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示；

   解决办法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  

8.为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

9.CSS优化、提高性能的方法有哪些？

* 提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
* 使用预处理工具或构建工具

10.什么是CSS 预处理器？

    预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
    还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

11.如何清除浮动？原理是什么？为什么要清除浮动？

12. transform有哪些常用的属性及其基本使用

• scale：缩放属性

transform：scale（2,1.5），表示在水平方向（X轴）缩放2倍，在垂直方向（Y轴）缩放1.5倍。基本默认为中心点。这里的X、Y轴指的是像坐标系一样的X、Y轴

• rotate：旋转属性

rotate(30deg),2D旋转，正值为顺时针旋转，负值为逆时针旋转，默认旋转基点是中心点

• translate：移动属性

translate（100px，20px），表示在水平方向上移动100px；在垂直方向上移动20px

相关面试题

1.画一条0.5px的直线

.line {
    height: 1px;
    transform: scale(0.5); //缩放0.5倍
}

2. 怎么让Chrome支持10px 的文字（默认最小为12px）

 .text {
    font-size: 10px;
    -webkit-transform:scale(0.8);//缩放0.8倍
}

13 关于伸缩布局flex

说明： 任何东西都可以Flex布局；包括行内元素

.content {
    display: flex;
}

span {
    display:inline-flex;  //行内元素的flex布局
}

参考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

14 说说行内元素和块级元素

• 行内元素：span，a，em，b，strong，i (display: inline-block //设置为行内块； block //设置为块级元素)
• 块级元素：div, h1~h5，p，ul, li， dl，dt，dd

行内元素和块级元素的区别：

1. 块级元素独占一行，宽度默认继承父盒子的宽度，可以设置height/width/margin/padding；
2. 行内元素可以在一行中展示，不可设置宽高/margin上/padding上下，宽度由内容撑开

经典面试题： img是行内元素还是块级元素

    img 严格上来说， display为inline,属于行内替换元素，效果等于块级元素，类似于行内块，
    宽高由嵌入的图片大小决定，可设置height/width/margin/padding;

webpack的知识点

1.webpack是怎么打包的(打包过程)？

webpack打包过程：

2.webpack 中的 loader 的作用是什么？

背景：由于webpack默认只能处理JS文件，当我们想打包图片、CSS，vue 等一些非js文件时，webpack是不知道该怎么去打包它们的，

loader的作用就是：
    loader是webpack的打包辅助工具，当webpack打包文件，发现这个要处理的文件不是js文件，就会去webpack配置文件
    webpack.config.js中调用对应的Loader处理这种文件类型；Loader调用完毕，会把处理的结果直接交给 webpack进行
    打包合并，最终输出到bundle.js中去。
    
    简单理解：loader就是webpack处理非js文件的规则

常用的loader:

• 样式

    1.css-loader : 解析css文件中代码
    2.style-loader : 将css模块作为样式导出到DOM中
    3.less-loader : 加载和转义less文件
    4.sass-loader : 加载和转义sass/scss文件
  

• 脚本转换编译

•   1.script-loader : 在全局上下文中执行一次javascript文件，不需要解析
    2.babel-loader : 加载ES6 代码后使用Babel转义为ES5后浏览器才能解析
  

• Files文件

   url-loader : 多数用于加载图片资源,超过文件大小显示则返回data URL
  

• 加载框架

  vue-loader : 加载和转义vue组件
  

　　 　

3.使用 webpack 时如何优化项目体积

HTTP协议相关

1. post请求和get请求的区别

GET请求会被浏览器主动cache（缓存），而POST不会，除非手动设置

get把请求的参数放在url上，即HTTP协议头上 post把参数放在HTTP的包体内

Get 方式传输的数据量非常小，一般限制在 2 KB 左右，但是执行效率却比 >Post 方法好；而 Post
方式传递的数据量相对较大，它是等待服务器来读取数>据，不过也有字节限制（实际上IIS4中最大量为80KB，IIS5中为100KB），这是为>了避免对服务器用大量数据进行恶意攻击

GET请求只能进行url编码，而POST支持多种编码方式

GET产生的URL地址可以加入书签，而POST不可以

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息

2.如何解决GET请求浏览器有的缓存问题

声明：此文章内容仅为个人学习的记录，交流所用