FED Interview

  • 定位
    position的值：
    absolute, relative, fixed, static, sticky, inherit.
值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位.
relative 生成相对定位的元素，相对于其正常位置进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.
sticky(css3草案) 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下，该元素定位均不对后续元素造成影响。
  • 跨域问题
  1. jsonp

原理：动态插入script标签，通过script标签指定URL，在URL参数中指定回调函数，服务器端收到请求后会执行我们在URL参数中指定的函数，并且会把我们需要的json数据作为参数传入回调函数。

  1. 跨域资源共享 CORS

原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求

1
2
Access-Control-Allow-Origin: *              # 允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com   # 只允许所有域名访问
  1. 设置 document.domain

原理：相同主域名不同子域名下的页面，可以设置document.domain让它们同域

如：URL是http://a.com/foo的页面，它对http://b.a.com/bar的DOM访问要求后者将 document.domain往上设置一级.

限制：document.domain只能从子域设置到主域，往下设置以及往其他域名设置都是不允许的.

  1. 有src的标签

原理：所有具有src或href属性的HTML标签都是可以跨域的，包括<img>, <script>
限制：需要创建一个DOM对象，只能用于GET方法

  1. window.postMessage

原理：HTML5允许窗口之间发送消息
限制：浏览器需要支持HTML5，获取窗口句柄后才能相互通信

JSONP要成功获取数据，需要跨域资源所在服务器的配合，资源所在服务器需要回调一个合适的函数。

跨域的标准方案还是要使用HTML5提供的CORS头字段以及window.postMessage， 可以支持POST, PUT等HTTP方法，从机制上解决跨域问题。 值得注意的是Access-Control-Allow-Origin头字段是资源所在服务器设置的， 访问控制的责任仍然是在提供资源的服务器一方，这和JSONP是一样的.

  • XML和json的区别

  1. 数据体积
    XML的数据体积比json大.

  2. 数据交互方面
    json数据与javascript的交互更加方便，便于解析和处理.

  3. 数据描述方面
    XML对数据的描述性更好.

  4. 传输速度方面
    json的传输速度更快.

  • webpack

webpack是一个模块打包工具，使用webpack可以管理模块依赖。当使用webpack处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序需要的每一个模块，然后依据依赖关系将模块打包成一个或多个bundle。

webpack的几大特色：

  1. 插件
    webpack有丰富的插件，在应用开发中可以根据不同的资源，针对不同的需要安装配置插件，非常灵活。webpack的插件非常丰富，并且用户也可以编写自定义的插件。

  2. 性能

  3. 兼容性
    webpack兼容AMD、CommonJs和ES6的语法风格。

  4. 优化
    webpack支持代码分割、代码压缩、图片编码等多种优化方式，减小应用程序的体积。可实现按需加载，减少页面初始化时间，优化应用体验。

5、开发
webpack支持SourceUrls和SourceMaps，方便调试，可以监控文件大小、打包情况，也可以通过插件搭建服务器实现自动刷新，对开发友好。

loader和plugin的主要区别：

loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。loader是用于加载的，它作用于一个个文件上。

plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。

  • TCP/IP

https://juejin.im/post/58e36d35b123db15eb748856
https://www.jianshu.com/p/f9c8e4f8c65c

  • GET/POST
  • css3新增内容

元素选择器：E[foo^=”bar”]，E[foo$=”bar”]，E[foo*=”bar”]，E:root，E:nth-child(n)，E:nth-last-child(n)，E:nth-of-type(n)，E:nth-last-of-type(n)，E:last-child，E:first-of-type，E:last-of-type，E:only-child，E:only-of-type，E:empty，E~F，E:not(s)，E:target

状态选择器：E:enabled，E:disabled，E:checked

值和单位：em，ex，ch，rem，vh，vw，vmin，vmax

字体：@Font-face

文本属性：text-shadow，text-overflow，word-wrap，

盒模型：box-sizing，box-shadow，border-colors，boder-image，border-radius，outline，

动画：Transitions, Transforms，Animation

颜色和背景：hsl，hsla，rgba，background-size，background-origin，background-clip，background(为一个元素指定多个背景)，渐变效果（Gradient）

浮动和定位：sticky（草案）

其他布局：flex，column（多列）

其他：resize，opacity

  • HTML5 新增属性

结构标签：

<!DOCTYPE html>HTML版本和文档类型声明。

section独立区块内容，表示文档结构，也可以放在有章节、页眉、页脚的其他部分。

article特殊独立区块，表示页面中的核心内容。

aside标签内容之外与标签内容相关的辅助内容。

header某个区块的头部信息/标题。

hgroup标题元素进行分组。

footer标签定义文档或节的页脚。

nav定义导航链接的部分。

figure定义独立的流内容（图像、图表、照片、代码等等）。

表单标签(属性)：

email：必须输入邮件。

url：必须输入url地址。

number：必须输入数值。

range：必须输入一定范围内的数值。

datetype：日期选择器。

search：搜索常规的文本域。

color：颜色。

媒体标签：

video：视频

audio：音频

embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

其他功能标签：

mark：标注（像荧光笔做笔记）

progress：进度条。

time：数据标签，给搜索引擎使用。发布日期更新日期

ruby和rt：对某一个字进行注释。注释内容浏览器不支持时如何显示

wbr：软换行，页面宽度到需要换行时换行。

canvas：使用JS代码做内容进行图像绘制。

command：按钮。

deteils：展开菜单。

dateilst：文本域下拉提示。

keygen:加密。

base: 为页面上的所有链接规定默认地址或默认目标。

已有元素新增属性：

<script>: defer表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）、async脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）。

<link>: rel="icon"

<iframe>: seamless定义框架无边框，sandbox用来规定内嵌框架的安全级别，srcdoc显示级别比sandbox高。

manifest: 定义页面需要用到的离线应用文件，一般放在<html>标签里。

<meta>: charset定义页面的字符集。

<link>: sizes设置图标尺寸。

<a>: media用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的、hreflang用于指定被链接文档的语言。

<ol>: reversed定义序号是否倒叙、start定义序号的起始值。

<style>: scoped为内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发.

全局属性(对任意标签都可以使用的):

data-: 自定义属性名字。

hidden: 隐藏。

spellcheck: 语法纠正。

tabindex: 规定元素的 tab 键控制次序(当tab键用于导航时)。

contenteditable: 定义元素是否可编辑。

desginMode: 在JavaScript里插入的window.document.designMode = ‘on’，整个页面都可以编辑。