面试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的区别