IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端面试题(三) -> 正文阅读

[JavaScript知识库]前端面试题(三)

1.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

????????CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。

行内元素有:span a b i img input select strong
块级元素有:div p h1-h6 ul table form ul ol li dl dt dd…
空元素(没有内容): <br> <hr> <img> <input> <link> <meta>

2.什么是盒子模型?

盒子模型是css3新特性。具有以下特性:

把所有的网页元素都看成一个盒子,它具有: content,padding,border,margin 四个属性,这就是盒子模型

盒子模型有两种形式:标准盒子模型,怪异盒子模型

两种模式可以利用box-sizing属性进行自行选择:
  标准模式:box-sizing:content-box;
  怪异模式:box-sizing:border-box;
  
两种模式的区别:
标准模式会被设置的padding撑开
而怪异模式则相当于将盒子的大小固定好,再将内容装入盒子,盒子的大小并不会被padding所撑开

3.简述一下src与href的区别?

src和href都是属于外部资源的引用,像一些图片,css文件,js文件,或者其他的web页面
他们的之间的主要关系可以用这样的一句话来概括:src用于替换这个元素,而href用于建立这个标签与外部资源的关系
href (Hypertext Reference) 表示超文本引用,href这个属性指定web资源的位置,从而定义当前元素(如锚点a)或当前文档(如链接)与目标锚点或目标资源之间的联系
src (Source)源这个属性是将资源嵌入到当前文档中元素所在的位置
当浏览器解析到src引用的js文件代码时,页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件。这就像是把js文件里的内容全部注入到这个script标签中,类似于img,img标签是一个空标签,它的内容就是由src这个属性定义,浏览器会暂停加载直到这个图片加载完成。这也是为什么要将js文件的加载放在body最后的原因(在前面)
?

4.什么是CSS Hack?

CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。

CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。

1、属性级Hack:比如IE6能识别下划线“_”和星号“*”,IE7能识别星号“*”,但不能识别下划线”_?”,而firefox两个都不能认识。

2、选择符级Hack:比如IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}

3、IE条件注释Hack:IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE:&lt;!-[if IE]&gt;&lt;!-您的代码-&gt;&lt;![endif]&gt;,针对IE6及以下版本:&lt;!-[if it IE 7]&gt;&lt;!-您的代码-&gt;&lt;![endif]-&gt;,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

PS:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSSJSHTML服务器代码等。

浏览器优先级别:

FF<IE7<IE6,CSS hack

?书写顺序一般为FF IE7 IE6

注意: 不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。补充:IE6能识别*?,但不能识别?!important,IE7能识别?*,也能识别!important;FF不能识别?*,但能识别!important;下划线”?_?“,IE6支持下划线,IE7和firefox均不支持下划线。

5.为什么不推荐使用CSS hack来解决兼容性问题 ?

CSS hack是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法。CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此,在设计之初,写CSS hack需要遵循以下三条原则:

  • 有效: 能够通过 Web 标准的验证
  • 只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器
  • 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则,而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此,并不推荐使用CSS hack来解决兼容性问题。

6.简述同步和异步的区别?

javascript是单线程的语言,所谓的单线程,就是从上至下,依次执行,当然这里的依次执行要抛开javascript的预解析机制。*

这样做的原因是因为javascript最初是为了操作DOM,运行在浏览器环境下的,而操作DOM的时候,不能是异步的,不然的话两个异步任务同时修改DOM结构的话,会导致浏览器不知道该执行哪一个。*

但是这样做也有缺点,当遇到一个响应时间特别长的任务时,容易导致页面加载错误或者浏览器未响应的情况。

同步就是所有的任务都处在同一队列中,不可以插队,一个任务执行完接着开始执行下一个,相对于浏览器而言,同步的效率过低,一些耗费时间比较长的任务应该用异步来执行。
异步就是将一个任务放入到异步队列中,当这个任务执行完成之后,再从异步队列中提取出来,插队到同步队列中,拿到异步任务的结果,可以提升代码执行的效率,不需要因为一个耗费时长的代码而一直等待。

7.px和em的区别?

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

注:在body里面注明 font-size:62.5%;

1.之后可以将em当px使用,x10就好,当然前提是父级标签里面没设定font-size,

2.一旦父级元素有设定字体大小, em前面数值x就相当于父级元素字体乘以x%

3.相对最临近父级元素,且可以一直往下叠加.

8.什么叫优雅降级和渐进增强?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

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

  • IE: trident内核
  • Firefox:gecko内核
  • Safari: webkit内核
  • Opera: 以前是presto内核,Opera现已改用Google - Chrome的Blink内核
  • Chrome: Blink(基于webkit,Google与Opera Software共同开发)

10.http 状态码,以及常见的状态码?

HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误,能够根据返回的状态码判断请求是否得到正确的处理很重要,状态码由3位数字和原因短语组成。

状态码分类表:
1xx?? ?Informational(信息性状态码)?? ?接受的请求正在处理
2xx?? ?Success(成功状态码)?? ?请求正常处理完毕
3xx?? ?Redirection(重定向)?? ?需要进行附加操作以完成请求
4xx?? ?Client error(客户端错误)?? ?客户端请求出错,服务器无法处理请求
5xx?? ?Server Error(服务器错误)?? ?服务器处理请求出错
?

各类别常见状态码:

2xx (3种)

200 OK:表示从客户端发送给服务器的请求被正常处理并返回;

204 No Content:表示客户端发送给客户端的请求得到了成功处理,但在返回的响应报文中不含实体的主体部分(没有资源可以返回);

206 Patial Content:表示客户端进行了范围请求,并且服务器成功执行了这部分的GET请求,响应报文中包含由Content-Range指定范围的实体内容。

3xx (5种)

301 Moved Permanently:永久性重定向,表示请求的资源被分配了新的URL,之后应使用更改的URL;

302 Found:临时性重定向,表示请求的资源被分配了新的URL,希望本次访问使用新的URL;

? ? ? ?301与302的区别:前者是永久移动,后者是临时移动(之后可能还会更改URL)

303 See Other:表示请求的资源被分配了新的URL,应使用GET方法定向获取请求的资源;

? ? ? 302与303的区别:后者明确表示客户端应当采用GET方式获取资源

304 Not Modified:表示客户端发送附带条件(是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部)的请求时,服务器端允许访问资源,但是请求为满足条件的情况下返回改状态码;

307 Temporary Redirect:临时重定向,与303有着相同的含义,307会遵照浏览器标准不会从POST变成GET;(不同浏览器可能会出现不同的情况);

4xx (4种)

400 Bad Request:表示请求报文中存在语法错误;

401 Unauthorized:未经许可,需要通过HTTP认证;

403 Forbidden:服务器拒绝该次访问(访问权限出现问题)

404 Not Found:表示服务器上无法找到请求的资源,除此之外,也可以在服务器拒绝请求但不想给拒绝原因时使用;

5xx (2种)

500 Inter Server Error:表示服务器在执行请求时发生了错误,也有可能是web应用存在的bug或某些临时的错误时;

503 Server Unavailable:表示服务器暂时处于超负载或正在进行停机维护,无法处理请求;

11.请描述一下cookies,sessionStorage和localStorage的区别?

特性CookielocalStoragesessionStorage
特性一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除
存放数据大小4K左右一般为5MB
与服务器端通信每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性需要程序员自己封装,源生的Cookie接口不友好源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

12.怎样添加、移除、移动、复制、创建和查找节点?

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2)添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id,唯一性

13.Javascript中callee和caller的作用?

  1. caller是返回一个对函数的引用,该函数调用了当前函数;
  2. callee是返回正在被执行的function函数,也就是所指定的function对象的正文

14.数组快速排序?

var quickSort = function(arr) {

  if (arr.length <= 1) { return arr; }

  var pivotIndex = Math.floor(arr.length / 2);

  var pivot = arr.splice(pivotIndex, 1)[0];

  var left = [];

  var right = [];

  for (var i = 0; i < arr.length; i++){

    if (arr[i] < pivot) {

      left.push(arr[i]);

    } else {

      right.push(arr[i]);

    }

  }

  return quickSort(left).concat([pivot], quickSort(right));//递归算法

};

15.一次完整的HTTP事务是怎样的一个过程?

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户

16.什么是React 路由?

现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。

前端 路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)
前端路由是一套映射规则,在React中,是URL路径与组件的对应关系
使用React路由简单来说,就是配置路径和组件

17.为什么React Router v4中使用 switch 关键字 ?

????????有标签,则其中的在路径相同的情况下,只匹配第一个,这个可以避免重复匹配;为了更好地匹配规则,轻易不要舍弃?。

????????Switch匹配到第一个路由就不会继续匹配了,
如果不加Route 里不加 exact,那么凡是Link里面 to 的路径包含了/( /about, /topic 都包含了 / ,当点击about或者topic的Link的时候,path=’/'的路由都会匹配到,Switch匹配到了一个就停止向下匹配,那么就会被匹配到,于是Switch就不继续匹配下去。

????????如果没有Switch也没有exact,不管点击哪个链接都会有path=’/的页面’。

????????有Switch没有exact:不管点击哪个链接都只会出来path=’/'的页面(也就是Main页面)。

18.列出 React Router 的优点?

1.风格: 与React融为一体,专为react量身打造,编码风格与react保持一致,例如路由的配置可以通过component来实现
2.简单: 不需要手工维护路由state,使代码变得简单
3.强大: 强大的路由管理机制,体现在如下方面
4.路由配置: 可以通过组件、配置对象来进行路由的配置
5.路由切换: 可以通过<Link> Redirect进行路由的切换
6.路由加载: 可以同步记载,也可以异步加载,这样就可以实现按需加载
7.使用方式: 不仅可以在浏览器端的使用,而且可以在服务器端的使用

缺点:API不太稳定,在升级版本的时候需要进行代码变动。

19.为什么需要 React 中的路由?

react-router-dom这个包,给我们声明了很多的组件,我们可以直接导入这些组件去使用,就可以完成我们想要的路由相关的功能

原理:实现URL与UI界面的同步。其中在react-router中,URL对应Location对象,
而UI是由react components来决定的,这样就转变成location与components之间的同步问题。
?

20.React Router与常规路由有何不同?

前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的?history?API 出现之前,前端的路由都是通过?hash?来实现的,hash?能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用?hash?来实现的话,它的 URI 规则中需要带上?#

用户可能都察觉不到该访问地址是 Web 服务实现的路由还是前端实现的路由。

从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。

21.知道hoc和render props吗,它们有什么作用?有什么弊端?

1.学习 HOC 我们只需要记住以下 2 点定义:

? ? ? ? 创建一个函数, 该函数接收一个组件作为输入除了组件, 还可以传递其他的参数

????????基于该组件返回了一个不同的组件.

HOC 的优点:不会影响内层组件的状态, 降低了耦合度

HOC 的缺点:固定的 props 可能会被覆盖.

2.render props

功能: 将一个组件内的 state 作为 props 传递给调用者, 调用者可以动态的决定如何渲染.

创建 render props 的方式

  • 接收一个外部传递进来的 props 属性

  • 将内部的 state 作为参数传递给调用组件的 props 属性方法.

缺点:

  • 无法在 return 语句外访问数据

  • 它不允许在 return 语句之外使用它的数据. 比如上面的例子, 不能在 useEffect 钩子或组件中的任何其他地方使用 x 和 y 值, 只能在 return 语句中访问.

嵌套:

  • 它很容易导致嵌套地狱.?

22.useState中的第二个参数更新状态和class中的this.setState区别?

二者参数对比:
setState( updater [,callback] ) :
updater:object/function - 用于更新数据
callback:function - 用于获取更新后最新的 state 值


useState(initState):
const [ state , setState ] = useState(initState)
state:状态
setState(updater) :修改状态的方法
updater:object/function - 用于更新数据
initState:状态的初始值
?

setState()使用注意事项
setState()
构造函数是唯一建议给 this.state 赋值的地方
不建议直接修改 state 的值,因为这样不会重新渲染组件
自动进行浅合并(只会合并第1层)
由于 setState() 异步更新的缘故,依赖 state 旧值更新 state 的时候建议采用传入函数的方式
?

  • setState() 的异步问题
    • setState() 在绝大多数情况下都是异步操作,更新 state 后无法直接获取最新的 state 值

useState()使用注意事项

  • useState()
    • 可以自定义命名
    • 可以使用多个useState()
    • 不具备自动浅合并的效果
  • useState() 中类似setState() 异步的问题
    • 调用 setState() 后组件不会立刻更新,无法立刻获取到最新的 state 值

为什么叫做 useState 而不是 createState ?
const [ state , setState ] = useState( initVal )
因为 create 的描述不准确,state 只有在组件首次渲染时才会被创建并赋予初始值 initVal。当函数组件更新时,虽然会重新执行函数组件中的每一行代码,但是 useState 底层做了特殊的处理,使得每次更新不会使用 initVal 来创建新的 state ,而是返回给我们当前的 state
?

setState 方式会 重新渲染组件

this.state的方式会改变值,但不会重新渲染组件(这就是为什么你改变了值,但是页面没有响应你)

在使用时。可以先使用this.state.的方式来赋值。在最后一次赋值使用setState的方式。这样组件之渲染一次达到赋值的效果。

在render()中。也就是在页面初始化阶段一定不能用state。否则会造成不断的重新渲染组件。导致崩掉。

1、二者更新数据时,第一个参数都可以传入函数
this.setState((state, props) => ({ ?//setState()
? counter: state.counter + props.increment
}));
?
setCount(count => count + 1); ?//useState()
?
2、setState()可以在第2个参数传入回调, useState()没有第2个参数
this.setState(
? {count: this.state.count + 1},
? () => console.log(this.state.count) ?//可以通过第2个回调函数获取最新的state值
);
PS:函数式组件中可以通过 useEffect() 来获取最新的 state
?
3、setState() 自动具备浅合并功能,useState()更新引用需要手动浅合并

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-23 16:34:41  更:2021-08-23 16:35:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/27 5:06:28-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计