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 之间的区别:

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

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

2.存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

3.数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

4.作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的.

3.页面渲染怎么实现的 具体参考文档

当浏览器获得一个html文件时,会“自上而下”加载,并在加载过程中进行解析渲染。

解析:

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

2.将CSS解析成 CSS Rule Tree 。

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

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

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

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

遇到图片资源,浏览器也会另外发出一个请求,来获取图片资源。这是异步请求,并不会影响html文档进行加载,

但是当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,

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

4.ajax工作原理 具体参考文档

Ajax的核心是JavaScript对象XmlHttpRequest。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

5.动态创建dom的方式,你怎么理解dom的

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

浏览器显示的内容其实都是属于DOM节点树的,在浏览器看来,DOM节点树才是文档

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

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

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

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

2.先创建标签,在创建内容,把内容追加到标签里面,然后把标签再追加到节点树中

用到以下的dom方法:

document.createElement("标签名")

document.createTextNode("内容")

parent.appendChild(child)

6.浏览器兼容问题怎么解决 具体参考文档

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

就是浏览器厂商各自的技术标准和实现,对w3c标准执行的不一样之类的,浏览器先一步实现了未成型的标准和自己定义了一些标准之类的。

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

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

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

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

中软国际php,中软国际部分前端面试题相关推荐

  1. 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    Vue3自考题 1,如何使用vue3的组合式api 答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 2,computed 与各个watch之 ...

  2. 「前端面试题系列7」Javascript 中的事件机制(从原生到框架)

    前言 这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法 伪类与伪元素的区别及实战 如何实现一个圣杯布局? ...

  3. JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二(二)...

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

  4. 前端面试题:JS中的原型和原型链

    JS的原型和原型链算是前端面试题的热门题目了,也是参加了几场面试,感觉好多次都被问到对原型和原型链的理解,所以今天也是索性把他给整理出来,一方面方便自己以后复习查看,另一方面也是给大家分享一下我对原型 ...

  5. 2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】)

    对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...

  6. 前端面试题 回顾与复习(更新中)

    还没有完全整理好 希望大家见谅 后面逐步优化 原生DOM操作 如需替换 HTML DOM 中的元素,请使用replaceChild(newnode,oldnode)方法 从父元素中删除子元素 pare ...

  7. 前端面试题(附答案)完善中……

    前端面试笔记 前言 一.HTML篇 1.语义话的目的是什么?⭐ 2.HTML5新特征⭐⭐⭐ 3.cookie与sessionStorage和localStorage的区别⭐⭐⭐ 二.CSS篇 1.cs ...

  8. 前端面试题 Vue 中的 生命函数(钩子函数)

    目录 一,生命周期(钩子函数) 的简介 二,四类钩子函数的 触发条件 及 使用方法 钩子函数声明的位置: 1. Lifecycle-初始化 beforeCreate 和 created 2.Lifec ...

  9. react以及常见前端面试题(看这一篇就够了)持续更新中...

    目录 1.说说对React的理解?有哪些特性? 2.说说Real diff算法是怎么运作的? 3. 说说React生命周期有哪些不同的阶段?每个阶段对应的方法是? 4.说说你对React中虚拟dom的 ...

  10. 前端面试题----百题大战(超详细哦,包含代码和示例哦,记得一键三连哦,持续更新中ing...)

    你在前端开发中使用过哪些框架和库?简要介绍一下它们和它们的优点和缺点. Vue.js:Vue.js 是一个渐进式 JavaScript 框架,它通过组合各种特性和插件,支持更加灵活的功能开发和定制化, ...

最新文章

  1. 将Eclipse代码导入到Android Studio的两种方式
  2. SCI-HUB客户端(文献神器V6.0)——下载文献如此简单
  3. R语言dplyr包arrage函数排序dataframe实战:单列排序、多列排序、自定义排序
  4. Java面试题集锦,Java常见面试问题汇总,有需要的小伙伴看过来
  5. 好架构是进化来的,不是设计来的
  6. MyBatis查询结果resultType返回值类型详细介绍
  7. CodeForces - 1360H Binary Median(二分)
  8. python编程竞赛规则_用python实行羽毛球比赛规则。
  9. 高并发架构系列:Redis为什么是单线程、及高并发快的3大原因详解
  10. 买卖股票类问题动态规划解法(Leetcode题解-Python语言)
  11. 画时序图 visual_时序图的初步了解
  12. easyui 布局自适应
  13. 大型 网站成长过程的分析笔记===通过广告来来学习,重要的是思路
  14. 在VS2010中使用Git【图文】转
  15. c++按行读取txt文件中的内容,并按特定字符分割
  16. 洗头 Wet Hair
  17. matlab app designer:夫琅禾费圆孔衍射仿真
  18. mysql instead of_mysql unique option prefix myisam_recover instead of myisam-recover-options的解决方法...
  19. 高质量外链的十大特性
  20. Intellij IDEA 初学入门图文教程(六) —— IDEA 在 Performing VCS Refresh 卡死

热门文章

  1. java通讯录备份_基于Java语言的C/S模式通讯录备份和查询软件
  2. 如何做一个优秀完整的自我介绍?
  3. 辐射亮度与表观反射率的转换
  4. Mac如何连接HP激光打印机(HP LaserJet 1020)
  5. pythongo混合_Go+Python双语言混合开发
  6. php标签打印源码,C#标签设计打印程序源码
  7. Kubernetes 【安全】-System Hardening - 1. apparmor
  8. 2022 世界人工智能大会|人工智能与开源技术先锋论坛成功举办
  9. 洛谷 P2853 Cow Picnic S(DFS)
  10. Web开发应了解的5种设计模式