前端基础面试题
文章平均质量分 67
distantimg
这个作者很懒,什么都没留下…
展开
-
前端与数据埋点
所谓埋点就是在应用中特定的流程收集一些信息,用来跟踪应用使用的状况,后续用来进一步优化产品或是提供运营的数据支撑,包括访问数(Visits),访客数(Visitor),停留时长(Time On Site),页面浏览数(Page Views)和跳出率(Bounce Rate)。这样的信息收集可以大致分为两种:页面统计(track this virtual page view),统计操作行为(track this button by an event)。数据埋点的方式现在埋点的主流有两种方式:第一种原创 2021-01-21 14:22:22 · 519 阅读 · 0 评论 -
Token - 服务端身份验证的流行方案
简述:需要一个secret(随机数)后端利用secret和加密算法(如:HMAC-SHA256)对payload(如账号密码)生成一个字符串(token),返回前端前端每次request在header中带上token后端用同样的算法解密身份认证服务端提供资源给客户端,但是某些资源是有条件的。所以服务端要能够识别请求者的身份,然后再判断所请求的资源是否可以给请求者。token是一种身份验证的机制,初始时用户提交账号数据给服务端,服务端采用一定的策略生成一个字符串(token),token字原创 2021-01-21 13:15:29 · 1500 阅读 · 0 评论 -
一篇文章搞懂前端缓存
搞懂前端缓存总的来说:如果开启了Service Worker首先会从Service Worker中拿如果新开一个以前打开过的页面缓存会从Disk Cache中拿(前提是命中强缓存)刷新当前页面时浏览器会根据当前运行环境内存来决定是从 Memory Cache 还是 从Disk Cache中拿(可以看到下图最后几个文件有时候是从 Memory Cache中拿有时候是从Disk Cache中拿) 注意:以上回答全部基于chrome浏览器搞懂前端缓存前端缓存/后端缓存扯了些没用的,我们先进入定原创 2021-01-21 12:50:37 · 431 阅读 · 0 评论 -
#浏览器与Node的事件循环有何区别?
(Event Loop)浏览器关于微任务和宏任务在浏览器的执行顺序是这样的:执行一只task(宏任务)执行完micro-task队列 (微任务)如此循环往复下去浏览器的task(宏任务)执行顺序在 html#event-loops 里面有讲就不翻译了 常见的 task(宏任务) 比如:setTimeout、setInterval、script(整体代码)、 I/O 操作、UI 渲染等。 常见的 micro-task 比如: new Promise().then(回调)、MutationOb原创 2021-01-21 12:46:55 · 239 阅读 · 0 评论 -
实现开通一键唤醒支付宝与微信html支付
测试连接点击进入1.支付宝扫码接口实现功能:可用于网页支付跳转支付成功后返回演示:参数名参数含义字段类型是否必填total_fee订单金额int(16)是body商品名称String(128)是token身份验证(向管理获取)String(128)是goods_detail商品详请String(128)是attach附加信息String(128)是notify_url回调地址String(128)是wap原创 2021-01-20 16:55:07 · 1833 阅读 · 1 评论 -
浏览器 重绘与回流
1. 浏览器渲染机制浏览器采用流式布局模型(Flow Based Layout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree)。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用原创 2021-01-20 16:48:19 · 134 阅读 · 0 评论 -
bind、call、apply、箭头函数、new的区别
bind、call、apply、箭头函数、new的区别call和apply其实是一样的,区别就在于传参时参数是一个一个传或者是以一个数组的方式来传。call和apply都是在调用时生效,改变调用者的this指向。console.log(add.call(s,3,4)); // 1+2+3+4 = 10console.log(add.apply(s,[5,6]));let name = 'Jack'const obj = {name: 'Tom'}function sayHi() {consol原创 2021-01-20 15:30:03 · 194 阅读 · 0 评论 -
创建对象有几种方法
创建对象有几种方法字面量const obj = {a: 1}构造函数function Obj(val) { this.a = val}const obj = new Obj(1)Object.createconst obj = Object.create({a: 1})ES6 classclass abc{ constructor(){ this.a = 123 }}原创 2021-01-20 15:11:38 · 97 阅读 · 0 评论 -
cookie、session、localStorage、sessionStorage区别
cookie、session、localStorage、sessionStorage区别特性cookielocalStoragesessionStorage由谁初始化客户端或服务器,服务器可以使用Set-Cookie请求头。客户端客户端数据的生命周期一般由服务器生成,可设置失效时间,如果在浏览器生成,默认是关闭浏览器之后失效永久保存,可清除仅在当前会话有效,关闭页面后清除存放数据大小4KB5MB5MB与服务器通信每次都会携带在HTTP头中,如果原创 2021-01-20 14:52:14 · 67 阅读 · 0 评论 -
ajax 与 fetch
AjaxAjax(asynchronous JavaScript and XML)是使用客户端上的许多 Web 技术,创建异步 Web 应用的一种 Web 开发技术。借助 Ajax,Web 应用可以异步(在后台)向服务器发送数据和从服务器检索数据,而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离,Ajax 允许网页和扩展 Web 应用程序动态更改内容,而无需重新加载整个页面。实际上,现在通常将 JSON 替换为 XML,因为 JavaScript 对 JSON 有原生支持优势。XMLHttp原创 2021-01-20 14:44:23 · 102 阅读 · 0 评论 -
闭包
闭包是指有权访问另一个函数作用域中的变量的函数。function sayHi(name) { return () => { console.log(`Hi! ${name}`) }}const test = sayHi('xiaoming')test() // Hi! xiaoming虽然sayHi函数已经执行完毕,但是其活动对象也不会被销毁,因为test函数仍然引用着sayHi函数中的变量name,这就是闭包。但也因为闭包引用着另一个函数的变量,导致另一个原创 2021-01-20 14:39:24 · 70 阅读 · 0 评论 -
prototype和__proto__的关系是什么
所有的对象都拥有__proto__属性,它指向对象构造函数的prototype属性let obj = {}obj.__proto__ === Object.prototype // truefunction Test(){}test.__proto__ == Test.prototype // true所有的函数都同时拥有__proto__和protytpe属性函数的__proto__指向自己的函数实现 函数的protytpe是一个对象 所以函数的prototype也有__proto__属性原创 2021-01-20 14:29:03 · 373 阅读 · 0 评论 -
事件绑定的方式
嵌入dom<button onclick="func()">按钮</button>直接绑定btn.onclick = function(){}事件监听btn.addEventListener('click',function(){})事件委托事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。所有用到按钮的事件(多数鼠标事件和键盘事件)都适合采用事件委托技术,使用事件委托可以节省内存。<ul> <li.原创 2021-01-20 14:25:59 · 87 阅读 · 0 评论 -
解决跨域问题
同源策略同源策略可防止 JavaScript 发起跨域请求。源被定义为 URI、主机名和端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型,访问另一个网页上的敏感数据。跨域原因 浏览器的同源策略导致了跨域作用 用于隔离潜在恶意文件的重要安全机制解决jsonp ,允许 script 加载第三方资源反向代理(nginx 服务内部配置 Access-Control-Allow-Origin *)cors 前后端协作设置请求头部,Access-Control-Allow-O原创 2021-01-20 14:22:14 · 69 阅读 · 0 评论 -
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。圣杯布局与双飞翼布局圣杯布局来源于文章In Search of the Holy Grail,而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异,不过都遵循了以下要点:两侧宽度固定,中间宽度自适应中间部分在DOM结构上优先,以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的``标签下面我将依次介绍圣杯布局和双飞翼布局的实现方法,并在最后根据原创 2021-01-19 13:09:44 · 285 阅读 · 0 评论 -
Set_Map_WeakSet和WeakMap的区别
et 和 Map 主要的应用场景在于 数据重组 和 数据储存Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构1. 集合(Set)ES6 新增的一种新的数据结构,类似于数组,但成员是唯一且无序的,没有重复的值。Set 本身是一种构造函数,用来生成 Set 数据结构。new Set([iterable])举个例子:const s = new Set()[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))for (let i of原创 2021-01-19 10:34:34 · 122 阅读 · 0 评论 -
函数节流与函数防抖
什么是函数节流与函数防抖举个栗子,我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时,在人眼的视觉中就会形成一个连贯的动画,所以在电影的播放(以前是,现在不知道)中基本是以每秒 24 张的速度播放的,为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候,100 张就会显得很浪费资源。再举个栗子,假设电梯一次只能载一人的话,10 个人要上楼的话电梯就得走 10 次,是一种浪费资源的行为;而实际生活正显然不是这样的,当电梯里有人准备上楼的时候如果外面又有人按电梯的话,电梯会原创 2021-01-19 10:33:07 · 85 阅读 · 0 评论 -
7 种方法解决移动端 Retina 屏幕 1px 边框问题
造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。解决边框变粗的6种办法1、0.5px边框在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Conno原创 2021-01-19 10:31:19 · 290 阅读 · 0 评论 -
在不改变当前代码的情况下,使这张图片的宽度为300px?
<img src="1.jpg" style="width:480px!important"/>1.css方法<img src="1.jpg" style="width:480px!important; max-width: 300px"><img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);" ><img src="1.jpg" style="width:480原创 2021-01-19 10:30:25 · 401 阅读 · 0 评论 -
03-opacity_visibility_display优劣
display: none;DOM 结构:浏览器不会渲染 display 属性为 none 的元素,不占据空间;事件监听:无法进行 DOM 事件监听;性能:动态改变此属性时会引起重排,性能较差;继承:不会被子元素继承,毕竟子类也不会被渲染;transition:transition 不支持 display。visibility: hidden;DOM 结构:元素被隐藏,但是会被渲染不会消失,占据空间;事件监听:无法进行 DOM 事件监听;性 能:动态改变此属性时会引起重绘,性能较高;原创 2021-01-19 10:29:31 · 90 阅读 · 0 评论 -
div水平垂直居中的方法
在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)图片展示:代码如下:div{ background:red; position: absolute; left:50%; top:50%; tran原创 2021-01-19 10:28:26 · 107 阅读 · 0 评论 -
BFC、IFC、GFC、FFC
CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。到底什么是BFC、IFC、GFC和FFCWhat’s FC?一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个原创 2021-01-19 10:27:11 · 241 阅读 · 0 评论