可能在我刚学前端的时候，有很多在当时我感觉很难的知识，现在看来是简单的基础，但有些却真的是知识难点，需要加深学习理解。随着网络的遍及，学习成本的下降，知识遍地都是，但却很少能静下心来学习，当然，人心浮躁是社会的通病，希望能借助写点东西的事情能让我静下心来。
面试官，你好，我叫李贤斌，来着江西赣州，从事前端开发已经有6年多的时间了，有PC端，PE端H5，混合式APP，微信公众号等多端项目经验，其中涉及的技术从原生JS，jQuery，到React，ReactNative，再到Vuejs，uniapp，Echarts.js,Go.js等等，还有一些插件库之类的我就不一一列举。 有团队合作及个人独立开发的能力，对前端工程化有一定了解，之前有带过3-4人的一个前端团队，也有单独负责一个项目的开发到上线，为人性格温和，沟通能力良好。
基础概念
架构模式的区别
软件架构大体分为MVC，MVP和MVVM；首先我们要知道 Modal (模型)，View (视图)，Controller (控制器)，Presenter （主持），ViewModel （视图模型） MVC模式的特点在于实现关注点分离, Controller 负责将 Model 的数据用 View 显示出来，来实现应用程序中的数据模型与业务和展示逻辑解耦；MVP将业务逻辑都部署在Presenter，View层非常薄，不部署业务逻辑，称为’被动视图’，MVVM实质上上MVC的改进版，他把View的状态和行为抽象，通过ViewModal实现了View和Model的自动同步。将视图UI和业务逻辑分开，低耦合；
优雅降级 渐进增强
这是两种截然不同的概念，渐进增强在于优先对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。而优雅降级则强调一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。两者各有优点，也各有缺点
什么是回流重绘？
当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）;
当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式。这个过程叫做重绘;
回流必将引起重绘，重绘不一定会引起回流 回流需要更新渲染树,性能花销非常大,要尽可能避免回流
浏览器的渲染引擎
浏览器的最重要的部分就是 Rendering Engine（渲染引擎），也就是我们说的浏览器内核；市面上主流的浏览器 IE浏览器内核为Trident，Edge浏览器内核为Edge，Firefox 内核为 gecko，Safari 内核为 webkit，Opera紧跟Chrome脚步，两者内核为 blink内核
讲一下目前浏览器的内核？
ie ： Trident内核
Edge： Edge内核 ，2018年转为blink内核
Firefox：gecko内核
Safari ：webkit内核
opera ：presto内核，改为webkit后，现在改为blink内核
Chrome：之前是webkit，现在改为blink内核
HTML
超文本标记语言
超文本标记语言(简称：HTML)是一种用于创建网页的标准标记语言,文件后缀为.html或.htm。是网页内容的载体
前端页面的分层
在WEB网站中，页面被分为三层，行为层（Javascript：用于编辑页面的交互行为），表现层（css：用于编辑页面的样式效果）和结构层（html：用于编辑页面的整体结构）；
DOCTYPE html
doctype用于声明文档类型，告知浏览器以何种规范解析页面，位于文档最前面，处于HTML标签之前，<DOCTYPE html>是html5的文档声明
HTML 元素的概念
HTML元素是指从开始标签到结束标签的所有代码，HTML元素大多分为块级元素（例如：div p h1等）和行内元素（也被称为：内联元素，例如：span a em ），还有一种介于两者之间的行内块级元素（内联块级元素）；
HTML 的存储机制
WebStorage 本地存储（存储在客户端，不参与服务器通信）分为两种。 localStorage：没有时间限制的数据存储，不删除则永久存在，大小一般在5MB左右；sessionStorage：仅在当前会话或窗口有效，当用户关闭浏览器窗口后，数据会被删除，大小限制一般为5Mb
Cookie 是由W3C提出，经社区发展的一种存储机制，目前浏览器都支持这样一种存储机制，用于存储页面的用户信息，大小限制在4000字节作业，存在过期时间，允许的话可以参与服务器通信；和WebStorage一样存在同源策略
HTML5及标签语义化
HTML5为超文本标记语言的第五次重大修改，于2014年由万维网联盟（W3C）完成标准制定；根据内容和结构选择合适的标签，便于开发者阅读同时对搜索引擎友好让机器很好的解析。例如：heeader nav footer等等
HTML5的兼容问题
HTML5的规则所说早已定下，但由于历史遗留原因，某些HTML5的标签兼容性还是比较差，可能在现代浏览器表现很好，但还有些人可能还在用着老旧的浏览器，因为所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理，所以需要将其设定为块级元素 header, section, footer, aside, nav, article,figure { display: block; }但是ie8或更早的版本，可能不适应，所以要兼容ie9之前，则需要添加 html5shiv.js
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>（国内镜像）
<![endif]-->HTML5的应用缓存
HTML5引入了应用程序缓存的概念，这意味着web应用可以缓存，它的优势有：离线浏览（用户可在应用离线时使用它们，速度更快（已缓存资源加载得更快）；减少服务器负载（浏览器将只从服务器下载更新过或更改过的资源）
兼容性：Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存.
Canvas和SVG的存在
canvas 元素用于图形的绘制，canvas只是图像容器，通过脚本（通常是javascript）进行绘制，它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染，WebGl就是一种目前最为流行的3D绘图协议，它就是基于canvas进行3D图像的绘制
SVG 是可伸缩矢量图形，使用XML来描述二维图形和绘图程序的一种图形格式。SVG 与 JPEG 和 GIF 图像比起来，图像可以在图像质量不下降的情况下进行放大，尺寸更小，且可压缩性更强，
DOM和BOM的区别?
DOM 全称是 Document Object Model，也就是文档对象模型，当页面加载时，可以将结构文档在内存中转换成对象的树
BOM 全称是 Browser Object Model，浏览器对象模型，window、document、location、navigator和screen等，通常统称为浏览器对象模型
img中的alt和title的作用？
alt: 为不能显示的图像及窗体元素的替换文本，替换文本的语言有lang属性决定
title：为设置该属性的元素提供建议性的信息，在鼠标悬浮的时候可以查看
一个页面输入URL之后，浏览器做了什么？
URL解析 - DNS解析 - TCP连接 - 发送HTTP请求 - 服务器处理并返回数据 - 渲染页面 - 断开TCP连接
页面渲染html的过程
1.浏览器解析html源码，然后创建一个 DOM树，并行请求 css/image/js。在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
3.DOM 树加 CSSOM 树共同构筑出渲染树（rendering tree）。DOM树和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。
4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。
什么是同源策略？
同源策略是浏览器厂商出于安全考虑设置的一种安全策略，即只有在协议相同，域名相同，端口相同的情况下才能访问服务器资源。
那怎么实现跨域？
跨域的方式有：JSONP CORS WebSocket 服务器反向代理 postMessage iframe
JSONP ：利用<script>标签没有跨域限制，通过src发送请求，服务器接收后，将数据拼接后返回callback函数，前端接收后执行获取数据
CORS：CORS是W3C的一个标准，它允许浏览器向跨域服务器发送XMLHttpRequest请求,这需要后端和浏览器的同步支持。
WebSocket：是HTML5开始提供的一种连接协议。同时允许跨域，通过封装的socket.io库进行webscoket连接请求
服务器反向代理：因为跨域只存在浏览器和服务器之前，所以跨域通过服务器反向代理，或者设置中间件的方式进行跨域
postMesage：HTML5提供的API，是可以跨域的window属性。通过postMesage()传输数据
说一下CORS(跨域资源共享)？
CORS是一个W3C标准，它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器要求低于IE10；CORS通信过程，都是浏览器自动完成，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信
什么是标签语义化？
标签语义化是根据内容和结构选择合适的标签，为了更好的让开发者阅读同时对搜索引擎友好让机器更好的解析。比如头部标签header，内容段落的article 和p 标签，表单输入的aside 和input 标签。
Html5新增标签有header(头部内容) nav(导航链接) footer(底部内容) artive（独立内容，文章） section（页眉页脚等） aside（所处内容之外的内容） figure（独立内容，图片图表）
讲一下块级元素和行内元素？
块级元素独占一行，总在新行开始，高度，行高，内边距和外边距都是可控制，宽度默认和浏览器宽度一致，而行内元素则可以和其他元素在一行，宽度和内容有关；
块级元素有；P div h1-h5 ul li ol dl 等 行内元素有：span a b em i sup sub 等等
题外话：空标签即不包裹内容的标签，例如 br hr img 等
说一下 label 的用法？
label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验
<label for="male">点击单选</label> <input type="radio" name="sex" id="male" />讲一下 DOCTYPE 的作用？
DOCTYPE用于声明文档类型，告知浏览器以何种规范解析页面，位于文档的最前面，<!DOCTYPE html> 则是说明浏览器使用 html5的文档规范解析
CSS
CSS 预处理器(框架)
CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，让你无需考虑浏览器的兼容性问题。提供诸如变量、简单的程序逻辑、函数等方法，让你的 CSS 更加简洁。目前最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less 、Stylus
讲一下各类前端的页面布局
静态布局 也就是传统意义的webPX布局，以像素位来设置页面的布局；
瀑布流 就是通过获取的图片的路径；创建img 绑定onload 获取图片的尺寸，来判断加载在最短的列表；
流式布局 也就是百分比布局；通过百分比来设置不同的容器宽度，达到在不同的设备有良好的展示情况
自适应布局 通过 @media 媒体查询，设置不同的分辨率方案；以达到在不同分辨率设备展示的效果
响应式布局 结合了自适应布局和流式布局的特点，以媒体查询和百分百来设置不同屏幕的展示情况
弹性布局 也称为flex布局。通过设置盒子为flex ；以justify-content align-item 设置轴方向
rem布局 通过根元素的字体大小，子元素通过 rem来设置大小，即是rem布局，em则对应的是父级字体
flex布局 通过display:flex;将容器转为flex类型，通过justify-content和align-content进行控制和展示
圣杯布局 目的是为了让中间的内容先渲染；将页面分为三栏，以float 浮动三栏；第一栏用于渲染中间内容；两侧通过 margin-left 负数；来设置左右的位置；再通过给中间设置padding 来把内容挤在中间，不被两侧遮盖
双飞翼布局 淘宝改进，前面和圣杯一样；中间给了一个div；通过给里面的div设置margin来达到效果
CSS 的引入方式
CSS 样式的引入方式有三种：嵌入样式：内联样式和外链样式；嵌入样式使用<style>标签定义在当前页面的样式；内联样式就是直接写在标签内部的样式；外链样式则通过在网页头部利用<link>标签引用一个单独的css文件
嵌入样式就是style标签定义在当前页面的样式 <style type="text/css"> </style>
内联样式就是直接写在标签内部的样式 <div style="color:red">内联样式</div>
外链样式就是通过在网页头部利用link标签引用一个单独的css文件 <link href="style.css" rel="stylesheet" type="text/css" />
Quirks Standards
**怪异盒子模型:**在IE6以前，由于w3c标准还未能执行完全，导致IE之前的使用的quirk模式，既高和宽度包含padding来进行的计算，也就是俗称的怪异盒子模型（quirks），可以通过 box-sizing:border-box 进行设置
width = padding + border + 内容
**标准盒子模型:**IE6出现之后，由于之前的css样式的问题，以及w3c推出的标准，IE6推出standards模式，用于兼容之后出现的新的w3c标准,可以通过 box-sizing:content-box 进行设置
width = 内容
元素轮廓
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}//解:超边框15px的位置绘制轮廓
//注:轮廓和边框类似，又不同，轮廓不占空间，轮廓可能是非矩形
兼容性：IE不兼容
圣杯布局和双飞翼
圣杯布局和双飞翼都是两侧宽度固定,中间宽度自适应的三栏布局。圣杯布局来源于2006年的A LIST APART上的一篇文章，而双飞翼则来源淘宝UED，由2011年淘宝玉伯提出。
两者的思路：
圣杯：为了优先渲染，按照Middle，Left，Right的顺序排列，Left，Right固定宽度，Middle宽度100%进行自适应，三者通过float：left；进行浮动，Left和Right 通过margin-left：100%；和margin-left：-200px进行位置调整；三者父级容器通过padding：0 200px；对Middle进行挤压，Left和Right则通过position：relative；以及left：-200px和right：-200px进行进行定位
双飞翼：按照Middle，Left，Right的顺序排列，Left，Right固定宽度，Middle宽度100%进行自适应，三者通过float：left；进行浮动，Left和Right 通过margin-left：100%；和margin-left：-200px进行位置调整；在Middle中创建Content，设margin：0 200px，
你知道的可继承的样式有哪些？
可继承的样式有 font-size font-style font-family color lie-height word-spacing letter-spacing text-transform visibility
怎么利用css画三角形？
通过设置 border-top 长度为三角形的高度，颜色为透明，在设置 border-left 长度为三角形的宽度，颜色为三角形颜色，来实现三角形，然后通过 border的左右长度来调整三角形的大小
width:0; height:0; border-top:50px solid transparent; border-right:50px solid red;原始轮廓和元素边框的区别?
轮廓和边框类似，又不同，轮廓不占空间而边框会占用空间，轮廓可能是非矩形。边框必须沿着内容进行围绕，而轮廓可以距离内容有一定的距离进行环绕；
清除浮动的方式和原理？
清除浮动的方式有：1设置伪类after，通过clear：both; 清除，2给父级设置 overflow:hidden 来达到清除浮动的效果。 清除浮动用的是BFC(块格式化上下文)原理，当浮动区域成为一个BFC区域的时候，浮动会被清除。BFC是一个页面上的独立容器，容器里的元素不会影响到容器外的元素
满足BFC的条件是 1：float的值不是none。2：position的值不是static或者relative 3：display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4：overflow的值不是visible