HTML
1.为什么HTML5 不需要写那么长得声明?
因为 Html5 不是基于SGML的,所以不需要写dtd声明,但是需要写doctype来规范浏览器的行为
2.HTML5新增了哪些标签?
header,footer,nav,article,section等
3.cookie,localStorage,sessionStorage的区别?
区别,cookie 是用于和服务端通信,其他两个则不会
cookie 有大小限制相对于其他两个
localStorage 数据永远存储,除非你主动删除
sessionStorage 数据在浏览器关闭之前一直存在
4.行内元素,快元素,空元素有哪些?
行内元素:span,b,em,a,img
块元素: p,div,h1,ul,ol,dt
空元素: img,input
5.Canvas,Svg有什么区别?
canvas 绘制后是一个dom 放大 会失真,
svg 是由多个dom节点组成,可以由js操作
6.页面导入样式得时候,link 和 import 有什么区别?
link 是 xthml 标签,除了可以加载css 还可以加载其他事务,import 只能用于加载css
link 方式得样式 优先级高于import
7.对浏览器内核得理解?
分为 渲染引擎 和 js 引擎
渲染引擎负责取的网页内容,整理讯息,以及计算网页得显示方式。
js引擎负责 执行JavaScript 实现网页动态效果
8.HTML语义化理解?
用正确得标签做正确得事,就是在网络加载错误,css么有加载得情况下,也能让网页所表达得意思被用户知道
9.Html离线存储?
在浏览器得html头部加上manifest 属性,如果是第一次访问浏览器会根据manifest 得内容进行下载存储离线内容,如果已经访问过则从离线存储中进行加载,然后在比对服务器 如果有新内容在更新离线存储
10.浏览器输入地址,到页面显示得过程?
首先 从DNS解析域名 获取ip地址,根据ip地址 找到服务器,服务器根据地址请求 返回页面相关数据,浏览器获取到数据进行页面加载渲染页面
- html 状态码
100:信息状态码
200:成功状态码
300:重定向
400:客户端错误
500:服务器错误
CSS
- 盒子模型
标准:content + padding border margin
IE:content padding border + margin
- CSS 多行文本垂直居中
子元素:
display: table-cell;
vertical-align: middle;
子元素必须为行内元素
还可以用定位得方法
display:flex
transfrom 等
3.display:none 和 visibility:hidden 得区别
前者dom 会从dom 树中消失 后者不会
前者会造成页面回流,后者会触发重绘
4.如何避免margin 重叠
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
5.css设置垂直居中方法
1.定位:
position:absolute;
left:50%;
top:50%:
margin-left:-元素宽度;
margin-top:-元素高度
2、transform:translate(-50%,-50%)
3、display:flex
6.CSS3有哪些新特性
text-shadow
border-radius
text-decoration
box-shadow
transform
animation
等
7.css 绘制三角形
利用border 将border得三边设置透明
例如:
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent red
8.box-sizing
content-box 默认盒子模型
border-box 怪异盒子模型,设置 border padding 会计算在总宽度之内 例如 200 * 200 设置 padding: 10; border:1px; 则实际盒子可使用大小未179*179
box-sizing 继承父元素
9.css有哪些可以继承和不可继承得属性
继承:font系列 color cursor
不继承:width,height,padding,margin,border,background
10.隐藏元素得方法
1. display:none;
2. opacity:0;
3. visibility:hidden;
4. position:absolute;left:-999999;
5. transfrom:scale(0)
6. height:0
11.rgba 和 opacity
rgba 作用于元素自身,子元素不会继承
opacity 作用于自身和子元素,包括文字
- em px rem 区别
em 相对于 其父元素字体大小变化
rem 相对于html字体大小
px 固定大小
13.BFC
决定了元素如何对其内容进行定位,以及与其他元素得关系和相互作用
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
JavaScript
1.js的基本数据类型
boolean,string,number,undefined,null
2.JS有哪些内置对象
数据封装类对象:object,null,boolean,number,string
其他对象: function,arguments,math,date,regexp,error
3.js 强制转换类型和隐式转换类型
强制转换类型 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 原型 和 原型链
原型:每个对象都会在其内部初始化一个属性,这个属性就是prototype 就是该对象得原型
原型链:当我们访问一个对象得属性时,如果这个对象内部不存在这个属性,那我们就去prototype 中找这个属性,这个prototype又会有自己得prototype,这样一直找下去 就是我们所说得原型链关系
特点: JavaScript 对象是通过引用来传递得,当修改原型时,与之相关得对象也会继承这一改变。
5.如何判断一个变量的类型
tyoeof
instancdof
6.如何获取一个对象内包含的属性
Object.keys()
7.如何阻止冒泡和默认事件?
1.event.stopPropagation()方法
2.event.preventDefault()方法
3.return false ;
8.如何进行事件委托
利用 on 进行绑定,绑定到不会变化得body 或者 需要操作得 不会变动得那一层父元素上
9.模拟下拉菜单,如何点击其他空白地方 收起菜单
可以在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如何进行浮点计算
将计算得数值 乘以 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.深拷贝 彻底复制,两个内存地址 ,两个相互独立
如何深拷贝
splice
jq extend
递归
JSON.stringify(obj),
JSON.parse(_obj);
13.js如何跨域
因为浏览器得同源规则,使得 不同域名,端口,协议,ip 得页面受这个限制
解决方法:
1. JSONP
2. CORS
3. 通过porxy 代码 由服务器来进行转发
14.document.load 和 document.ready 得区别
前者在页面所有元素都加载之后才会执行,
后者在页面dom 加载后就执行
15.this 的指向问题
指向调用它的那个对象
如果有new关键字,this指向new出来得实例对象
在事件中,this 指向触发这个事件得对象
16.aplly/call
1. 都是调用一个对象的一个方法,用另一个对象替换当前对象
2. apply 最多只能接受两个参数 后一个参数为数组,call 则可以接受多个
3. 实现继承或者转换对象指针
17.异步加载js的方法
1. html5 async:脚本可用就执行 defer: 页面加载完成后才执行
2. iframe
3. ajax eval
4. 动态生成script 插入
18.js中有一个函数,执行对象查找时,永远不会去查找原型
hasOwnProperty
19.如何获取字符串中指定部分?
可以用
1. substring(start,end)// 若有参数为负数则变未0,两个参数选择小得为起始位置,截取得长度为较大和较小之间得差
2. substr(start,length)
3. slice(start,end) // 截取得长度第二个参数减去第一个得差 第一个参数大于第二个 返回空
20.js 函数防抖 和 事件节流
函数防抖: 比如说校验手机号码,输入一个校验一次 就比较频繁,可以设置 200毫秒后在校验
事件节流: 比如说有一个操作很频繁得事件,例如滚动监听,我们可以给他一个 阈值,一次 只能执行一次。
JQUERY
1.Jq 中如何将数组转换为字符串,然后在转换回来
可以通过 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 得区别
前者 是用于 为jq添加类方法 需要jq类来调用
后者 可以用来编写 jq 扩展方法,以便于其他地方jq实例可以调用
3.jq实现原理简单描述
为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”,jQuery具体的实现,都被包含在了一个立即执行函数构造的闭包里面,然后在暴露出命名空间(可以为API,函数,对象)
4.针对Jq的优化
class 得选择性能相对于 id 开销会更大,因为需要遍历所有元素
频繁操作dom 可以先缓存起来 比如:
var $li = $("#ul li")
5.针对 slideUp 动画,如果目标元素是被外部驱动,当鼠标快速连续触发外部元素,会使得动画执行滞后,怎么处理
执行动画之前,先将其stop
6.jq如何处理缓存得
post 本身就禁用缓存
get 可以在url 加上随机数 或者 时间戳
7.jq 如何加密解密url
加密: encodeURIComponent
解密: decodeURIComponent
8.如何禁止浏览器后退
window.history.forward(1)
VUE
1.多组件 单页面复用
可以用 :is 来调用 避免使用 v-if 来判断使用
2.vue 双向绑定的原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
3.vue-router 有几种导航钩子
1. 全局 ruter.beforeEach(to,from,next) 跳转前进行拦截判断
2. 组件内钩子
3. 单独路由独享组件
4.vuex状态如何更新以及原理
只能通过mutation来进行state的更新,
getter 缓存state的值,用于多路径复用
action提交的是一个mutation
5.vue-router 实现原理
在地址中加入#已欺骗浏览器,地址的改变由于正在进行页内导航
使用h5 的 window.history 功能,使用 URL 的 hash 来模拟一个完整的 URL
6.vue 如何组件通信
1. 全局使用 vuex
2. 父子组件之间 props emit
3. 非父子组件之间 on emit
7.vue 得getter 和 setter
getter 用来获取值
setter 用来赋值触发 upadte 更新
8.vue响应式原理
9.vue中keep-live 的作用
将组件保留在缓存中,可以保留组件状态,避免重新渲染
10.vue 指令 v-el
将页面已存在得dom元素作为vue实例得挂载目标
11.vue 服务的渲染的优缺点
有利于页面加载渲染和seo
ES6
1.判断是否是一个数组,
Array.isArray();
instanceof