目录
3/ JavaScript
什么是js?Js的特点是什么?
Js的两要素是什么?
Js由哪三部分组成?
Dom和bom的区别
怎样控制浏览器前进,后退,页面跳转
怎么样获取浏览器窗口尺寸
怎样改变元素的内容、属性、样式
事件流有几种?dom事件流分为几个阶段?
Dom中的节点分为几种类型?
请写出添加 删除 替换 插入节点所用的方法?
访问节点和创建节点的方法都有什么?
如何创建新元素并添加到页面中?
说明全局变量和局部变量的作用范围和生命周期
什么是全局污染?怎么避免全局污染?
闭包是什么?有什么特性?对页面有什么影响?
什么是内存泄漏,什么会导致内存泄漏?
JavaScript输出数据的方法?
对面向对象编程的理解
数据类型有几类?一共有几种?判断数据类型的方法
javascript的typeof返回哪些数据类型?
null和undefined的区别是什么?
例举3种强制类型转换和2种隐式类型转换?强制类型转换和隐式类型转换的区别是什么?
哪些运算符常用作布尔判断,简述运算符的优先级
++i和i++的执行顺序有什么区别?
请写出js的入口函数?并讲解入口函数的作用
函数声明与函数表达式的区别?
函数调用的方式
js绑定事件的方法有几种
addEventListener()方法中有几个参数,作用分别是什么?
请写出js中的两种定时器,区别是什么?
js常用的几种事件,请分别描述一下
js操作数组的方法
Break和continue的区别是什么?
return的作用是什么?
this是指向的哪个全局变量,改变this指向的方法有几种?\
call和apply的区别
什么是数组,什么是对象,并说出他们的区别
http和https分别是什么?区别是什么?
请讲讲原型链
new关键字的作用?
网络传输的七层协议是哪七层
js延迟加载的方式有哪些?
什么是事件委托?什么是事件代理?他们的关系是什么
怎样获取到页面中的
获取到页面中所有的checkbox怎么做
如何判断一个数是不是整数?
如何阻止事件冒泡和浏览器默认事件?
IE和标准下有哪些兼容性的写法
请谈谈session、cookie、localStorage和SessionStorage的区别和特点
js的三种排序方法
js中浅拷贝和深拷贝的区别
什么是json?在什么时候用?json的三种值类型是什么?
json对象转字符串和字符串转对象的方法
For each、for in 和for of的区别
javascripe如何清空数组?
判断一个字符串中出现次数最多的字符,统计这个次数
http状态码
js性能优化
前端性能优化
堆和栈的区别
栈:栈用于维护函数调用的上下文,离开栈函数调用就会无法实现。
堆:堆用来容纳应用程序动态分配的内存区域。
说说TCP传输的三次握手四次挥手策略
3/ JavaScript
什么是js?Js的特点是什么?
JavaScript一种直译式脚本语言,是一种动态类型,弱类型,基于原型的高级语言
简单性 安全性 动态性 跨平台性
Js的两要素是什么?
选择器 事件
Js由哪三部分组成?
1、ECMAScript(JavaScript语法 )
2、DOM 页面文档对象模型
3、BOM 浏览器对象模型
Dom和bom的区别
BOM是浏览器对象模型
提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作
DOM是文档对象模型
描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。
使JS有访问HTML的能力,能够实现对HTML中内容的操作
怎样控制浏览器前进,后退,页面跳转
页面跳转:Window.History.go(参数) -1 表示上一页 1表示下一页
在原来的窗体中直接跳转: window.location.href="你所要跳转的页面";
在新窗体中打开页面:window.open('你所要跳转的页面');
怎么样获取浏览器窗口尺寸
window.innerWidth 获取浏览器宽度
window.innerHeight 获取浏览器高度
怎样改变元素的内容、属性、样式
改变元素的内容:innerHTML=内容
改变元素的属性:选择器名称.属性=属性值
改变元素的样式:style.样式=样式值
事件流有几种?dom事件流分为几个阶段?
1.分别是事件冒泡和事件捕获
2.事件捕获阶段,处于目标阶段,事件冒泡阶段
Dom中的节点分为几种类型?
1.文档节点2.元素节点3.属性节点4.文本节点5.注释节点
请写出添加 删除 替换 插入节点所用的方法?
添加节点 createElement createAttribute createTextNode
删除节点 removeChild 替换节点 replaceChild 插入节点 appendChild
访问节点和创建节点的方法都有什么?
访问节点:
1.通过使用 getElementById() 和 getElementsByTagName() 等方法
2.通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
创建节点:
1.createElement() 方法创建一个新的元素节点
2.createAttribute() 用于创建一个新的属性节点
3.createTextNode() 方法创建一个新的文本节点
如何创建新元素并添加到页面中?
1.获取页面上已有的元素作为新元素的父元素
2.用createElement方法创建新元素
3.用appendChild方法把新元素追加到父元素中
说明全局变量和局部变量的作用范围和生命周期
全局变量:范围是整个HTML页面,生命周期整个程序
局部变量:范围是这个变量的代码块,生命周期是函数创建时执行,结束时销毁。
什么是全局污染?怎么避免全局污染?
全局污染:当使用了相同的全局变量或定义了相同命名的顶层函数,都会造成命名冲突
解决方法:只创建一个全局变量,并定义该变量为当前应用容器,把其他变量追加在该命名空间下。及利用匿名函数(自执行函数)将脚本包裹起来。
闭包是什么?有什么特性?对页面有什么影响?
闭包就是能够读取其他函数内部变量的函数,闭包的最典型的应用是实现回调函数
特性:封闭性 外界无法访问闭包内部的数据,除非闭包主动向外界提供访问端口
持久性:一般的函数,调用完毕之后,系统自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包结构依然存在
影响:使用闭包会占有内存资源,过多的使用闭包会导致内存溢出
什么是内存泄漏,什么会导致内存泄漏?
内存泄漏是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果
常见的内存泄露包括:
意外的全局变量
被遗忘的定时器或回调函数
脱离DOM的引用
闭包中重复创建的变量
JavaScript输出数据的方法?
使用 window.alert() 弹出警告框 confirm确认框 prompt 提示框
使用 document.write() 方法将内容写到 HTML 文档中。
使用 .innerHTML 写入到 HTML 元素 innerText 不识别标签
使用 console.log() 写入到浏览器的控制台。
对面向对象编程的理解
面向对象就是将我们的程序模块化,对象化,他具有封装性、继承性和多态性
数据类型有几类?一共有几种?判断数据类型的方法
基本数据类型和引用数据类型
undefined未定义 null空 string字符串 number 数字 boolean布尔值
object对象 symbol 使用type of判断数据类型
javascript的typeof返回哪些数据类型?
undefined number string boolean object function
null和undefined的区别是什么?
类型不同:null是对象,值为空;undefined是未定义
转换原始类型方式不同:null值为0,undefined不支持转换
例举3种强制类型转换和2种隐式类型转换?强制类型转换和隐式类型转换的区别是什么?
强制类型转换parseint 2.parseFloat 3.Number
隐式转换
1.==之间发生的隐式转换类型
2.+*/-操作符的隐式转换类型
区别 强制类型转换是主动进行,隐式类型转换被动进行
哪些运算符常用作布尔判断,简述运算符的优先级
逻辑运算符常用作布尔判断
[] () >算数运算符>自增自减运算符>关系运算符>逻辑运算符>三元运算符>赋值运算符
++i和i++的执行顺序有什么区别?
i++是先赋值,然后再自增;++i是先自增,后赋值
请写出js的入口函数?并讲解入口函数的作用
window.οnlοad=function(){} 改变加载顺序,等待页面加载完毕之后执行
函数声明与函数表达式的区别?
1.以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的
2.以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用。
3.以函数声明的方法定义的函数并不是真正的声明 ,他们仅仅可以出现在全局中或者嵌套在其它函数中。
函数调用的方式
1.作为一个函数调用
2.作为方法调用:将函数定义为对象的方法
3.使用构造函数调用函数:使用了new关键字
4.作为函数方法调用函数:call()和apply()
js绑定事件的方法有几种
1.在HTML标签中直接绑定2.在JS代码中绑定3.绑定事件监听函数
addEventListener()方法中有几个参数,作用分别是什么?
1. event 字符串,指定事件名
2. function 指定需要事件触发时执行的函数
3. useCapture 布尔值,指定时间是否在捕获或冒泡阶段执行
请写出js中的两种定时器,区别是什么?
setTimeout 只执行一次 设置一个定时器,在定时器到期后(延迟执行)执行一次函数
set Interval 无限循环 以固定的时间间隔(间歇执行)重复调用一次函数
clear Inter val() 方法可取消由 set Inter val() 设置的 timeout。
clear Timeout() 方法可取消由 set Timeout() 方法设置的 timeout。
js常用的几种事件,请分别描述一下
onclick点击事件。当HTML元素被点击时就会触发该事件
onchange文本内容或下拉菜单中的选项发生改变
onfocus获得焦点事件。
onblur失去焦点事件。
onkeydown键盘按键按下事件。
onmouseover 鼠标悬停,即鼠标停留在图片等的上方
onmouseout 鼠标移出,即离开图片等所在的区域
onload 网页文档加载事件
onunload 关闭页面时
onsubmit 表单提交事件
onreset 重置表单时
js操作数组的方法
生成随机数:math.random 数字四舍五入:math.round
数组转字符串,toString(),toLocaleString(),join()
字符串转数组:split()
split() 方法用于把一个字符串分割成字符串数组,不改变原始字符串
join() 方法用于把数组中的所有元素转换一个字符串,用指定分离符分割数组并转换为字符串
pop删除尾部 push尾部添加 unshift头部添加 shift删除头部
slice()切割 splice()替换删除
Break和continue的区别是什么?
1.Break终止整个循环,不在进行判断
2.continue结束本次循环,接着去判断是否执行下次循
return的作用是什么?
终止函数的继续运行,当遇到if..else时,若出return,就会出现终止运行,不会继续做出判断返回函数值,返回函数中的值,外部调用函数时,则会调用这个值。
this是指向的哪个全局变量,改变this指向的方法有几种?\
1.以函数的形式调用时this永远都是window
2.以方法的形式调用时,this就是调用方法的对象
call() apply() bind()
call和apply的区别
1.apply:最多只能有两个参数——新this对象和一个数组Array
2.call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表
什么是数组,什么是对象,并说出他们的区别
数组就是一组数据的集合 对象就是用来储存变量
数组是有序数据的集合,而对象是无序数据的集合
如果数据的顺序很重要,就用数组,否则就用对象
数组的数据没有名称,只有下标,而对象的数据需要指定名称
声明数组的方法
Var a=[] var b=new Array()
http和https分别是什么?区别是什么?
http协议:是超文本传输协议
https协议:是具有安全性 的ssl加密传输协议
传输信息安全性不同:http明文传输, https加密传输
连接方式不同: http连接简单,无状态。https可进行加密传输,身份认证
端口不同; http端口是80 ,https端口是443
请讲讲原型链
当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性, 这个prototype又会有自己的prototype于是就这样一直找下去,也就是我们平时所说的原型链的概念
new关键字的作用?
1.在构造函数体中创造一个临时空对象,
2.将this指向这个临时空对象,
3.将这个临时空对象return出来
4.拥有一个prototype的空对象,__proto__指向这个空对象,因此我们可以把公共属性放在里面
网络传输的七层协议是哪七层
物理层 数据链路层 网络层 传输层 会话层 表示层 应用层
js延迟加载的方式有哪些?
1.defer 属性
2.async 属性
3.动态创建DOM方式
4.使用jQuery的getScript()方法
5.使用setTimeout延迟方法
6.让JS最后加载
什么是事件委托?什么是事件代理?他们的关系是什么
事件代理和事件委托实际上说的是同一件事,比如说元素a把事件处理委托给自己的父元素b去处理,那么a就是事件委托方,而b就是事件代理方,两者参与的实际上同一件事。
利用事件冒泡的原理,自己所触发的事件,让其父元素代替执行,父子关系
怎样获取到页面中的
id选择器:document.getElementById(‘con’);
标签选择器: document.getElementsByTagName(‘div’)
获取到页面中所有的checkbox怎么做
1.先获取到所有的input标签
2.循环所有的input标签,用if判断input标签的type值是不是checkbox
3.创建一个数组将type值为checkbox的input标签添加到数组中
4.然后把这个数组的值循环出来就获得了所有的checkbox
如何判断一个数是不是整数?
var a = 2.5656; if (a%1==0) { document.write("是整数")}
如何阻止事件冒泡和浏览器默认事件?
1.阻止事件冒泡:e.stop Pro pa gation();2. 阻止浏览器默认事件:e.prevent Default();
IE和标准下有哪些兼容性的写法
1.获取事件对象:var ev = ev || window.event
2.获取页面的可视区的宽度:document.documentElement.clientWidth || document.body.clientWidth
3.获取触发事件的事件源:var target = ev.srcElement||ev.target
请谈谈session、cookie、localStorage和SessionStorage的区别和特点
cookie和session的区别
1.cookie数据存放在客户的浏览器上,session数据放在服务器上 ;
2.cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session ;
3.session会在一定时间内保存在服务器上,当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用cookie
sessionStorage、localStorage和cookie的区别
共同点:都是保存在浏览器端、且同源的
区别
1.cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。
2、存储大小限制也不同,
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;
localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
js的三种排序方法
一、冒泡排序:冒泡排序(升序): 比较相邻的数,依次找出较大的数往后放;
二、选择排序:通过比较首先选出最小的数放在第一个位置上,然后在其余的数中选出次小数放在第二个位置上,依此类推,直到所有的数成为有序序列。
三、快速排序:先从数列中取出一个数作为基准数
分区过程,将比这个数大的数全放到它的右边,小于或等于它的数全放到它的左边
再对左右区间重复第二步,直到各区间只有一个数
js中浅拷贝和深拷贝的区别
浅拷贝:有两种方式,一种是把一个对象里面的所有的属性值和方法都复制给另一个对象,另一种是直接把一个对象赋给另一个对象,使得两个都指向同一个对象。
深拷贝:把一个对象的属性和方法一个个找出来,在另一个对象中开辟对应空间,一个个存储到另一个对象中。
两者就在于,浅拷贝只是简单的复制,对对象里面的对象属性和数组属性只是复制了地址,并没有创建新的相同对象或者数组。而深拷贝是完完全全的复制一份,空间大小占用一样但是位置不同
什么是json?在什么时候用?json的三种值类型是什么?
json是一种数据交换格式
主要用来在服务器和客户端的浏览器进行数据交换。
数组、对象、简单数据类型
json对象转字符串和字符串转对象的方法
json.stringify()对象转字符串
json.parse()字符串转对象
For each、for in 和for of的区别
for of 应用于数组循环返回的是数组的下标和数组的属性和原型上的方法和属性,而for in应用于对象循环返回的是对象的属性名和原型中的方法和属性。
for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。 所以for in更适合遍历对象
ForEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
javascripe如何清空数组?
Splice length赋值为0 赋值为[]
判断一个字符串中出现次数最多的字符,统计这个次数
var a = "aaaaaaaaassssssssddddaaaaasss";
var arr = a.split("");
var obj = {}
for(var i = 0 ; i < arr.length ; i++){
if(obj[arr[i]]){
obj[arr[i]]++
}else{
obj[arr[i]] = 1
}
}
console.log(obj);
var num = 1;
var str = '';
for(j in obj){
if(num < obj[j]){
num = obj[j];
str = j;
}
}
console.log(str + "最多,有" + num);
http状态码
200请求成功
302临时重定向
403服务器理解请求客户端的请求,但是拒绝执行次请求
404请求资源不存在
500内部服务器错误
js性能优化
延迟不必要的 JS 首屏加载
删除未使用的 JavaScript
避免内存泄漏
避免使用全局变量 & 优先使用局部变量
使用 web workers 处理需要大量执行时间的代码
合理使用事件代理
将重复的代码一定抽象成函数
前端性能优化
减少http请求次数
减少重绘回流
减小资源大小
优化网络连接 优化资源加载
webpack优化
堆和栈的区别
栈:栈用于维护函数调用的上下文,离开栈函数调用就会无法实现。
堆:堆用来容纳应用程序动态分配的内存区域。
按管理方式
栈是系统编译器启动管理,不需要程序员手动管理
堆的释放由程序员手动管理,不及时回收容易产生内存泄露
按分配方式
栈有两种分配方式:静态分配和动态分配
静态分配是系统编译器完成的,比如局部变量的分配
动态分配是由alloc函数进行分配的,但是栈的动态分配和堆的动态分配是不同的,它的动态分配也由系统编译器进行释放,不需要程序员手动管理
堆是动态分配和回收内存的,没有静态分配的堆
按分配大小
栈是向低地址扩展的数据结构,是一块连续的内存区域
堆是向高地址扩展的数据结构,是不连续的内存区域
说说TCP传输的三次握手四次挥手策略
所谓三次握手(Three-Way Handshake)即建立TCP连接,就是指建立一个TCP连接时,需要客户端和服务端总共发送3个包以确认连接的建立。在socket编程中,这一过程由客户端执行connect来触发 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。
1.第一次握手: 建立连接时,客户端发送SYN包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认,SYN:同步序列编号(Synchronize Sequence Numbers)。
2.第二次握手: 服务器收到 SYN 包,必须确认客户的 SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;
3.第三次握手: 客户端收到服务器的SYN + ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。
谓四次挥手(Four-Way Wavehand)即终止TCP连接,就是指断开一个TCP连接时,需要客户端和服务端总共发送4个包以确认连接的断开。在socket编程中,这一过程由客户端或服务端任一方执行close来触发,
1.第一次挥手: Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态
2.第二次挥手: Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态
3.第三次挥手: Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态
4.第四次挥手: Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手