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(最近的块级祖先元素)定位。在所有情况下,该元素定位均不对后续元素造成影响。 |
- 跨域问题
- jsonp
原理:动态插入script标签,通过script标签指定URL,在URL参数中指定回调函数,服务器端收到请求后会执行我们在URL参数中指定的函数,并且会把我们需要的json数据作为参数传入回调函数。
- 跨域资源共享 CORS
原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
1 | Access-Control-Allow-Origin: * # 允许所有域名访问,或者 |
- 设置 document.domain
原理:相同主域名不同子域名下的页面,可以设置document.domain让它们同域
如:URL是http://a.com/foo的页面,它对http://b.a.com/bar的DOM访问要求后者将 document.domain往上设置一级.
限制:document.domain
只能从子域设置到主域,往下设置以及往其他域名设置都是不允许的.
- 有src的标签
原理:所有具有src或href属性的HTML标签都是可以跨域的,包括<img>
, <script>
限制:需要创建一个DOM对象,只能用于GET方法
- window.postMessage
原理:HTML5允许窗口之间发送消息
限制:浏览器需要支持HTML5,获取窗口句柄后才能相互通信
JSONP要成功获取数据,需要跨域资源所在服务器的配合,资源所在服务器需要回调一个合适的函数。
跨域的标准方案还是要使用HTML5提供的CORS头字段以及window.postMessage, 可以支持POST, PUT等HTTP方法,从机制上解决跨域问题。 值得注意的是Access-Control-Allow-Origin头字段是资源所在服务器设置的, 访问控制的责任仍然是在提供资源的服务器一方,这和JSONP是一样的.
- XML和json的区别
数据体积
XML的数据体积比json大.数据交互方面
json数据与javascript的交互更加方便,便于解析和处理.数据描述方面
XML对数据的描述性更好.传输速度方面
json的传输速度更快.
- webpack
webpack是一个模块打包工具,使用webpack可以管理模块依赖。当使用webpack处理应用程序时,它会递归的构建一个依赖关系图,其中包含应用程序需要的每一个模块,然后依据依赖关系将模块打包成一个或多个bundle。
webpack的几大特色:
插件
webpack有丰富的插件,在应用开发中可以根据不同的资源,针对不同的需要安装配置插件,非常灵活。webpack的插件非常丰富,并且用户也可以编写自定义的插件。性能
兼容性
webpack兼容AMD、CommonJs和ES6的语法风格。优化
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’,整个页面都可以编辑。