2023年11月25日发(作者：)

中软国际部分前端⾯试题

1.如何⽤js实现轮播

轮播图的原理：

⼀系列的⼤⼩相等的图⽚平铺，利⽤CSS布局只显⽰⼀张图⽚，其余隐藏。

通过计算偏移量利⽤定时器实现⾃动播放，或通过⼿动点击事件切换图⽚。

第1步.html布局

⽗容器存放所有内容,⼦容器存放图⽚。⼦容器存放按钮圆点

第2步.css修饰

对元素进⾏样式处理 ⽤到定位、浮动 等

第3步.js处理

动态计算两张图⽚之间的距离 根据配置好的轮播时间 计算步长 ⽤到定时器

可能遇到的问题:就是在图⽚切换过程中,再次点击切换时,需要停⽌上次的定时器 重新计算当前位置到下⼀张图⽚的距离

2、怎么存储数据，它们区别是什么？

常⽤的存储⽅式有cookie存储，storage存储(包括sessionStorage,localStorage), session存储

⾸先sessionStorage、localStorage、cookie都是在浏览器端存储的数据，

sessionStorage是在同源的同窗⼝（或tab）中，始终存在的数据。

也就是说只要这个浏览器窗⼝没有关闭，即使刷新页⾯或进⼊同源另⼀页⾯，数据仍然存在。

关闭窗⼝后，sessionStorage即被销毁。

同时“独⽴”打开的不同窗⼝，即使是同⼀页⾯，sessionStorage对象也是不同的。

sessionStorage 、localStorage 和 cookie 之间的区别:

数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

⽽sessionStorage和localStorage不会⾃动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

2.存储⼤⼩限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很⼩的数据，如会话标识。sessionStorage和localS

3.数据有效期不同，sessionStorage：仅在当前浏览器窗⼝关闭前有效，⾃然也就不可能持久保持；localStorage：始终有效，窗⼝或浏览器关闭也⼀直保存，因此⽤

4.作⽤域不同，sessionStorage不在不同的浏览器窗⼝中共享，即使是同⼀个页⾯；localStorage 在所有同源窗⼝中都是共享的；cookie也是在所有同源窗⼝中都是共

3.页⾯渲染怎么实现的

当浏览器获得⼀个html⽂件时，会“⾃上⽽下”加载，并在加载过程中进⾏解析渲染。

解析:

1.浏览器会将HTML解析成⼀个DOM树，DOM 树的构建过程是⼀个深度遍历过程：当前节点的所有⼦节点都构建好后才会去构建当前节点的下⼀个兄弟节点。

2.将CSS解析成 CSS Rule Tree 。

3.根据DOM树和CSSOM来构造 Rendering Tree。

5.再下⼀步就是绘制，即遍历render树，并使⽤UI后端层绘制每个节点。

加载过程中遇到外部css⽂件，浏览器另外发出⼀个请求，来获取css⽂件。

遇到图⽚资源，浏览器也会另外发出⼀个请求，来获取图⽚资源。这是异步请求，并不会影响html⽂档进⾏加载，

但是当⽂档加载过程中遇到js⽂件，html⽂档会挂起渲染（加载解析渲染同步）的线程，

不仅要等待⽂档中js⽂件加载完毕，还要等待解析执⾏完毕，才可以恢复html⽂档的渲染线程。

4.有了Render Tree，浏览器已经能知道⽹页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下⼀步操作称之为Layout，顾名思义就是计算出每个节点在

⼯作原理

Ajax的核⼼是JavaScript对象XmlHttpRequest。简⽽⾔之，XmlHttpRequest使您可以使⽤JavaScript向服务器提出请求并处理响应，⽽不阻塞⽤户。

5.动态创建dom的⽅式，你怎么理解dom的

dom(⽂档对象模型) 是document Object modal的缩写

浏览器显⽰的内容其实都是属于DOM节点树的，在浏览器看来，DOM节点树才是⽂档

动态创建标记不是在创建标记，⽽是在改变DOM节点树。

在DOM看来，⼀个⽂档就是⼀颗节点树。如果你想要从节点数上添加内容，就必须插⼊新的节点。如果你想添加⼀些标记到⽂档，就必须插⼊元素节点

具体步骤有两个顺序的⽅法(取其⼀):

1.先创建标签，然后把标签追加到节点树种，再创建内容，把内容追加到标签后⾯

2.先创建标签，在创建内容，把内容追加到标签⾥⾯，然后把标签再追加到节点树中

⽤到以下的dom⽅法:

Element("标签名")

TextNode("内容")

Child(child)

6.浏览器兼容问题怎么解决

1.为什么会产⽣兼容性问题?

就是浏览器⼚商各⾃的技术标准和实现，对w3c标准执⾏的不⼀样之类的，浏览器先⼀步实现了未成型的标准和⾃⼰定义了⼀些标准之类的。

2.怎么处理兼容性问题？

通过各种判断和hack和优雅降级

常见的css兼容:通过加浏览器前缀解决

js兼容通过判断浏览器内核,针对每⼀个浏览器进⾏实现、