前端-一些基础问题

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反向代理接口跨域

  1. 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类型

你可能感兴趣的:(前端-一些基础问题)