2023前端面试题------JS 面试题(1)

2023-11-13

三. JS高频面试题
1. 介绍JS有哪些内置对象?
  • 数据封装类对象:Object、Array、Boolean、Number、String
  • 其他对象:Function、Arguments、Math、Date、RegExp、Error
  • ES6新增对象:Symbol(标识唯一性的ID)、Map、Set、Promises、Proxy、Reflect
2. 如何最小化重绘(repaint)和回流(reflow)?
  • 需要要对元素进行复杂的操作时,可以先隐藏(display:“none”),操作完成后再显示

  • 需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入document

  • 缓存Layout属性值,如:var left = elem.offsetLeft; 这样,多次使用 left 只产生一次回流

  • 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)

3. Javascript作用域链?
  • 全局函数无法查看局部函数的内部细节,但局部函数可以查看其上层的函数细节,直至全局细节
  • 如果当前作用域没有找到属性或方法,会向上层作用域[[Scoped]]查找,直至全局函数,这种形式就是作用域链
4. 数据请求

(1) XHR

var xhr = new XMLHttpRequest();
xhr.open('get',"www.aaaa.com",true);//异步
xhr.send();
xhr.onreadystatechange = function(){
	// readstate  4
	// status  200-300
	// 200 成功 (有可能强缓存策略,cache-control,expired)
	// 301 302 redirect
	// 304 从缓存读取数据。(协商缓存策略,etag)
	// 404 not found
	// 500 服务器错误。	
}
  xhr 可以取消?
  xhr.abort();//终止请求。

(2) fetch (w3c)

fetch("url",	  
   {method:"post",body:"",credencial:'include'})
   .then(res=>res.json())
   .then(res=>{console.log(res)})
   // 兼容性问题
   // 发出的请求,默认是不带cookie.  credencial:'include'

(3) jsonp (解决跨域)

  动态创建script src指向没有跨域限制,  onload

  后端返回的数据格式 一定是, test('["111","222","3333"]');

  前端提前定义好 test这个方法,通过形参就拿到数据了。

  jsonp 可以做get请求, 无法做post请求(缺点);

  jsonp可以取消吗?不能
5. 跨域和同源策略

所谓的同源策略其实是浏览器的一种机制,只允许在同源,也就是同协议、同域名、同端口的的情况下才能进行数据交互。 但是我们在开发项目的过程中, 往往一个项目的接口不止一个域,所以往往就需要做跨域的处理,通常的跨域方式有这么几种:

1)JSONP,主要依赖的是script标签不受同源策略影响,src指向某一个接口的地址, 同步需要传递callback回调函数名字, 这样当接口调用成功后, 本地创建的全局回调函数就会执行, 并且接收到数据。不使用img标签的原因是因为img标签无法执行js语句

2)CORS,依赖服务端对前端的请求头信息进行放行,不做限制。

Access-Control-Allow-Origin配置成*

3)代理访问,前端访问不存在跨域问题的代理服务器,代理服务器再去访问目标服务器(服务器之间没有跨域限制)

6. 面向对象

(1)构造函数

function Test(name,age){
    this.name = name;
    this.age =age;
    this.getName= function(){
    	return this.name;
    }
}
// Test();
var obj = new Test("kerwin",100);

var obj2 =new Test("xiaoming",18)

(2)原型

 //内存只有一份
Test.prototype.getName= function(){

}
//缺点是?

原型容易被覆盖

Array.prototype.concat = ....

(3)继承

//构造函数继承
function Test2(name,age,location){
    // this.name =name;
    // this.age =age;
    // Test.call(this,name,age);
    Test.apply(this,[name,age])
    this.location = location;
}
var obj = new Test2();

//原型继承
Test2.prototype =Test.prototype
//Test2.prototype =new Test()
Test2.prototype.constructor =Test2;

//混合继承

(4)原型链

原型链的基本原理:任何一个实例,通过原型链,找到它上面的原型,该原型对象中的方法和属性,可以被所有的原型实例共享。

在这里插入图片描述

7. 闭包

闭包是JS中的一种特性,往往用于解决一些特定的问题,当A函数中返回了B函数, 并且返回的B函数中有使用到A函数中的局部变量(包含参数)就会形成一个特性的形态,就叫闭包。

此时,理论上来说A函数执行完成后,生成了B函数后,应该被垃圾回收机制回收,但是因为生成的B函数还在使用A函数中的局部变量, 就会导致A函数没有及时回收,导致内存泄露。

   	//1. 函数防抖(搜索查询)
   	
   	inputelement.oninput = (function(){
   		var timer =null;
   		return function(){
               console.log("scroll")
   			if(timer){
   				clearTimeout(timer);
   			}
   			timer = setTimeout(() => {
   			 	console.log("代码执行,ajax"); 
                   
   			}, 500)
   		}
   	})()
   	// 2. 函数节流(onrize,onscroll)
           window.onscroll = (function(){
               var date = Date.now();
               return function(){

                   if(Date.now()-date>500){
                       date = Date.now();
                       console.log("代码执行echarts resize")

                   }
               }
           })()
   	
   	// 3. ul li
   	var oli = document.getElementsByTagName("li");

   	for(var i=0;i<oli.length;i++){
   		oli[i].onclick =(function(index){
               return function(){
                   console.log(index)
               }
           })(i)   
   	}
8. 数组去重
 var arr = [1,2,3,4,3,4];

 var myset = new Set(arr);
 var mya = Array.from(myset);
9. 数组常用的合并方法
  • concat

  • […a, …b]展开运算符

  • [a, b].flat()

10. cookie和session

cookie和session是为HTTP请求挂载状态的,也就说在前后端交互的过程中,往往需要利用cookie或者session来对客户端进行标记。

传统的cookie验证方式是这样的:

  1. 客户端在向服务端登录的时候,服务端直接通过响应头上set-cookie字段,为浏览器客户端注入cookie,或者将对应的信息放置在响应内容中,客户端自行将其存储在cookie中。

  2. 客户端在每次发送请求的时候就可以将cookie携带在请求头上进行数据的传递,服务端拿到此次请求头中的cookie进行验证。

  3. 客户端自行设置cookie或者由服务端设置cookie的时候也去设置此cookie的过期时间,当cookie过期后相当于登录过期了。

session的验证方式:

  1. 客户端在向服务端登录的时候,服务端自行建立客户信息表,并且建立生命周期机制,服务端再将此信息通过cookie或者数据直接返回的形式,返回给客户端。

  2. 客户端拿到验证信息后,可以选择存储在cookie中获取localStorage中都可以。

  3. 每次请求的时候携带验证信息(cookie就自动写到,localStorage需要取出携带)

  4. 服务端接收到请求后,判断该验证信息是否过期

cookie和session本质是都是利用cookie或者localStorage来进行数据交互,而cookie和localStorage又都有跨域的限制:

cookie通过设置domain可以实现一级域名下的二级域名之间可以互相访问,localStorage则不能跨域。

11. 线程和进程的区别

进程是资源分配的最小单元,线程是代码执行的最小单元。

一个应用程序可能会开启多个进程,进程之间数据不共享,一个进程内部可以开启多个线程,线程之间的数据可以共享的,所以多线程的情况下,往往要考虑的是线程间的执行顺序问题。

浏览器其实也可以通过webWorkers开启多线程。

12.协商缓存和强缓存区别

协商缓存和强缓存指的都是浏览器对静态资源文件的缓存机制。描述的就是什么时候去服务器请求,什么时候直接读取缓存中的文件。

强缓存是客户端直接查看本地的缓存文件是否过期,如果没有过期就直接取用。

  1. 查看过期的方法主要是依赖响应头上的expires(绝对时间)和cache-control(相对时间)上的时间来对比的

协商缓存指的是客户端去询问服务器对应的文件是否有更新,如果有更新才会重新请求。

  1. 依靠的是响应头上的last-modified(最后更新时间)及etag(内容变更的标识)来确认文件是否有更新。

一个文件是否重新请求要经过强缓存和协商缓存的完整过程后才能决定。

在这里插入图片描述

  1. 强制缓存和协商缓存都针对静态资源

  2. 强制缓存在前,协商缓存在后。

  3. 资源未过期触发强制缓存,资源过期后再触发协商缓存。

  4. 判断过期的方法expires(绝对时间)、cache-control(相对时间)

  5. 判断资源是否有更新(Last-Modified 和 ETag)

需要注意的是,即使是静态资源,也是依靠url来进行缓存的,也就是说只要是url地址不一样,就一定会去获取最新的数据。

所以我们往往会有这样的需求,在静态文件的src后面添加一个时间戳,获取在打包的时候动态的生成带有hash值的文件名,这样可以阻止浏览器缓存,使用户获取到最新的文件,使用到最新的功能。

13. http和https区别以及哪个更安全

HTTP明文传输,数据没有加密,安全性较差,HTTPS(HTTP + SSL),数据传输过程是加密的,安全性要好一些。

使用HTTPS协议要经过SSL认证来申请SSL证书,认证拿到证书的过程一般都是收费的,所以成本略高。

HTTP的速度要比HTTPS要更快一些,就是因为HTTP和服务器建立连接要通过TCP的三次握手,客户端和服务端只需要交换3个包,HTTPS在进行连接的时候除了要TCP的3个包,还要加上SSL握手的9个包,一共12个包。

默认端口不同,http默认80端口,https默认443接口。

HTTPS认证是怎么认证的?

客户端和服务端进行数据传输之前,先通过证书对双方进行身份验证:

  1. 客户端在发送SSL握手信息给服务端要求连接

  2. 服务端会将证书发送给客户端

  3. 客户端检查服务端证书,确认这个这个证书的签发机构是否值得信任,如果检查有问题,客户端会将是否继续通讯的决定权交给客户端,如果检查无误,或者用户选择继续,就表现客户端认可服务端身份。

  4. 服务端要求客户端发送证书,并且检查是否通过验证, 失败就关闭连接,成功的话就得到客户端的公钥

至此,服务端及客户端双方身份认证接受,双方都确保彼此身份可靠。

HTTPS一定安全吗?

不一定,HTTPS往往无法阻止中间人攻击。

A和B进行数据交互的时候,可以采用加密的方式,加密分为对称和不对称两种。

对称加密只要被破解出加密方式,就很容易泄露信息。

A生成一个秘钥ka,B生成一个秘钥kb;ka用于解密A加密的数据,kb用于解密B加密的数据。

A将ka传递给B,B将kb传递A,这样的话,A再给B传递信息的时候,B接受到之后用ka来进行解密。

HTTPS进行密文传输的时候采用的不对称加密的方式。但是如果有中间人拦截请求后模仿A和B来与B和A进行通信的时候也会泄露数据。

14.对于工作中的跨域问题你是怎么解决的

在线上的各种环境中(开发、测试、生产)环境一般是不会有跨域问题的,因为服务器和前端资源一般是会部署在同一个域的服务器下的,但是也有端口或者不同域的情况,这些时候往往都是后端去利用CORS来处理的跨域问题。

在本地开发的过程中,本地服务器访问测试服务器接口的,也基本都是后端去处理CORS跨域,但是有些时候也可能需要前端在脚手架对应的devServer中配置Proxy来进行开发时候的跨域处理。

在一些极少的情况下加,项目中可能会访问一些第三方的Api,比如定位、天气等等接口的时候,可能会根据接口需求进行jsonp的跨域处理。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

2023前端面试题------JS 面试题(1) 的相关文章

  • 使用 Google Apps 脚本处理数组中输入元素中的多个文件

    我有一个表单 允许从下拉列表中选择一个项目并上传文件 项目的名称和 ID 保存在电子表格文档中 适用于一个文件 但我想上传多个文件 你能帮我修改一下脚本吗 HTML 部分如下所示 div class col md 4 col sm 6 di
  • Firebase HTTP Cloud Functions - 读取数据库一次

    我有 Firebase HTTPs 功能 该函数需要根据查询参数从 Firebase 数据库读取值 并根据该数据返回结果 Firebase JS SDK 表示要使用以下命令来执行此操作 return firebase database re
  • 引发一系列事件 Backbone event:name

    extend object Backbone Events object on myalert one function msg document body innerHTML eve1 msg msg name this name con
  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有
  • 如何共享 Swagger 文档

    我最近开始使用 Swagger 来编写文档 但有一些事情我仍然不清楚 我创建了 YAML 文档 现在我希望能够与团队的其他成员共享 pdf 或 HTML Javascript 页面中的文档 我无法使用 SwaggerHub 因为它们没有私有
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • 监听外部事件。 Bash 到 NodeJS 的桥梁

    在 NodeJS 进程内部 我如何监听来自 bash 的事件 例如 NodeJS side obj on something function data console log data Bash side do something Hel
  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p
  • 使用 ECMA 脚本向节点(页面)添加新属性

    我需要在页面激活时向页面添加属性 我决定建立一个工作流程 在激活步骤之前执行相同的操作 我的自定义工作流程步骤 激活步骤之前的步骤 使用 ECMA 脚本来实现此目的 这是我到目前为止所拥有的 var workflowData granite
  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • 类型错误:require.config 不是一个函数

    我正在使用 require js 作为早午餐项目的一部分 这段代码抛出错误 require config require config is not a function paths jquery lib jquery underscore
  • 什么是{| ... |} 在 JavaScript 中是什么意思? [复制]

    这个问题在这里已经有答案了 通读 javascript 代码库 我遇到了如下代码块 export type RouteReducerProps error Error isResolving boolean isResolved boole
  • 新部署后,React 应用程序必须清除浏览器缓存

    我们正在使用 Jenkins 管道在 apache 服务器上部署 React 应用程序 当我们部署新代码时 大多数新功能都可以正常工作 但并非所有更改都反映浏览器中的最新内容 用户必须打开隐身窗口或清除缓存才能看到新功能 我见过一些相关的解
  • 包含括号的变量会导致问题[重复]

    这个问题在这里已经有答案了 简单的事情 当单击按钮并将其写入文本字段时 我读取选择框的值 选择框
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • Meteor JS:存储特定模板实例状态的最佳方法是什么?

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑
  • javascript 函数后面括号中的值

    我正在尝试重新利用我在 SO 的答案中找到的一些 Javascript 代码 但我想首先更好地理解它的语法 其大纲是 function root ns factory some code window detectZoom function
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐

  • Redfish协议测试工具–Postman

    1 工具和资料获取 2 简单使用说明 1 GET类举例 2 PATCH类举例 3 常见命令 1 工具和资料获取 Postman工具获取 服务器Redfish接口说明文档 使用前必读接口文档中 适用的产品 查看自己的服务器是否支持此协议 2
  • 简单sql注入

    报错注入找列数 确定为16 联合查询找回显点 查询数据库和数据库版本 版本为5 0以上 需要对查询的内容加密否则报错 结果不是需要的 查询所有的表 获得表名cms users 获得字段usename password 得到账号密码
  • 用java代码验证char类型数据占几个字节

    char为字符型数据 储存单个字符 但阿拉伯数字 英文字母 标点符号等皆为字符型数据 占用字节看似错综复杂 但是char也为脱离计算机基本 二进制储存机制 char本质上内存中皆存储字符编码 1 127为ASCII码 也就是常用的字符 但在
  • 关于iOS9中的App Transport Security(ATS)相关说明及适配

    iOS9中新增App Transport Security 简称ATS 特性 主要使到原来请求的时候用到的HTTP 都转向TLS1 2协议进行传输 这也意味着所有的HTTP协议都强制使用了HTTPS协议进行传输 原文如下 App Trans
  • VS2010:error C2061: 语法错误

    实例 类名 类中包含的头文件 point iostream line point flat flat line 输出错误 error C2061 语法错误 标识符 flat 解决办法 前置声明 line h class flat
  • 区块链读书笔记04 - 以太坊

    区块链读书笔记04 以太坊 以太坊 Ethereum 以太坊关键概念 账户 Account 交易 Transaction 消息 Messsage Gas 合约 contract 以太坊虚拟机 EVM DApp 去中心化应用 以太坊架构 以太
  • 网站域名服务器加密,网站域名利用https防劫持方法

    原标题 网站域名利用https防劫持方法 公共 DNS HttpDNS 的部署成本过高 并且具有一定的技术门槛 在面对无孔不入的 DNS 劫持时有时候其实有点力不从心 那么如何简单有效低成本的加强域名防劫持呢 只需要给网站开启 HTTPS
  • mysql jdbc 多数据源_springboot多数据源(oracle、mysql)

    1 application properties配置 server port 8085 server tomcat uri encoding utf 8 MySQL spring datasource primary driver clas
  • java基于BufferedImage进行图片数字识别预处理

    参考文章链接 1 https blog csdn net kobesdu article details 8142068 2 https blog csdn net fjssharpsword article details 5265184
  • 从此刻开始走进HTML的大门!!!

    文章目录 什么是HTML呢 HTML的结构又是怎么样的呢 学习HTML的标签 标题标签 段落标签 文本格式化标签 换行标签 字符实体 容器标签 图片标签 超链接标签 列表标签 什么是HTML呢 HTML 英文全称是 Hyper Text M
  • kmeans算法和kmeans++

    kmeans算法及其优化改进 kmeans聚类算法 算法原理 kmeans的算法原理其实很简单 我用一个最简单的二维散点图来做解释 如上图 我们直观的看到该图可聚成两个分类 我们分别用红点和蓝点表示 下面我们模拟一下Kmeans是怎么对原始
  • 桌面研究-数据源

    文章目录 1 各国每年人口统计表 2 各国年龄结构表 3 国家简介 4 城镇化率 5 美国房屋统计数据 6 各国教育水平 7 住房类型 8 家庭结构 家庭人数 9 恩格尔系数 10 IMF 人均GDP PPP人均GDP 1 各国每年人口统计
  • 自动化测试需要学什么?二十八岁功能想转自动化现实吗?

    先回答一下后面那个问答 二十八岁还能从功能转自动化吗 很多接触软件测试都是从功能测试开始的 但是功能测试的薪资会比自动化少很多 所以就想要要学习自动化 从功能测试转到做自动化 其实这是完全来的及的 花上几个月时间学习自动化测试 造福以后 这
  • 智能化里面计算机网络设计思路,浅谈云机房网络的建设和维护及思路分析

    徐振宇 张欣 摘要 现代机房网络管理过程中 云技术的应用效果非常的显著 该文先对机房中的云技术应用实践中进行分析 并在此基础上就云机房网络的建设及其维护和设计思路 谈一下个人的观点和认识 以供参考 关键词 机房 云技术 网络建设 维护 设计
  • Blob 文件下载对应的常见 MIME 类型列表

    Blob 对象表示一个不可变 原始数据的类文件对象 它的数据可以按文本或二进制的格式进行读取 也可以转换成 ReadableStream 来用于数据操作 在 JS 中通常使用 Blob 进行文件下载保存 new 转换过程中需要指定下载文件
  • BurpSuite Proxy 给代理设置上层代理

    1 简单描述 正常情况而言 使用BurpSuite时数据包的经过流程为 浏览器 BurpSuite Repeater Intruder gt BurpSuite Proxy gt 目标服务器 这个时候其实还是本机发出的流量 我们想让流量由其
  • vue环境变量配置——process.env(详细)

    目录 一 背景 二 配置环境的实现原理 三 使用步骤 3 1安装依赖 3 2创建 env dev 和 env prod两个文件 3 3设置项目启动时默认的环境 3 4查看环境是否配置成功 一 背景 在用vue框架时 经常用到两种环境 一种是
  • 智能指针auto_ptr

    智能指针 auto ptr 这个名字听起来很酷是不是 其实auto ptr 只是C 标准库提供的一个类模板 它与传统的new delete控制内存相比有一定优势 但也有其局限 本文总结的8个问题足以涵盖auto ptr的大部分内容 1 au
  • DVWA-Brute Force

    Brute force 暴力破解 是一种试图通过尝试所有可能的组合 通常是密码 来获取敏感信息或破解加密的技术或方法 这种攻击方法通常被用来破解密码 对系统进行入侵或访问受限资源 暴力破解攻击的原理是通过迭代尝试各种可能的组合 例如密码字典
  • 2023前端面试题------JS 面试题(1)

    2023前端面试题 JS面试题 三 JS高频面试题 1 介绍JS有哪些内置对象 2 如何最小化重绘 repaint 和回流 reflow 3 Javascript作用域链 4 数据请求 5 跨域和同源策略 6 面向对象 7 闭包 8 数组去