一、布局相关
1、css有哪些垂直水平居中方式？
答：
① 绝对定位居中技术（通过margin:auto实现水平居中，通过声明元素的高度和下面的css实现垂直居中）
.absoluteCenter {margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;}
② 负外边距（区块必须声明宽高）
.is-Negative {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px; /* (width + padding)/2 /
margin-top: -120px; / (height + padding)/2 */
}
③ 变形（transform）
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%)
}
④ 表格单元格（table-cell）实现居中（不推荐使用）
⑤ flexbox实现居中（垂直方向：justify-content，垂直方向：align-items）
2、css选择器有哪些？选择器的优先级？
标签选择器（body，a等）；id选择器（#id）；类选择器（.class）;全局选择器（*）；组合选择器（.head .head_img）；后代选择器（。head ul li）；群组选择器（div,a,span）；继承选择器（div p）；伪类选择器（4种不同的状态：link、visited、active、hover）；子选择器（p>span）；相邻选择器（div+p）；属性选择器（E[arr]）
important>行内style>id>结构性伪类（eg :nth-child() ：nth-of-type()）>属性>类>标签>通用
3、使用css实现一个持续的动画效果
div{
width: 100px;
height: 100px;
position: relative;
animation: firstdiv 2s linear 1s infinite alternate;
}
@keyframes firstdiv{
0%{top:0;left:0;background-color: greenyellow;}
25%{top:0;left:100px;background-color: green;}
50%{top:100px;left:100px;background-color: yellow;}
75%{top:100px;left:0;background-color: gold;}
100%{top:0;left:0;background-color: greenyellow;}
}
4、移动端适配怎么做的？
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,user-scalable=1.0" >
5、rem和em的区别：
一、 rem的特点：
1、rem的大小是根据html根目录下的字体大小进行计算的。
2、当我们改变根目录下的字体大小的时候，下面字体都改变。
3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。
二、em的特点：1、字体大小是根据父元素字体大小设置的。
二、概念
1、浏览器高级特性有了解吗？
service worker:https://www.jianshu.com/p/62338c038c42
2、浏览器CSS Hack手段有哪些？
不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS Hack大致有3种表现形式：
CSS属性前缀法，选择器前缀法，IE条件注释法（即HTML头部引用if IE），具体见：https://blog.csdn.net/freshlover/article/details/12132801
3、为什么浏览器需要同源策略？
两个URL的协议、域名和端口相同，则表示他们同源。
置同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，ajax任意请求的话如果浏览了恶意网站那么就会泄漏这些隐私数据
4、浏览器跨域的几种方式？
1、通过jsonp跨域
2、通过修改document.domain来跨子域
3、使用window.name来进行跨域
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据
5、通过CORS跨域(跨域CORS原理及调用具体示例 )：
JSONP的主要优势在于对浏览器的支持较好；虽然目前主流浏览器支持CORS，但IE10以下不支持CORS；
JSONP只能用于获取资源（即只读，类似于GET请求）；CORS支持所有类型的HTTP请求，功能完善。（这点JSONP被玩虐，但大部分情况下GET已经能满足需求了）
JSONP的错误处理机制并不完善，我们没办法进行错误处理；而CORS可以通过onerror事件监听错误，并且浏览器控制台会看到报错信息，利于排查。
5、浏览器性能怎么优化？
1、把css放在head中加载；
2、把js放在body末尾加载；
3、不要使用css的表达式；
4、就是用外链的方式引用css和js，可以有效的减少HTML的体积，
5、压缩js和css；
6、不重复加载js；
7、让Ajax请求可缓存；
8、用GET方式发起Ajax请求；
9、组件延迟加载，保障页面的关键的静态资源优先加载；
10、减少DOM节点数；
11、避免在页面中使用iframe；
12、减少COOKIE的体积；
13、使用无cookie域名加载静态资源
14、减少js中的DOM访问；
15、基于事件冒泡的委托机制；
16、常见的图片优化手段
17、不要在HTML中缩放图片；
18、不要把图片SRC置空；
19、任何资源尽量在25k以内。
6、JS基本数据类型有哪些？
简单数据类型：Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object
7、HTTP和HTTPS的区别？HTTP2.0的区别？它们的默认端口是什么？
HTTPS和HTTP的区别主要如下：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
HTTP2.0和HTTP的区别主要如下：
1、HTTP2.0的基本单位为二进制帧
2、HTTP2.0中帧具有优先级
3、HTTP2.0的多路复用
4、HTTP2.0压缩消息头
5、HTTP2.0服务端推送
6、HTTP2.0只适用于HTTPS的场景
8、说下BFC是什么？
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
9、CDN有了解吗？怎么让请求在最近的站点下载？
内容分发网络（Content delivery network或Content distribution network）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
10、怎样判断一个数组是数组？
1、从原型入手，Array.prototype.isPrototypeOf(obj);
2、从构造函数入手，obj instanceof Array
3、根据对象的class属性(类属性)，跨原型链调用toString()方法。（Object.prototype.toString.call（））
4、Array.isArray()
三、代码
1、请编写一个通用的事件注册函数
var EventUtil ={
// 得到事件
getEvent:function(event)
{
return event?event:window.event;
},
//添加事件
addEvent:function(element,type,handler){
//DOM2级事件处理程序，false表示在冒泡阶段处理事件程序
if(element.addEventListener){
element.addEventListener(type,handler,true);
}
//IE事件处理程序
else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}
//DOM0级
else{
element["on"+type]=handler;
}
},
//移除事件
removeEvent:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+$.type] = null;
}
},
//阻止事件默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault;
}else{
event.returnValue = false;
}
},
//阻止事件冒泡和捕获
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
//得到事件的目标
getTarget:function(event){
return event.target||event.srcElement;
}
2、数组去重
1、Array.from(new Set([1, 1, 1, 2, 3, 2, 4])); =》[1,2,3,4]
2、遍历数组法:新建一新数组，遍历传入数组，值不在新数组就加入该新数组中;
四、原理
1、堆和栈的概念和区别
堆：队列优先,先进先出；由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
栈：先进后出；动态分配的空间 一般由程序员分配释放。
五、其他
1、tcp和udp协议分别是什么，并且说出他们的区别
TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来，其中的过程非常复杂，我们这里只做简单、形象的介绍，你只要做到能够理解这个过程即可。
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！
区别：
1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的，UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）
4、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
5、TCP首部开销20字节;UDP的首部开销小，只有8个字节
6、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道
2、cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：将登陆信息等重要信息存放为SESSION其他信息如果需要保留，可以放在COOKIE中
网友评论