前端常见面试题（二）————前端

小小的提一下，面试时，面试官很喜欢看你的项目实践，就看你做过什么项目，如果一个都不写，可能会跪，然后围着你的项目去问细节。（自己做些项目很重要）

正文部分：

1.var,let,const的区别：

(1).var可以变量提升：啥是变量提升？

var a=10   //全局变量
function fn() {
  console.log(a);//输出undefined
  var a=20;//var会把a这个声明提到作用域的顶端，var a；
  console.log(a);//20
}
fn()
console.log(a);//10

//上面的代码与下面的等同！

var a=10   //全局变量
function fn() {
  var a;  //只是声明放在顶端，值还在原来的位置！！！！而且以声明就把a局部重置了！！！
  console.log(a);//输出undefined，a局部重置了，重置了还没有值！！！
  a=20;//var会把a这个声明提到作用域的顶端，var a；
  console.log(a);//20
}
fn()
console.log(a);//10

变量提升：只提声明，不提数值的！

注：class声明类时，不存在变量提升。

(2).let和const声明只在他声明的代码块里面有效果。

(3).const声明后不能修改，声明必赋值！

注：const声明一对象，可以使用Object.freeze()来锁死数值。

2.js的基本数据类型：

boolean，null，number，underfined，string，Object，symbol（es6新增）

那么symbol是啥呢？

表示独一无二的值
声明时可以加参数，用与描述
作为key时不能被遍历

3.移动端如何实现自适应？

bootstrap 等ui框架
rem
vw和vh

4.你是怎么学前端的，你是怎么学某某技术（vue）的？

一般这题应该是看看你是不是培训班出来的。其实我也不知道，他问这个的具体意义。

5.如何解决跨域问题：

跨域问题是每一个前后端分离都会遇到的。

无法跨域一般都会报错：。。。。cors。。。。

说明cors这就是问题所在。主要是通过设置，access-control-allow-origin来实现的。

我用的是node，通过安装cors依赖。

//cors跨域问题
const cors = require('cors');
app.use(cors({
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));

//跨域问题解决方面
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
　next();　
});

两种都行，你不确定就一起用了吧。

6.xml与json的区别：

个人喜欢json，数据简洁明了，而且还好调用，小程序，web应用，网站用这数据很方便。

体积：json相对于xml来说，体积更小，传递速度更快。
交互：json与js的交互更加方便，更加容易解析处理，更好的数据交互。
级别：xml是重量级的，json是轻量级的。
描述：json对数据描述性比xml的差。
解析：json可用jackson，gson等方法解析，xml可用dom，sax，demo4j等方式解析。

7.Vue 有哪些指令？

v-html，v-show，v-if（v-else-if，v-else），v-for，v-cloak，v-text，v-bind，v-model，v-pre

8.前端如何优化网站性能？

减少 HTTP 请求数量
- CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。
- 合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者多个 JS 合并成一个文件。
- 采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
控制资源文件加载优先级
- 浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
- 一般情况下都是CSS在头部，JS在底部
减少DOM操作和图标使用iconfont代替。多利用浏览器缓存。

9.对以后自己的前端职业路线，怎么规划？

这东西都是自由发挥的，可能说好点能加印象分。

10.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html ，表示层 CSS ，行为层 js。

11.行内元素有哪些?块级元素有哪些?CSS 的盒模型?

块级元素： div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css 盒模型:内容， border ,margin， padding

12简介盒子模型：

CSS 的盒子模型有两种： IE 盒子模型、标准的 W3C 盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

13.Sass、 LESS 是什么？大家为什么要使用他们？

他们是 CSS 预处理器。他们是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行(借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。 LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

14.CSS 中 link 和@import 的区别是：

Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候， link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（ @import 是将引用的样式导入到当前的页面中）

陈嗯嗯