Front-End-Q&A

• 问 ：为什么HTML5只声明 《!DOCKTYPE HTML》就可以，不用再声明DTD。
  答 ： 因为html5不是SGML（标准通用标记语言）（standard general markup language），有自己的规则，但是仍然要告诉浏览器用html解析，如果不声明可能会用兼容模式，而不是标准模式。

• 替换元素与非替换元素
  以前对替换元素没有概念，今天查了下资料：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
  img、input、textarea、select、object 等都是替换元素，

• display:inline-block特点
  简单的说，就是将对象呈现为inline对象，让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体。

• 定位：

positon : static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

position ： absolute 脱离文档流，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

position ： fixed 脱离文档流, 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

position : relative 不脱离文档流，但是移动位置也会可其他元素重叠。 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

float : none | left |right
脱离文档流，但是也会占有一个位置, 主要用于文字环绕等。

• 关于Flex 可以参考 阮老师的博客
  思路就是分为容器，在容器里面的叫做项目。
  容器有六个属性
  flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
  项目有六个属性
  order
flex-grow
flex-shrink
flex-basis
flex
align-self

• position的值relative和absolute定位原点是？
  absolute
  生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
  fixed （老IE不支持）
  生成绝对定位的元素，相对于浏览器窗口进行定位。
  relative
  生成相对定位的元素，相对于其正常位置进行定位。
  static
  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
  inherit
  规定从父元素继承 position 属性的值。

• 关于引擎
  google： 内核是Webkit， JS引擎是V8
  firefox： 内核是Gecko
  IE ： 内核是Trident

• 关于HTML5
  增加了许多语义化标签，还有媒体标签和图像标签
  增加了input的type 和 attribute
  增加了API（位置，SSE，webworker, websocket，localstorage， sessionStorage， application cache 等）。
  兼容：
  当然也可以直接使用成熟的框架、比如html5shim;
  《!-[if lt IE 9]》
  《script> src=”http://html5shim.googlecode.com/svn/trunk/html5.js”《/script>
  《![endif]–>

• 关于HTML5的离线存储技术
  其实此机制主要是应对与移动互联网，比如突然没信号了，进电梯了，过山洞了等。
  首先它是存放在自己定义的**.manifest 文件中，此文件有自己的格式，里面定义了要存储的文件以及版本还有错误返回页面，坑的是当服务器端被缓存的文件有改动是，被缓存的文件不会自动识别。会产生很多坑，不过貌似有自动更新的机制，没有具体的了解。
  更新机制
有三种方式更新manifest缓存：
1、用户清空浏览器缓存；
2、manifest文件被修改，哪怕是注释（所以可以通过修改注释来更新文件）
3、由程序来更新

• 关于iframe
  缺点：
  1.会产生很多页面，不容易管理
  3.浏览器的后退按钮无效
  4.iframe会不利于搜索引擎优化（SEO）。
  5.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差
  6.多框架的页面会增加服务器的http请求，对于大型网站是不可取的。
  7.iframe会阻塞主页面的Onload事件；
  已经被H5抛弃了。

• Lable 标签
  label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
  《label for=”Name”>Number:《/label>
  《input type=“text“name=”Name” id=”Name”/>
  《label>Date:《input type=”text” name=”B”/><《label>

• web worker 与 shared worker 实现了多线程，也可以不同tab相互操作，博客
  shared worker 是多个html公用一个shared js 文件。可以达到不同tab相互操作。

• 实现浏览器内多个标签的通信

  1. 上面提到过了用sharedworker
  2. localStorage可以实现同一浏览器多个标签页之间通信的原理
     localStorage是Storage对象的实例。对Storage对象进行任何修改，都会在文档上触发storage事件。当通过属性或者setItem()方法保存数据，使用delete操作符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件。博客
  3. 使用cookie， 在onload方法中加入setInterval持续获取cookie内容。博客
• 页面可见性（Page Visibility API） 可以有哪些用途？博客
• 如何在页面上实现一个圆形的可点击区域？
  1、map+area或者svg
2、border-radius
3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

• 为什么要初始化CSS样式。
  因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

• css3 visibility属性
  在google浏览器中，visibility:hidden, visibility:collapse 效果一样，都是保留文档流，但是如果用在table中的列，则效果和display：none一样，不包含文档流。

• CSS预处理器
  在渲染HTML页面时，less文件需要编译成css文件。可以有很多种方法。在服务器端，如Node.js，我们有专门的less编译模块。如果是在客户端，需要从LESS官网下载less.js文件，然后在HTML页面中引入。博客
  其实它们之中最大的区别就是CSS是静态的，没有变量和函数这些概念。博客
  是基于CSS扩展的一套属于自己的DSL，主要目标是解决css缺失的样式层复用机制，减少冗余代码提高样式的可维护性。目前最流行的三大处理器，less sass stylus。
  基本语法，定义变量，嵌套，混入(mixin)， 继承，import， 逻辑控制，运算符博客

• JS作用域链 博客

• JS闭包 博客 廖雪峰
• JS闭包的作用？
  封装个私有变量，只有自己的方法中可以访问，从外部直接访问不到。
  2、结果缓存博客
• css 的 em单位，其实就是相对于其父元素的比例。 博客
• 箭头函数不会创建属于自己的this， 所以不同在上层写var self = this,像在FCO项目一样。
• js apply， call， bind 区别。bind不是立即执行。
• AngularJs 赃检查 博客
  当有数据更改时出发，用于检测UI和后台数据是否一致。
  angularJs有脏检查机制，主要是依据$watch对象来监测数据是否更新。可以通过$apply和$digest两个函数来手动触发检测。这个和基于setter的检测机制不同，不能够做到在数据更新时执行操作，而只能通过事件入口执行检查，确认数据更新后再更新视图。 一般情况下$apply和$digest执行效果相同，但是$apply可以带上参数可在变更后执行某个方法，并且$digest方法只触发当前作用域和它的子作用域上的监控，而$apply是触发整个作用域上的监控。所以在保证只变更当前或子级作用域的情况下，调用$digest性能会高出$apply。
  脏检查的性能问题一直被讨论，相较基于setter的检测机制来说，如果在处理循环更新DOM元素的情况，脏检查可以先检查所有的更新，构建好整个DOM结构，然后一次整体更新，相较于setter的分次更新来说性能反而会更高。
• attribute 和 property 区别。 博客
• 事件委任博客
  用到是事件冒泡，在上面的例子中，在ul上加了click事件，触发时间条件是电击ul或者其子元素，这是用到了时间冒泡。
• JavaScript 的 this 原理 博客
• CommonJS Amd
  AMD 出现背景
  与commonJs不同，必须等JS加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
  AMD出现目的
  (1)实现js文件的异步加载，避免网页失去响应；
(2)管理模块之间的依赖性，便于代码的编写和维护。
  CMD规范和 AMD 很相似，尽量保持简单，并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。
  AMDRequireJS推崇依赖前置，CMD SeaJS推崇依赖就近。
  RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码。
  而SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析, 这里耗费了时间，这就是我所说的SeaJS中的”懒执行”。
  UMD Universal Module Definition 规范类似于兼容 CommonJS 和 AMD 的语法糖，是模块定义的跨平台解决方案。
• IIFE: (Immediately Invoked Function Expression)
  IIFE的优点：
  1.创建块级（私有）作用域，避免了向全局作用域中添加变量和函数，因此也避免了多人开发中全局变量和函数的命名冲突
  2.IIFE中定义的任何变量和函数，都会在执行结束时被销毁。这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了。
• js—本地对象、内置对象、宿主对象 博客
• 同源策略 博客
  JSONP只支持GET请求，CORS支持所有类型的HTTP请求
• DOMContentLoaded与load的区别 博客

• angualr service provider factory 区别。 博客 博客
  service，就像是一个服务一样，里面可以定义一些变量或者方法，用的时候也不用new，直接在controller里引入后调用就可以了，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除道。它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适。在service里面可以不用返回东西，因为AngularJS会调用new关键字来创建对象。但是返回一个自定义对象好像也不会出错。通过service方式创建自定义服务，相当于new的一个对象：var s = new myService();，只要把属性和方法添加到this上才可以在controller里调用。
  Factory，它是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory可以返回任何东西，而service可以不返回(可查阅new关键字的作用)。factory方式创建的服务，作用就是返回一个有属性有方法的对象。相当于：var f = myFactory();
  provider,只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前，先进行模块范围的配置，那就应该选择 provider。需要注意的是：在config函数里注入provider时，名字应该是：providerName+Provider.
  使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
  当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。
  总结：
  service是一个可注入的构造器
  factory是一个可注入的方法
  provider是一个可配置的factory

• AngularJs 工作原理 博客