1.HTML5的新元素
<audio>
<video>
<source>
<output>
<footer>
<header>
<meter>
<progress>
<section>
2.优化前端的方案
1.减少页面请求，资源压缩合并
2.非核心代码异步加载
3.多利用浏览器缓存技术
4.使用css sprites技术
5.js文件放在html文档最后
6.懒加载
3.url输入到页面渲染经历了啥
1，在应用层输入url
用户输入https://mp.csdn.net时，其中http表示采用http协议进行传输,mp.csdn.net为网络地址，表示请求的资源在那个位置（主机）。一般网络地址为IP地址，此处为域名，是IP地址的包装。为了让用户方便使用。
2.应用层DNS解析域名，获得对端IP地址
计算机在通信时是通过IP地址辨识，而不是域名。
域名查找顺序：本地缓存->系统缓存->浏览器缓存->ISP缓存->根域名服务器->主域名服务器
如果本地缓存有就直接使用，并不是每一个过程都需要走。没有才继续往下走。直到获得IP地址。
3.应用层客户端发送HTTP请求
HTTP请求包括请求报头和请求主体。其中请求报头中包含了请求方法，请求资源，请求所使用放入协议（http,smtp等），以及返回的资源是否需要缓存，客户端是否需要发送cookie等。
4.传输层TCP传输报文
位于传输层的TCP协议提供可靠的字节流服务，他为了方便传输，将大块的数据分割成以报文段为基本单位的数据包进行管理。并未他们编号。方便接收端收到报文后进行组装，还原报头信息。
为了保证可靠性传输，TCP采用三次握手来保证可靠性传输。
5.网络层IP协议查询MAC地址
IP协议把TCP分割的数据包传送给接收方。而要保证却是能够传送给对方主机还需要MAC地址，也就是物理地址。IP地址和MAC地址是一一对应关系。一个设备有且只有一个MAC地址。IP地址可以更换，MAC不会变。ARP协议就是讲IP协议转换成MAC地址的协议，利用ARP协议，找到MAC地址，当通信的双方不在同一个局域网时，还需要多次中转，才能到达目标，在中转时，通过下一个MAC地址来搜索下一个中转目标。
6.数据到达链路层
找到对方的MAC地址后，就将数据包放到链路层进行传输，封装上链路层特有的报头，然后交付给物理层，物理层通过实际的电路如双绞线进行传输。
走到数据链路层，客户端的请求发送阶段完毕。
7.服务器接受请求
服务端主机的网卡接收到数据后，驱动操作系统拿到数据，自下而上进行解包，数据包到链路层，就解析客户端在链路层封装的报头信息，提取报头信息内容，如目标MAC地址，IP地址等。
到达网络层，提取IP协议报头信息，到达传输层，解析传输层协议报头，
到达应用层，解析HTTP报头信息，获得客户端请求的资源和方法。查找到资源后。将资源返回给客户端，并返回响应报文。
响应报文中包括协议名称/协议版本，状态码，状态码描述等信息。其中常见状态码：200 表示请求资源成功。301：永久重定向，表示资源已经永久性重定向到指定位置。
8.请求成功返回相应资源
请求成功后，服务器会返回相应的HTMML文件，该文件的传输方式又会从应用层出发，自上问下传送，到达对端时，自下而上进行解析。
二：页面渲染
现代浏览器渲染页面的过程是这样的：jiexiHTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。
DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像元素或display属性值为none的元素都不在渲染树中。
在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘
4.深度拷贝
function deepClone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
for(let keys in source){ // 遍历目标
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
}else{ // 如果不是，就直接赋值
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
5.怎么判断输入的一个数转化为number然后判断大小
parseInt()
parseFloat()
number
6.new string(“A”) == “A” //返回false
new string(“A”).equal(“A”) //返回true
7.vue的双向数据绑定原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.defineProperty()这个方法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<input type="text" id="inp">
<script>
var obj = {};
var demo = document.querySelector('#demo')
var inp = document.querySelector('#inp')
/*
Object.defineProperty 函数一共有三个参数，第一个参数是需要定义属性的对象，第二个参数是需要定义的属性，第三个是该属性描述符。
一个属性的描述符有四个属性，分别是 value 属性的值，writable 属性是否可写，enumerable 属性是否可枚举，configurable 属性是否可配置修改。
*/
Object.defineProperty(obj, 'name', {
get: function() {
return val;
},
set: function (newVal) {//当该属性被赋值的时候触发
inp.value = newVal;
demo.innerHTML = newVal;
}
})
inp.addEventListener('input', function(e) {
// 给obj的name属性赋值，进而触发该属性的set方法
obj.name = e.target.value;
});
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
</script>
</body>
</html>
8.函数节流
原理：当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率
举个栗子：还是以scroll滚动事件来说吧，滚动事件是及其消耗浏览器性能的，不停触发。以我在项目中碰到的问题，移动端通过scroll实现分页，不断滚动，我们不希望不断发送请求，只有当达到某个条件，比如，距离手机窗口底部150px才发送一个请求，接下来就是展示新页面的请求，不停滚动，如此反复；这个时候就得用到函数节流。
function throttle(fn,wait){
let last = 0;
let dur = wait || 400;
return function() {
let self = this;
const current_time = + new Date();
if(current_time - last >dur) {
fn.apply(self, arguments);
last =+ new Date();
}
}
}
9.函数防抖
原理：将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次！！！！！！！！！！)。
举个栗子：滚动scroll事件，不停滑动滚轮会连续触发多次滚动事件，从而调用绑定的回调函数，我们希望当我们停止滚动的时，才触发一次回调，这时可以使用函数防抖。
function debounce(fn wait) {
let timer;
let dur = wait || 400; //间隔时间，如果wait不传，则默认400ms
return function() {
clearTimeout(timer);
let self = this;
let args = arguments; //保存此处的arguments,因为setTimeout是全局的，arguments不是防抖函数需要的
timer = setTimeout(function() {
fn.apply(self,args);
},dur);
}
}
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
