前端整理

HTML

1.为什么HTML5 不需要写那么长得声明?

1
因为 Html5 不是基于SGML的,所以不需要写dtd声明,但是需要写doctype来规范浏览器的行为

2.HTML5新增了哪些标签?

1
header,footer,nav,article,section等

3.cookie,localStorage,sessionStorage的区别?

1
2
3
4
5
6
区别,cookie 是用于和服务端通信,其他两个则不会

cookie 有大小限制相对于其他两个

localStorage 数据永远存储,除非你主动删除
sessionStorage 数据在浏览器关闭之前一直存在

4.行内元素,快元素,空元素有哪些?

1
2
3
行内元素:span,b,em,a,img
块元素: p,div,h1,ul,ol,dt
空元素: img,input

5.Canvas,Svg有什么区别?

1
2
canvas 绘制后是一个dom  放大 会失真,
svg 是由多个dom节点组成,可以由js操作

6.页面导入样式得时候,link 和 import 有什么区别?

1
2
3
link 是 xthml 标签,除了可以加载css 还可以加载其他事务,import 只能用于加载css

link 方式得样式 优先级高于import

7.对浏览器内核得理解?

1
2
3
4
分为 渲染引擎 和 js 引擎

渲染引擎负责取的网页内容,整理讯息,以及计算网页得显示方式。
js引擎负责 执行JavaScript 实现网页动态效果

8.HTML语义化理解?

1
用正确得标签做正确得事,就是在网络加载错误,css么有加载得情况下,也能让网页所表达得意思被用户知道

9.Html离线存储?

1
在浏览器得html头部加上manifest 属性,如果是第一次访问浏览器会根据manifest 得内容进行下载存储离线内容,如果已经访问过则从离线存储中进行加载,然后在比对服务器 如果有新内容在更新离线存储

10.浏览器输入地址,到页面显示得过程?

1
首先 从DNS解析域名 获取ip地址,根据ip地址 找到服务器,服务器根据地址请求 返回页面相关数据,浏览器获取到数据进行页面加载渲染页面
  1. html 状态码
1
2
3
4
5
100:信息状态码
200:成功状态码
300:重定向
400:客户端错误
500:服务器错误

CSS

  1. 盒子模型
1
2
标准:content  +  padding border margin
IE:content padding border + margin
  1. CSS 多行文本垂直居中
1
2
3
4
5
6
7
8
子元素:
display: table-cell;
vertical-align: middle;
子元素必须为行内元素

还可以用定位得方法
display:flex
transfrom 等

3.display:none 和 visibility:hidden 得区别

1
2
前者dom 会从dom 树中消失  后者不会
前者会造成页面回流,后者会触发重绘

4.如何避免margin 重叠

1
2
3
4
5
6
7
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;

5.css设置垂直居中方法

1
2
3
4
5
6
7
8
9
1.定位:
position:absolute;
left:50%;
top:50%:
margin-left:-元素宽度;
margin-top:-元素高度

2、transform:translate(-50%,-50%)
3、display:flex

6.CSS3有哪些新特性

1
2
3
4
5
6
7
text-shadow
border-radius
text-decoration
box-shadow
transform
animation

7.css 绘制三角形

1
2
3
4
5
6
7
利用border 将border得三边设置透明
例如:
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent red

8.box-sizing

1
2
3
content-box 默认盒子模型
border-box 怪异盒子模型,设置 border padding 会计算在总宽度之内 例如 200 * 200 设置 padding: 10; border:1px; 则实际盒子可使用大小未179*179
box-sizing 继承父元素

9.css有哪些可以继承和不可继承得属性

1
2
继承:font系列 color cursor
不继承:width,height,padding,margin,border,background

10.隐藏元素得方法

1
2
3
4
5
6
1. display:none;
2. opacity:0;
3. visibility:hidden;
4. position:absolute;left:-999999;
5. transfrom:scale(0)
6. height:0

11.rgba 和 opacity

1
2
rgba 作用于元素自身,子元素不会继承
opacity 作用于自身和子元素,包括文字
  1. em px rem 区别
1
2
3
em 相对于 其父元素字体大小变化
rem 相对于html字体大小
px 固定大小

13.BFC

1
2
3
4
5
6
决定了元素如何对其内容进行定位,以及与其他元素得关系和相互作用

float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

JavaScript

1.js的基本数据类型

1
boolean,string,number,undefined,null

2.JS有哪些内置对象

1
2
数据封装类对象:object,null,boolean,number,string
其他对象: function,arguments,math,date,regexp,error

3.js 强制转换类型和隐式转换类型

1
2
3
4
5
6
7
8
9
强制转换类型 String(),Number(),Boolean()

隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等。。

例如:
console.log(10-'20')//-10 number
console.log(10-'one') //NaN not a number
console.log(10-'101a') //NaN
console.log(10*'20') //200 number

4.js 原型 和 原型链

1
2
3
4
原型:每个对象都会在其内部初始化一个属性,这个属性就是prototype 就是该对象得原型
原型链:当我们访问一个对象得属性时,如果这个对象内部不存在这个属性,那我们就去prototype 中找这个属性,这个prototype又会有自己得prototype,这样一直找下去 就是我们所说得原型链关系

特点: JavaScript 对象是通过引用来传递得,当修改原型时,与之相关得对象也会继承这一改变。

5.如何判断一个变量的类型

1
2
tyoeof
instancdof

6.如何获取一个对象内包含的属性

1
Object.keys()

7.如何阻止冒泡和默认事件?

1
2
3
4
5
1.event.stopPropagation()方法

2.event.preventDefault()方法

3.return false ;

8.如何进行事件委托

1
利用 on 进行绑定,绑定到不会变化得body 或者 需要操作得 不会变动得那一层父元素上

9.模拟下拉菜单,如何点击其他空白地方 收起菜单

1
2
3
4
5
6
7
8
9
10
可以在body 上绑定事件,进行点击得时候判单 如果不是点击得下拉菜单则将菜单关闭

$('body').on("click",function(e){
var target = $(e.target);
if(target.closest("#phone,#first").length == 0){
$("#phone").hide();
$("#phone").attr("value","divm");
};
e.stopPropagation();
})

10.js如何进行浮点计算

1
将计算得数值 乘以 10 倍在计算

11.数组得相关操作

1
2
3
4
5
6
7
8
9
10
11
1. pop 删除数组最后一个元素
2. push 往数组最后一个插入数据
3. shift 删除数组第一个元素
4. unshift 往数组第一个插入元素
5. concat 连接两个数组
6. join 把所有元素放入一个字符串
7. sort 对数组进行排序
8. reverse 将数组倒序返回
9. slice 从数组返回选定数组
10. splice 删除元素并往数组添加新元素

12.浅拷贝和深拷贝

1
2
3
4
5
6
7
8
9
10
1. 浅拷贝  相当于复制了一个路径地址,共用得还是一个内存地址,改变复制得元素,源元素也会改变
2.深拷贝 彻底复制,两个内存地址 ,两个相互独立

如何深拷贝

splice
jq extend
递归
JSON.stringify(obj),
JSON.parse(_obj);

13.js如何跨域

1
2
3
4
5
6
因为浏览器得同源规则,使得  不同域名,端口,协议,ip 得页面受这个限制

解决方法:
1. JSONP
2. CORS
3. 通过porxy 代码 由服务器来进行转发

14.document.load 和 document.ready 得区别

1
2
前者在页面所有元素都加载之后才会执行,
后者在页面dom 加载后就执行

15.this 的指向问题

1
2
3
指向调用它的那个对象
如果有new关键字,this指向new出来得实例对象
在事件中,this 指向触发这个事件得对象

16.aplly/call

1
2
3
1. 都是调用一个对象的一个方法,用另一个对象替换当前对象
2. apply 最多只能接受两个参数 后一个参数为数组,call 则可以接受多个
3. 实现继承或者转换对象指针

17.异步加载js的方法

1
2
3
4
1. html5 async:脚本可用就执行  defer: 页面加载完成后才执行
2. iframe
3. ajax eval
4. 动态生成script 插入

18.js中有一个函数,执行对象查找时,永远不会去查找原型

1
hasOwnProperty

19.如何获取字符串中指定部分?

1
2
3
4
可以用 
1. substring(start,end)// 若有参数为负数则变未0,两个参数选择小得为起始位置,截取得长度为较大和较小之间得差
2. substr(start,length)
3. slice(start,end) // 截取得长度第二个参数减去第一个得差 第一个参数大于第二个 返回空

20.js 函数防抖 和 事件节流

1
2
函数防抖: 比如说校验手机号码,输入一个校验一次 就比较频繁,可以设置 200毫秒后在校验
事件节流: 比如说有一个操作很频繁得事件,例如滚动监听,我们可以给他一个 阈值,一次 只能执行一次。

JQUERY

1.Jq 中如何将数组转换为字符串,然后在转换回来

1
2
3
4
5
6
7
8
9
10
可以通过  JSON.stringify  来实现

$.fn.stringifyArray = function(array){
return JSON.stringify(array)
}
$.fn.parseArray = function(array){
retrun JSON.parse(array)
}

$("").stringifyArray(array) 调用

2.jquery.extend 和 jquery.fn.extend 得区别

1
2
前者  是用于 为jq添加类方法 需要jq类来调用
后者 可以用来编写 jq 扩展方法,以便于其他地方jq实例可以调用

3.jq实现原理简单描述

1
为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”,jQuery具体的实现,都被包含在了一个立即执行函数构造的闭包里面,然后在暴露出命名空间(可以为API,函数,对象)

4.针对Jq的优化

1
2
3
class 得选择性能相对于 id  开销会更大,因为需要遍历所有元素
频繁操作dom 可以先缓存起来 比如:
var $li = $("#ul li")

5.针对 slideUp 动画,如果目标元素是被外部驱动,当鼠标快速连续触发外部元素,会使得动画执行滞后,怎么处理

1
执行动画之前,先将其stop

6.jq如何处理缓存得

1
2
post 本身就禁用缓存
get 可以在url 加上随机数 或者 时间戳

7.jq 如何加密解密url

1
2
加密: encodeURIComponent
解密: decodeURIComponent

8.如何禁止浏览器后退

1
window.history.forward(1)

VUE

1.多组件 单页面复用

1
可以用 :is 来调用  避免使用 v-if 来判断使用

2.vue 双向绑定的原理

1
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

3.vue-router 有几种导航钩子

1
2
3
1. 全局 ruter.beforeEach(to,from,next) 跳转前进行拦截判断
2. 组件内钩子
3. 单独路由独享组件

4.vuex状态如何更新以及原理

1
2
3
只能通过mutation来进行state的更新,
getter 缓存state的值,用于多路径复用
action提交的是一个mutation

5.vue-router 实现原理

1
2
在地址中加入#已欺骗浏览器,地址的改变由于正在进行页内导航
使用h5 的 window.history 功能,使用 URL 的 hash 来模拟一个完整的 URL

6.vue 如何组件通信

1
2
3
1. 全局使用 vuex
2. 父子组件之间 props emit
3. 非父子组件之间 on emit

7.vue 得getter 和 setter

1
2
getter 用来获取值
setter 用来赋值触发 upadte 更新

8.vue响应式原理

1
2
3
1、vue响应式原理就是对你数据的变化,vue会有一个响应,去完成某件事。
2、vue的响应式原理就是基于vue知道了数据发生了变化,那么vue是如何知道数据发生了变化呢?
3、数据劫持 vue.js 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

9.vue中keep-live 的作用

1
将组件保留在缓存中,可以保留组件状态,避免重新渲染

10.vue 指令 v-el

1
将页面已存在得dom元素作为vue实例得挂载目标

11.vue 服务的渲染的优缺点

1
有利于页面加载渲染和seo

ES6

1.判断是否是一个数组,

1
2
Array.isArray();
instanceof