面试准备 - 迅易阁资讯

面试准备

2024-12-30 02:06

1.首先在浏览器地址栏中输入url

2.浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，直接显示页面内容；如果没有，跳到第三步；

3.域名解析，获取相应的IP地址

4.浏览器向服务器发送tcp连接，与浏览器建立三次握手

5.发送HTTP请求

6.服务器处理请求并返回HTTP报文

7.浏览器解析渲染页面

23.Cookie和Session的认知，Cookie有哪些限制？

1. cookie数据存放在客户的浏览器上，session数据放在服务器上。

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;的元素。

参考回答：

法一：父元素display:flex,align-items:center;

法二：元素绝对定位，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还可以设置宽高

Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。

Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符

Inline-block：能设置宽度高度，margin/padding水平垂直方向都有效，前后无换行符.img既是行内元素又是置换元素（Replaced element）。所谓置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

30.css硬币旋转效果

31.说说盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

怪异盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）

32.相对布局和绝对布局，position:relative和obsolute。

相对定位relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位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.事件委托

简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。

举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。

好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

38.图片懒加载，预加载

39.mouseover和mouseenter的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout

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的区别？

clientHeight：表示的是可视区域的高度，不包含border和滚动条

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("If-Modified-Since","0")。

在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

在URL后面加上一个随机数： "fresh=" + Math.random()。

在URL后面加上时间搓："nowtime=" + new Date().getTime()。

如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

45.垃圾回收机制

GC（garbage collection），GC执行时，中断代码，停止其他操作，遍历所有对象，对于不可访问的对象进行回收，在V8引擎中使用两种优化方法，

分代回收，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 标签发送跨域请求的技巧方案。

JSON只支持get，因为script标签只能使用get请求；

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返回的状态

0 －（未初始化）还没有调用send()方法

1 －（载入）已调用send()方法，正在发送请求

2 －（载入完成）send()方法执行完成，已经接收到全部响应内容

3 －（交互）正在解析响应内容

4 －（完成）响应内容解析完成，可以在客户端调用了


57.事件循环

58.promise

59.arguments

60.箭头函数和function的区别

ES6 增加了箭头函数，基本语法为

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.转换下划线命名到驼峰命名

var s = "style-sheet-base";

var a = s.split("-");

var o = a[0];

for(var i=1;i<a.length;i++){

o = o + a[i].slice(0,1).toUpperCase() + a[i].slice(1);

}

console.log(o)

64.vue生命周期
Vue实例有一个完整的生命周期，也就是从开始创建(new Vue())、初始化数据、编译模板、挂载Dom(mounted)、渲染→更新→渲染(updated)、销毁等一系列过程(onDestory)，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。


65.说一下什么是virtual dom
用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

66.js语言的特性

运行在客户端浏览器上；不用预编译，直接解析执行代码；是弱类型语言，较为灵活；与操作系统无关，跨平台的语言；脚本语言、解释性语言

67.事件循环

js是单线程，如果中途有时间执行时间过程需要等待，则会造成页码阻塞，事件循环可以避免单线程造成的页面阻塞。在js中首先将事件分为同步事件和异步事件，常见的异步事件包括setimeout、setinterval、ajax，这些函数是需要延长执行的。同步任务会马上进去执行栈中执行，异步任务会通过任务队列来协调。

当本次同步任务执行完，会执行异步任务，而异步任务又分为宏任务和微任务，常见的微任务有promise.then/process.nextTick/Object.observe等，宏任务有整体的js代码、setTimeout, setInterval等等。此时会先执行异步任务中的微任务，同事process.nexttick优先于promise.then.当这部分微任务执行完后，就会执行异步任务中的宏任务。由于第一次放入执行栈中执行的任务也属于宏任务，也可以称这个流程是先执行宏任务再执行微任务这样一个循环

68.js获取当前时间的年月日时分秒以及时间的格式化

1.获取当前时间

2.获取时间中的年月日时分秒


69.0.

71.

72.event对象中 target和currentTarget 属性的区别。

通过event.target可以获得触发事件的元素；event.currentTarget返回绑定事件的元素

https://www.cnblogs.com/yzhihao/p/9398917.html