前端-一些基础问题

1.实现一个函数，判断输入是不是回文字符串；注：回文字符串：是一个正读和反读都一样的字符串，比如“level”或者“noon”等等就是回文串。

function fake(data){
    if(typeof data !== 'string')return false;
    return data.split('').reverse().join('') === data
}
console.log(fake('ahha'))//true

2.垂直水平居中

    

        
1
    
    

        
1
    
    

        
1
    
    

        
1
    
    

        
1
    

3.实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置

    

        
点我
    

window.onload = function(){
    let box = document.getElementById('box');
    function fake(data){
        return data.className.includes('icon');
    }
    box.onclick = function(e){
        e.stopPropagation();
        let target = e.target;
        if(fake(target)){
            target.style.border = '1px solid red';
        }
    }
    let doc = document;
    doc.onclick = function(e){
        let children = box.children;
        for(let i = 0; i

4.从输入URL到看到页面发生有哪些过程

1.首先浏览器主线程接管，开一个下载线程。

2.然后进行HTTP请求（DNS查询、IP寻址等等），中间有三次握手，等待响应，开始现在响应报文。

3.将下载完的内容转交给Renderer(渲染器)进程管理。

4.renderer(渲染器)进程开始解析css rule tree 和dom tree，这两个过程是并行的，所以一般我会把linke标签放到页面的顶部。

5.解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容、遇到缓存的时候使用缓存，不适用缓存的重新下载资源。

6.css rule tree和dom tree 生成完成之后，开始合成render tree，这个时候浏览器会进行layout,开始计算每一个节点的位置，然后进行绘制。

7.绘制结束之后，关闭TCP连接，过程有四次挥手。

5.三次握手，四次挥手

第一次握手：建立连接时，客户端A发送SYN包（SYN=J）到服务器B，并进入到SYN_SEND状态，等待服务器B确认。

第二次握手：服务器B收到SYN包，必须确定客户A的SYN（ACK=J+1），同时自己也发送一个SYN包（SYN=K），即SYN+ACK包，此时服务器B进入SYN_REV状态。

第三次握手：客户端A收到服务器B的SYN＋ACK包，向服务器B发送确认包ACK(ACK=k+1)，此包发送完毕，客户端A和服务器B进入ESTABLISHED状态，完成三次握手。

第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

6.css和js的位置会影响页面的效率，为什么？

css加载过程中不会影响到DOM树的生成，但会影响Render树的生成，进而影响到layout。所以一般来说，style的link尽量放在head里面，因为解析dom树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析dom树的body节点和加载css样式尽可能的并行，加快render树生成的速度。js脚本一个放在底部，原因在于js线程GUI渲染是互斥关系，如果js放在首部的话，当下载js的时候，会影响渲染线程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行。
总结：link标签放head,js脚本放底部

7.display:none和visibility:hidden的区别

都是元素隐藏，在文档流中，display:none不占位置。visibility:hidden占位置。
性能上，display比visibility差。display控制显示隐藏时，页面会产生回流（当页面中的一部分元素需要改变规模尺寸、布局、
显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）

8.什么是回流和重绘

重绘（repaints）是一个元素外观的改变所触发的浏览器行为，例如改变vidibility\outline\背景色等属性。浏览器会根据元素的新属性进行重新绘制，使元素呈现新外观。重绘不会带来重新布局，并不一定伴随回流。
回流（reflow）：是更明显的一种改变，可以理解为渲染树需要重新计算。

9.div+css和table相比有哪些优势

Table：结果table tr td属性border width align...在同一个页面中，页面代码长，不利于维护不利于百度搜索引擎优化。
div+css：符合新型的web设计标准，页面结构和表现分离。精简代码便于维护，搜索引擎友好，提升页面加载时速度（用户体验）

10.rem的理解

相对长度单位，相对于根元素（即html）font-size计算值的倍数。简单来说，就是一个相对单位，相对根元素子体大小的倍数。
例如：html的font-size:12px;那么使用rem作单位的，1rem等价于12px,2rem等价于24px;
按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，完美自适应。

11.px、em、rem的联系和区别

px:相对长度单位。像素px是相对于显示器分辨率而言的。特点
1.IE无法调整那些使用PX作为单位的字体大小；
2.国外的大部分网站可以调整的原因在于使用了em或rem作为字体单位；
3.Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前未设置，则相对于浏览器的默认字体尺寸
4.em的值并不是固定的
5.em会继承父级元素的字体大小；
rem：相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。

12.浏览器的内核分别是什么

1.Trident内核：IE最先开发或使用的，也称IE内核 ，360浏览器使用的也是IE内核；
2.webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核 ，枫树浏览器、太阳花使用的也是谷歌内核；
3.Gecko内核：Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核
4.presto内核：目前只有Opera浏览器采用该内核

13.css3新增属性

1.边框：圆角：border-radius;阴影box-shadow,边框图片：border-image;
2.背景：背景定位区：background-origin,背景大小支持百分百:background-size;
3.文字效果：文字阴影：text-shadow,长单词拆分word-wrap
4.2D转换：transform:对元素进行移动translate()，缩放scale()，转动rotate()，拉伸skew()；
5.3D转换：transform:对元素进行x轴旋转rotateX()，y轴旋转rotateY()
6.过渡，动画， 多列等等

14.h5新增那些属性

html5新增：canvas绘画，本地离线存储localStorage，sessionStorage，video和audio元素，语义化元素，表单类型（date，time，email等），地理定位等等
移除元素：，

15.cookies , sessionStorage和localStorage区别

cookies：数据大小不超过4k，cookies过期之前一直有效，会自动传递到服务器
sessionStorage：存储大小相对cookies大得多（5M或更大），关闭浏览器窗口后自动删除，仅存本地
localStorage：存储大小相对cookies大得多（5M或更大），除非手动删除，关浏览器后不会删除，仅存本地

16.跨域问题如何解决

1.通过jsonp跨域
2.postMessage跨域
3.跨域资源共享（CORS）普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
4.nginx代理跨域：nginx配置解决iconfont跨域 ，nginx反向代理接口跨域

5. nodejs中间件代理跨域： vue框架的跨域webpack.config.js部分配置
   6.WebSocket协议跨域
   详解：https://segmentfault.com/a/1190000011145364

17.如何优化网页加载速度

1.减少http请求：图片地图，CSS Sprites(精灵图）
2.使用CDN：内容发布网络（CDN）是一组分布在不同地理位置的Web服务器，用于更加有效的向用户发布内容。
3.添加Expires头：告诉客户端可以使用一个组件的当前副本，直到指定时间为止。
4.压缩组件，代理缓存
5.样式放头部，脚本放底部
6.避免CSS表达式
7.使用外部的js和css
8.减少DNS查找
9.精简javascript
10.避免重定向
11.删除重复脚本
12.配置ETag
13.使Ajax缓存详解：http://www.cnblogs.com/MarcoHan/p/5295398.html

18.get和post的区别

GET请求的参数是放在URL里的，POST请求参数是放在请求body里的；
GET请求的URL传参有长度限制，而POST请求没有长度限制；
GET请求的参数只能是ASCII码，所以中文需要URL编码，而POST请求传参没有这个限制；
其实，GET和POST本质上两者没有任何区别。他们都是HTTP协议中的请求方法：底层实现都是基于TCP/IP协议。上述的所谓区别，只是浏览器厂家根据约定，做得限制而已。
HTTP请求，最初设定了八种方法本质上没有任何区别。只是让请求，更加有语义而已。

1.OPTIONS 返回服务器所支持的请求方法
2.GET 向服务器获取指定资源
3.HEAD 与GET一致，只不过响应体不返回，只返回响应头
4.POST 向服务器提交数据，数据放在请求体里
5.PUT 与POST相似，只是具有幂等特性，一般用于更新
6.DELETE 删除服务器指定资源
7.TRACE 回显服务器端收到的请求，测试的时候会用到这个
8.CONNECT 预留，暂无使用详情参考：https://baijiahao.baidu.com/s?id=1620934682611653374&wfr=spider&for=pc

19.为什么要用多个域名来存储资源

1.CDN缓存更方便。
2.突破浏览器并发限制。
3.节省cookie带宽，尤其是上行带宽 一般比下行要慢。
4.节约主域名的连接数，优化页面响应速度
5.防止不必要的安全问题

20.优雅降级和渐进增强？

优雅降级：一开始就构建站点的完整功能，然后 针对浏览器测试和修复 。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

21.谈谈垃圾回收机制方式及内存管理

垃圾回收机制GC：执行环境会负责管理代码执行过程中使用的内存，原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

22.js的基本数据类型

基本数据类型：Undefined、Null、Boolean、Number和String

23.事件代理和普通事件有什么区别

24.编写一个数组去重的例子

function fake(data){
 let arr = [];
 for(let i=0;i

25.浏览器缓存：Localstorage、sessionstorage的区别和存取操作、cookie的说明

1.LocalStorage:用于持久化本地缓存，不主动删除数据，数据是不会过期的
存操作：localstorage.setItem(key,value)
取操作：var name = localsetorage.getItem(key);
删除key操作：localstorage.removeItem(key);
删除全部缓存：localstorage.clear();

2.sesstion storage：用于本地会话（sesstion）中的数据，这些数据只有在同一个会话中的页面才可以访问，并且会话结束后数据也随之销毁，只允许同窗口访问，存取方法同上

3.cookie：cookie在设置它的生命周期里一直有效，即使窗口或浏览器关闭。存放的数据大约为4k左右，有个数限制，缺点不能存储大数据且不易读取
存操作：window.document.cookie = 'key=val'
取操作：document.cookie

//设置cookie
setCookie(key,val,days){
  let date = new Date();//获取时间
  date.setTiem(date.getTiem()+24*60*60*1000*days);
  //字符串拼接cookie
   window.document.cookie = `${key}=${val};path=/;expires = ${date.toGMTString()};`
}

//获取cookie
getCookie(){
  let cookie = document.cookie.split(';');
}

//清除cookie
clearcookie(){
  this.setcookie('','',-1);
}

26.http 常用请求头信息

1.ACCept：浏览器可接受的MIME类型