2019第三次求职

只有面试时才知道自己到底真正掌握了哪些知识点，工作是实践，面试是理论的学习过程。
这一次求职让我很受挫，同时也反省了一下，自己平时工作，单纯的做一个只会复制粘贴的码农了，对理论没有太过关注了，导致面试时一问三不知，从现在开始改变。

前端开发所需掌握知识点概要：

• html & css
  对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas
• Javascript
  数据类型、运算、对象、Function、继承、闭包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、ECMAScript6、Nodejs、HTTP
• 其他
  主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、重构、团队协作、可维护、易用性、SEO、UED、前端技术选型、快速学习能力等；

  应该掌握的知识点

  1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。

9、HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。

HTML

• Doctype作用？标准模式和兼容模式的区别？

  1. < !DOCTYPE >声明位于HTML文档中的第一行处于< HTML > 之前。告知浏览器用什么文档标准解析这个文档，DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
  2. 标准模式的排版和js运作模式都是以该浏览器支持的最高标准运行，在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作
• HTML5为什么只需要写<! DOCTYPE HTML>?
  • HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们应该的方式来运行)；而HTML4.0基于SGML，所以需要对DTD进行引用才能告知浏览器文档所使用的文档类型
• 行内元素有哪些？块级元素有哪些？空元素有哪些？
  1. 行内元素： a b span img input select strong
  2. 块级元素： div ul ol li dl dt dd h1…h6 p
  3. 常见的空元素： br hr img input link meta
• 页面导入样式时，使用link和@import有什么区别
  1. link属于xhtml标签，除了加载css外，还能用于定义RSS，定义rel连接属性等作用而@import是css提供的只能用于加载css
  2. 页面被加载时，link同时会被加载，而@import引用的css会等到页面加载完再加载；
  3. import是css2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题
  4. link支持使用js控制dom去改变样式，而@import不支持

• 介绍一下你对浏览器内核的理解？

  • 主要分成两部分： 渲染引擎和js引擎
    渲染引擎： 负责取得网页的内容（html，图像等），整理讯息（加载css等），以及计算网页的显示方式，然后输出至显示器。浏览器的内核的不同对于网页的语法解释也会有所不同，所以渲染的效果也不相同
    js引擎： 解析和执行javascript来实现网页的动态效果
    最开始的渲染引擎和js引擎并没有很明显的区分，后来js引擎越来越独立，内核就倾向于只指渲染引擎

• 常见的浏览器内核有哪些？

  1. Tredent: IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
  2. GECKO： Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  3. Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
  4. Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
     详细文章：浏览器内核的解析和对比

• html5有哪些新特性，移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分html和html5？

  • html5现在已不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    绘画 canvas；
    用于媒介回放的video 和audio元素
    本地离线存储localStorage长期存储数据浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后消失
    语义化更好的内容元素： article footer header nav section
    表单控件 calendar date time emil url search;
    新的技术webworker websocket Geolocation;
  • 移除的元素： basefont big center font s strike tt u frame frameset noframes
  • 支持html5新标签：
    IE8/7/6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持html5新标签，浏览器支持新标签后，还需要添加默认的样式。
    当然也可以直接使用成熟的框架。比如html5shim

    <!-- [if lt IE 9] >
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
    <! [endif]-->

• 简述一下你对html语义化的理解

  用正确的标签做正确的事
  html语义化让页面的内容结构化，结构更清晰，便于浏览器，搜索引擎解析
  即使在没有样式css情况下也已一种文档格式显示，并且容易阅读的；
  搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键词的权重利于seo
  使阅读源代码的人对网站更容易分块，便于阅读维护理解

• iframe有哪些缺点？

  1.iframe会阻塞主页面的onload事件
  2.搜索引擎的检索程序无法解读这种页面，不利于seo
  3.使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

• js如何判断当前网络状态？

      1. navigator.onLine
      只会在机器未连接到局域网或路由器是返回false，其他均为true，即使路由器没网也会返回true
      2. ajax请求
      根据返回值判断是否能够成功get到数据，缺点是无法区分是服务器出现故障还是用户的网络有问题
      3. 获取网络资源
      原理同2，在页面放一张隐藏图片，设置其onerror函数(获取图片资源失败时会调用该函数)，但这种方式的成功与否取决于保存图片的服务器是否稳定。当保存图片的服务器出现故障时，也会错误的认为是用户的网络有问题
      4. window.addEventListener()
      window.addEventListener('online',  function(){
          alert("onLine");
      });
      window.addEventListener('offline', function(){
          alert("offLine");
      });
      当网络状态发生变化时，浏览器通过以上监听函数可捕获到网络的状态。
  该方法在下Chrome(59.0.3071.115)/Firefox(54.0.1)亲测有效

• BFC的规范（block formatting context）的理解？

  (w3c css 2.1规范中的一个概念，它是一个独立容器，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。)
  一个页面是由很多个Box组成的，元素的类型和display属性决定了这个Box的类型。
  不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

• 请解释一下为什么需要清除浮动？清除浮动的方式

  清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示

  1、父级div定义height；
  2、父级div 也一起浮动；
  3、常规的使用一个class；
    	.clearfix::before, .clearfix::after {
    	    content: " ";
    	    display: table;
    	}
    	.clearfix::after {
    	    clear: both;
    	}
    	.clearfix {
    	    *zoom: 1;
    	}
  
  4、SASS编译的时候，浮动元素的父级div定义伪类:after
    	&::after,&::before{
    	    content: " ";
          visibility: hidden;
          display: block;
          height: 0;
          clear: both;
    	}
  
    解析原理：
    1) display:block 使生成的元素以块级元素显示,占满剩余空间;
    2) height:0 避免生成内容破坏原有布局的高度。
    3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
    4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
    5）zoom：1 触发IE hasLayout。
  
    通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

• zoom:1的清除浮动原理?

  清除浮动，触发hasLayout；
  Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
  譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。
  
  来龙去脉大概如下：
  当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
  
  Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。
  
  目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？
  可以通过css3里面的动画属性scale进行缩放。

JAVASCRIPT

• JavaScript原型，原型链 ? 有什么特点？

  每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，
   如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
   于是就这样一直找下去，也就是我们平时所说的原型链的概念。
   关系：instance.constructor.prototype = instance.__proto__
  
   特点：
   JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
  
  
    当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，
    就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
   	function Func(){}
   	Func.prototype.name = "Sean";
   	Func.prototype.getInfo = function() {
   	  return this.name;
   	}
   	var person = new Func();//现在可以参考var person = Object.create(oldObject);
   	console.log(person.getInfo());//它拥有了Func的属性和方法
   	//"Sean"
   	console.log(Func.prototype);
   	// Func { name="Sean", getInfo=function()}

• [“1”, “2”, “3”].map(parseInt) 答案是多少？

  map(cb(ele, ind, arr){})
  parseInt(string, radix)
  radix ===> 表示要解析的数字的基数。该值介于 2 ~ 36 之间。
  如果省略该参数或其值为 ‘0‘，则数字将以 10 为基础来解析。如果它以 ‘”0x”‘ 或 ‘”0X”‘ 开头，将以 16 为基数。
  如果该参数小于 2 或者大于 36，则 ‘parseInt()‘ 将返回 ‘NaN‘。
  二进制没有3，所以答案是 [1, NaN, NaN]