面试2

position static 默认位置静态流
relative 相对之前的位置进行定位移动后再原来位置仍占据空间
absolute 相对于父元素的定位如果没有父元素相对于Body 在标准流中不占位置
fixed 固定定位在标准流中不占位置
px em rem 区别
px 像素绝对单位 px相对于显示器屏幕分辩率而言
em是相对长度单位相对于当前对象内文本的字体尺寸会继承父级元素的字体大小不是一个固定的值
rem相对于HTML根元素
区别：px无法调整大小 em与rem可以缩放
什么是BFC？
块级格式化上下文，一个独立的渲染区域
内部的BOX会在垂直方向一个接一个的放置
BOX垂直方向的距离由margin决定属于同一个BFC的两个相邻的BOX的margin会发生重叠
BFC是一个隔离的独立容器容器里面的子元素不会影响到外面的元素
计算BFC高度时，浮动元素也参与计算
box-sizing：U盘mh；规定盒模型的大小的计算方式 border-box从外边框固定盒子大小 content-box从内容固定盒子大小
选择器优先级
!import>行内样式>id选择器>类选择器>标签选择器>通配符>继承
Iframe的作用
优点：便于修改，模块分离
缺点：iframe的创建比一般DOM元素慢
```
 iframe标签会阻塞页面的加载
```
```
对于seo不友好
```
CSS3新特性
颜色新增rgba hsla模式
文字阴影，背景 background-sizing background-origin设置背景图片的远点
盒子模型，边框圆角、阴影，渐变，过度，自定义动画，媒体查询，多栏布局，
border-image，2D转换，3D转换
CSS引入的方式有哪些？link和@import的区别是？
内联，内嵌，外链，导入。
区别：同时加载。link无兼容性 @import在CSS2.1一下浏览器不支持
link支持使用javascript改变样式，后者不可
标签上title为属性提供信息 alt属性不显示时用文字代表
CSS reset 用来重置浏览器的CSS默认属性
CSS sprites 雪碧图用来减轻服务器对图片的请求数量
清除浮动的方式
.clearfix{
```
content:'';
```
```
display:block;
```
```
height:0;
```
```
line-height:0;
```
```
visibility:hidden;
```
```
clear:both;
```
}
.clearfix{
```
zoom :　1
```
}
设计一套方案适应不同的分辨路
rem流式布局
Bootstrap响应式开发 CSS3媒体查询
超小屏幕 0-768 小屏幕 768-992 中屏幕992-1200 特大1200+
移动端和pc端分开的两个页面：针对性强，代码简洁，加载快，开发效率高，ipad体验较差
Bootstrap响应式：兼容各种终端，代码复杂，加载慢，
渐进增强，优雅降级：渐进增强是CSS3兼容思想从低版本开始往上版本考虑。优雅降级是先从高版本考虑再考虑低版本兼容问题
改变元素外边距用margin 改变元素内填充用padding
在新窗口打开链接的方法是：target:_blank;
DOCTYPE 是用来声明文档类型的
display:none 与 visibility:hidden的区别是 display:none高度和宽度属性消失不占位置 visibility:hidden 元素消失仍然在页面占据位置
AJAX请求步骤没写
怎么实现跨域问题
可以用jsonp jsonp的原理是动态创建script标签利用script标签没有跨域限制的“漏洞”,通过src来进行跨域
iframe 缺点 iframe标签比普通DOM标签要慢 2. iframe会造成页面阻塞 3.iframe不利于seo优化
ES6里面新出的fetch 语法糖 method : '' , .then(resopnse)转化成JSON.parse 格式然后进行数据渲染
JS作用域一个函数声明就会产生一个作用域
闭包就相对于一个封闭起来的空间外界无法访问到闭包内部的数据 Js垃圾回收机制当一个函数执行完后他的作用域会被收回闭包里面的不会
通过在内部声明新函数然后return 返回值
原型链一个构造函数会产生一个原型对象通过prototype来访问同时new出来的实例化对象可以通过proto来访问原型对象
一直向上找直到大写的Object.prototypt 再往上找是 null
实现继承的方法有原型链继承还有经典继承
经典继承

function hzf()
function sss () {
    hzf.call(this);
}

原型链继承

function hzf () {}
var o = {}
hzf.prototype = o;

什么是事件捕获/冒泡？
事件捕获是从上级往下级寻找目标冒泡是从下往上进行
开启事件冒泡 element.addEventListener(eventName,handler,false);
关闭事件冒泡 e.stopPropagation e.stopPropagation关闭冒泡
开启事件捕获 element addEventListener( eventName, handler , true );
事件委托机制：就是本来交给你做的事你不做交给了别人来做就叫事件委托。
事件委托的好处是：本来要给每一个li添加事件但是现在直接给父元素直接添加事件这样做的好处是提高性能，
动态添加进来的元素也可以有之前的事件
字符串操作的方法
slice方法返回字符串片段 slice[star,end)
substring返回新字符串，参数不接受负值 substring[star,stop) 如果star与stop相等则返回一个空字符串，
如果star比stop大，那么该方法提取字符串之前先交换这两个参数
substr返回的是新字符串 [star,length) 传入两个参数
第一个是开始的位置第二个参数为从截取的长度（以第一个参数处为标准截取长度）
如果只有一个参数则一直截取到最后
indexOf 返回字符串最后出现的位置如果没有匹配的字符串则返回-1
concat() 方法用于连接两个或多个字符串。
例如 var arr = '1' , arr1 = '3'
arr.concat( arr1 ) 返回的是 '13'
split将一个字符串分割将结果字符串数组返回
==与===的区别 ==只判断内容不判断类型 ===既判断内容又判断类型
Js是面向对象语言么不是：因为跟传统的语言有区别是：它里面也有函数对象等等
面向对象抽象性，封装性，继承性
类的概念对象是类的实例化
js引擎只有一个线程强迫异步事件排队等待执行
计时期是单线程的需要等待上一个执行完，
js中一共有哪几种数据类型基本型 undefined,null,String,Number,Boolean
复杂类型 Object
call apply 的区别功能都是一样的参数不一样第一个参数都是绑定this的那个对象第二个参数apply为数组
call为一个又一个的数字
this.
纯粹的函数调用 this指向window
作为对象的方法调用 this指向对象
构造函数的调用 this指向new出来的新对象
apply,call this指向传入的对象参数
.bind直接this指向传入的对象参数
箭头函数直接this指向对象内部无法改变this方向
递归求5!
function hzf( num ){

return num <=1 ? 1 : num * hzf( num - 1 )

}
js异步加载
通过script标签中的 async='async' H5中新增的属性 IE8一下不支持
通过script标签中的 defer = 'defer';
AJAX也是异步加载
iframe异步加载
例句BOM里至少4个对象 window方法5个
window里对象: docuemnt,window,history,location,screen
方法 Alert() prompt() config() open() close()
for in 用来循环数组或者对象OBJ
数组
join 返回一个字符串将字符串连接起来
reverse 将数组各元素颠倒
shift 删除数组中第一个元素返回删除的值 length - 1
pop 删除数组最后一个元素返回删除的值 length - 1
unshift 在数组前面添加一个或多个数组元素长度改变
push 往数组后边添加一个或多个元素长度改变
concat连接数组
sort 对数组进行排序
splice 插入删除或者替换数组元素
日期时间
var data = new Date();
强制转换转化成字符串 toString String

    转化成Number Number() parseInt parseFloat

```
    转化成布尔值 Boolean()
```
隐式拼接字符串加减乘除 == ====
H5中的新表单元素
tel,email,url,number,search,range,color,time,date,
HTML5中本地存储概念
cookie兼容所有浏览器 sessionStorage localStorage是H5新标签 IE8一下不支持 cookie为doucment.cookie
sessionStorage,localStorage为window
cookie存储存储大小4k
sessionStorage 存储5M 生命周期为关闭浏览器窗口同一窗口数据共享
localStorage约20M 生命周期永久有效除非手动删除多窗口共享
getItem setItem removeItem
只能存储字符串用JSON.stringify
post 与 get区别
get效率较高比较快，但是数据会暴露在浏览器url上不安全
post效率没有get 但是比较安全
文件上传只能用post
自定义属性 data H5新属性通过dataset属性获取
事件执行三个阶段事件捕获事件处于目标阶段事件冒泡
性能优化
减少HTTP请求次数通过简化页面设计
CSS JS 文件压缩尽量使用精灵图和字体图标
图片加载可以通过懒加载方式减少请求次数
代码性能 CSS 减少查询层级删除重复的CSS
HTML 减少DOM节点加速页面渲染，减少页面重绘
JS 避免使用全局变量避免频繁操作DOM节点减少对象查找
避免XSS攻击
模块化的理解：模块化提高性能，让开发者便于维护，逻辑相同的部分复用，
针对HTML CSS JS组织不同的单元进行组织代码
AMD requierjs 提前执行不过require从2.0开始也是延迟执行
CMD seajs 延迟执行
平时用什么第三方插件 fullpage.js jq,zepto,swiper,jqueryUI ,animate.css
预加载的理解
在网页全加载完之前在页面优先显示一些主要内容可以让js预先从服务器加载图片等资源设置src属性缓存到本地提高访问速度
图片压缩 gulp Sass
响应式布局的时候轮播图用两张不同的图片适配大屏幕和超小屏幕可以减少超小屏幕流量消耗加快响应速度
同时保持图片在大屏幕分辨率下失真
浏览器的内核 Trident IE、360、腾讯
```
        Gecko 火狐
```
```
        webkit 之前的谷歌
```
```
        presto 代表 欧鹏
```

        现在谷歌和欧鹏同用一个浏览器内核 Blink

angular的双向绑定原理：触发$digest流程，从rootscope开始遍历检查所有watcher 进行数据更新
angular里面并不存在定时的脏检查只有ng在指定事件触发时才进行$digest流程
例如ng-click , $http,$location,$timeout,$interval 然后才执行$digest
angular与 Vue 的区别：angular用的是脏检查 Vue用的是双重绑定 getter,setter;
img为行业替换元素所以能设置宽高
input框谁知disabled之后如何获得value值：可以将 disabled='disabled'改换成 readonly='readonly'
Less特点：变量，混合，嵌套规则，函数，运算，作用域
less原理：为CSS预解析，为CSS样式生成工具
gulp作用：Sass,less编译，CSS JS 图片压缩代码压缩，自动刷新，雪碧图制作，ESLint代码规范检查
200请求成功，302请求的资源临时从不同URL响应请求，400错误请求
500服务器端错误，502网关或者代理无效，网络错误
了解Vue2.0与Vue1.0的区别

推荐阅读更多精彩内容