2018前端个人面试总结
Posted tu-0718
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2018前端个人面试总结相关的知识，希望对你有一定的参考价值。
前言：
最近一直在面试，我把面试的5家公司面试题，选择了一些来总结说明，如有问题，欢迎各位小伙伴给与指正
有些题的答案是百度，有些则是我自己的理解，有些题是开放题，没有标准答案，根据自己实际情况回答即可
下面这些题都很基础，更多更全的面试题我会在最后把链接发出来，那些链接是我准备面试收集的不错的面试题合集
HTML
问题1：你怎么理解web语义化？
要合理使用语义化的标签，比如，段落用P标签，标题用H1-H6；这样不仅利于SEO，也利于后期维护
问题2：HTML5新增语义化 / 结构元素有哪些？
header, main, nav, side, article, section, footer
问题3：<img>标签的title和alt属性有什么区别？
前者是在图片正常加载，鼠标指上去显示的文本值；后者是在图片加载失败以后显示的提示文字信息
CSS
问题1：display:none和visibility:hidden;的区别？
前者让元素从DOM树中消失，不占据任何空间；后者不会让元素从DOM树中消失，仍占据空间，只是内容不可见。
问题2：css定位有几种方式？分别是什么？有什么区别？
4种；static,relative,absolute,fixed；
static：是默认值（静态定位）;
relative：相对定位，相对于自身偏移，不会脱离文档流
absolute：绝对定位，相对于父元素偏移，脱离文档流
fixed：固定定位，相对于浏览器可视区域定位，脱离文档流
问题3：什么是css的盒子模型？
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）
可以把每一个容器，比如div，都看做是一个盒子模型
比如你给一个div设置宽高为500px，但实际你设置的只是content
之后你又设置了padding:10px;border:1px solid red;
这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）
相当于一个元素的实际宽高是由： padding + border + content 组成
JS
问题1：location.replace()和location.assign()有什么区别？
前者是直接替换原来的URL地址，没有返回；后者是在原来的URL地址后面插入新的URL地址，有返回
问题2：创建javascript对象的三种方法？
1??：创建一个空对象
var obj = {};
2??：对象字面量
var obj = {
name: "Tom",
age: 21
}
3??：使用new关键字（不推荐，尽量不要用这种方式创建对象）
var obj = new Object();
问题3：事件绑定的三种方法？
1??：直接绑定在html元素上，不推荐这种，耦合太高
<div onclick="doSomeThing()"></div>
2??: 通过DOM获取到元素，然后绑定事件（绑定多个事件时不适用）
var ele = document.getElementById("element");
ele.click = function(){}
3??: 绑定多个事件时推荐这种方式
addEventListener(‘click‘，‘element‘，function(){})
问题4： 说一说你对闭包的理解（什么是闭包，用处）
我的理解是闭包可以看作是一种方法，这个方法可以帮助我们从外部获取到函数内部的变量
闭包的用处主要有2个
一是可以从外部获取到函数内部的变量；
二是让变量一直存在，不被js的回收机制回收，但滥用闭包会造成内存泄漏
问题5：typeof null 和 typeof undefiind 的结果是什么？它们的区别？
结果都是object
前者表示一个空值，是一个特殊的对象，但null成为对象是历史遗留造成的（感兴趣的小伙伴可自行百度）
后者的出现也是为了和null做区分，表示未定义，比如一个变量只声明没有赋值 var x;
问题6：es6的 let 和 const 的区别？
let用于声明变量，相当于es5里的 var，并且有块级作用域
const用于声明常量
问题7：说一说你对promise对象的认识（es6）
Promise是 CommonJS 提出来的这一种规范，有多个版本，在 ES6 当中已经纳入规范，原生支持 Promise 对象；
非 ES6 环境可以用类似 Bluebird、Q 这类库来支持。
详见：http://es6.ruanyifeng.com/?search=promise&x=4&y=2#docs/promise （阮一峰）
问题8：在浏览器输入地址按回车以后，发生了什么？（简述）
1：DNS服务器对该域名进行解析（这个域名解析出来的IP地址就是要请求资源的服务器地址）
2：尝试向该服务器建立连接，经过三次握手成功建立连接
3：向服务器发送 HTTP 请求
3：服务器收到、处理并返回 HTTP 请求
4：浏览器得到返回内容（这个时候返回的内容都是字符串，需要浏览器解析，也就是浏览器渲染的过程）
问题9：简述浏览器渲染的过程？（这个说起来文字较多，所以就说几个要点）
1：根据 HTML 结构生成 DOM 树
2：根据 CSS 生成 CSSOM
3：将 DOM 和 CSSOM 整合形成 RenderTree（渲染树）
4：根据 RenderTree 开始渲染和展示
5：遇到<script>时，会执行并阻塞渲染
注：这也是为什么link引入的CSS文件要放在<head>头部，这样便于浏览器快速解析完成css样式，生CSSOM；
而引入的js文件要放在底部就是为了避免阻塞页面加载，导致页面空白
问题10：new操作符到底做了什么？
1：创建一个空对象，用来返回实例对象
2：把这个空对象的原型指向构造函数的prototype属性
3：让构造函数的this指向实例对象
4：返回创建的实例对象
性能优化
什么是SEO？SEO要怎么做？
https://www.cnblogs.com/tu-0718/p/9545372.html 这是我之前写的一篇关于seo基础的博客
如果让你从前端的角度做性能优化，你会怎么做
https://www.cnblogs.com/tu-0718/p/6170463.html 这是我之前写的一篇关于前端性能优化的博客
HTTP
问题1：说一说状态码301和302的区别？
301：永久重定向，访问的地址永久被迁移到其它地址
302：临时重定向，访问的地址临时被迁移到其它地址
详见：https://blog.csdn.net/u013474436/article/details/48138707
问题2：cookie 和 localStorage 有何区别？
cookie
1：存储量太小，只有 4KB
2：所有 HTTP 请求都带着，会影响获取资源的效率
3：API 简单，需要封装才能用
localStorage
1：存储量增大到 5MB
2：不会带到 HTTP 请求中
3：API 适用于数据存储 localStorage.setItem(key, value)localStorage.getItem(key)
问题3：sessionStorage和 localStorage 有何区别？
前者为临时存储，当网页或浏览器关闭时，缓存会自动清除
后者为永久存储，除非手动自行清除缓存，否则，缓存永久有效
问题4：什么是同源策略？
同源策略就是指协议，端口，域名全部都要相同。这是浏览器为安全性考虑实施的安全策略
详见：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
开放性问题（没有答案）
1： 你觉得JS有哪些优点？你怎么理解JS的面向对象编程？
2：能否一个人独立开发？
3：如果和另一个人一起开发，怎么让工作效率更高？
4：如果和另一个人一起开发，他技术比你好，你会怎么办？
5：如果和另一个人一起开发，你技术比他好，你会怎么办？
6：有没有了解过小程序，说说你对小程序的认识？
7：你觉得vue和原生js相比有什么好处？
8：说一说你遇到过的兼容性问题（PC和移动端各说一个）
9：使用过flex布局吗，有什么优点？
10：你对加班是怎么看的？
附：个人收集的不错的面试题链接分享
1：https://blog.csdn.net/xm1037782843/article/details/80708533 2018面试题
2：https://blog.csdn.net/xllily_11/article/details/70899191 2017年前端面试题最新汇总
3：https://blog.csdn.net/kebi007/article/details/54882425 2017年前端面试题整理汇总100题
4：https://segmentfault.com/a/1190000011091907 我遇到的前端面试题2017
5：https://segmentfault.com/a/1190000015863923 JavaScript面试
6：https://segmentfault.com/a/1190000011038090 你不能错过的前端面试题合集
7：https://segmentfault.com/a/1190000015861382 VUE合集面试题
8：https://www.jianshu.com/p/e54a9a34a773 VUE合集面试题
9： https://www.qdfuns.com/article/47855/dad8d910a0a6ea455a8319a827aaad7b.html （没有答案）
10： https://www.cnblogs.com/nuannuan7362/p/6070401.html 别的程序员是怎样读你的简历的（仅供参考）
以上是关于2018前端个人面试总结的主要内容，如果未能解决你的问题，请参考以下文章