1.首先在浏览器地址栏中输入url
2.浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，直接显示页面内容；如果没有，跳到第三步；
3.域名解析，获取相应的IP地址
4.浏览器向服务器发送tcp连接，与浏览器建立三次握手
5.发送HTTP请求
6.服务器处理请求并返回HTTP报文
7.浏览器解析渲染页面
23.Cookie和Session的认知，Cookie有哪些限制？
2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
24.css flex布局
25.js动画和css动画
26.visibility=hidden, opacity=0，display:none差别
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
1、浏览器不会生成属性为display: none;的元素。
参考回答：
法二：元素绝对定位，top:50%，margin-top：-（高度/2）
法三：高度不确定用transform：translateY（-50%）
法四：父元素table布局，子元素设置vertical-align:center;
28.css内容溢出
text-overflow属性，值为clip是修剪文本；ellipsis为显示省略符号来表被修剪的文本；string为使用给定的字符串来代表被修剪的文本。
overflow-x/overflow-y:
visible:默认值。表示不剪切容器中的任何内容，不添加滚动条，元素将被剪切为包含对象的窗口大小，而且clip属性将失效
auto：在需要时剪切内容并添加滚动条，
hidden：内容溢出容器时，所有内容都将隐藏，而且不显示滚动条
scroll：不管内容有没有溢出容器，overflow-x都会显示横向滚动条，overflow-y都会显示纵向滚动条
no-display：当内容溢出容器时不显示内容，此时类似于添加了display：none、
no-content：当内容溢出容器时不显示内容，类似于添加了visibility：hidden；
29.inline-block、inline和block的区别；为什么img是inline还可以设置宽高
Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符
Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符.img既是行内元素 又是置换元素（Replaced element） 。 所谓置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
30.css硬币旋转效果
31.说说盒子模型
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
32.相对布局和绝对布局，position:relative和obsolute。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
33.css预处理器有什么
less,sass
34.类的创建和继承
35.回调地狱怎么解决
promise、generator、async/await
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数，只会还可以用ten/catch进行
36.前端中的事件流
事件流是浏览器中页面接收到事件的顺序，首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。
接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。
37.事件委托
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
38.图片懒加载，预加载
39.mouseover和mouseenter的区别
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
40.js new操作做了什么事情
41.改变函数内部this指针的指向函数（bind，apply，call的区别）
通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。
42.js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
offsetHeight：表示可视区域的高度，包含了border和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框border的厚度，在未指定的情况下一般为0
scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
43.js拖拽功能的实现
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。需要的朋友可以参考下 如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove：鼠标移动事件 3.onmouseup：鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
44.ajax解决浏览器缓存问题
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
在URL后面加上一个随机数： "fresh=" + Math.random()。
在URL后面加上时间搓："nowtime=" + new Date().getTime()。
如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。
45.垃圾回收机制
分代回收，2、增量GC，目的是通过对象的使用频率，存在时长来区分新生代和老生代对象，多回收新生代区，少回收老生代区，减少每次遍历的时间，从而减少GC的耗时
回收方法：
引用计次，当对象被引用的次数为零时进行回收，但是循环引用时，两个对象都至少被引用了一次，因此导致内存泄漏，
标记清除
46.对象深度克隆
function deepClone(obj){
var newObj= obj instanceof Array ? []:{};
for(var item in obj){
var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];
newObj[item] = temple;
}
return newObj;
}
47.将原生的ajax封装成promise
48.两列等高布局
49.js控制一次加载一张图片
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
document.getElementById("mypic").innnerHTML="<img src='https://www.cnblogs.com/lian-dong/p/"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>
50.进程和线程
线程，是进程的一部分，一个没有线程的进程可以被看作是单线程的。线程有时又被称为轻权进程或轻量级进程，也是 CPU 调度的一个基本单位。
51.token
52.跨域解决办法
1.通过使用Jsonp解决跨域问题.
JSONP：即JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧方案。
JSONP需要后端配合返回指定格式的数据。
2.CORS，服务器配置服务端文件加上header('Access-Control-Allow-Origin: *');
3.服务器反向代理
location.hash
Window.name
postMessage
53.tcp、udp、四次挥手
54.vue双向绑定原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)
55.Fetch和Ajax比有什么优缺点？
56.ajax返回的状态
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
57.事件循环
58.promise
59.arguments
60.箭头函数和function的区别
let func = value => value;
相当于
let func = function (value) {
return value;
};
箭头函数与普通函数的区别在于：
1、箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this，
2、箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象
3、不能通过new关键字调用，同样也没有new.target值和原型
61.js轮播实现
如果有两个轮播，可封装一个轮播组件，供两处调用
62.promise和await/async的关系
63.转换下划线命名到驼峰命名
64.vue生命周期
Vue实例有一个完整的生命周期，也就是从开始创建(new Vue())、初始化数据、编译模板、挂载Dom(mounted)、渲染→更新→渲染(updated)、销毁等一系列过程(onDestory)，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
65.说一下什么是virtual dom
用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
66.js语言的特性
1.获取当前时间
2.获取时间中的年月日时分秒
69.0.
71.
72.event对象中 target和currentTarget 属性的区别。
通过event.target可以获得触发事件的元素；event.currentTarget返回绑定事件的元素
https://www.cnblogs.com/yzhihao/p/9398917.html