前端面试
关注
分享
扫一扫
文章平均质量分 72
前端面试
小丁冲鸭！
你若盛开，鲜花自来。
展开
-
call、bind、apply的简易实现
前言：这三个都是函数的api，用于改变this的指向，使一个对象能调用另一个不属于自己的方法，核心思想就是通过改变方法中数据的this指向，借用别人的方法。一、call通过隐式绑定的方法实现，因为执行obj1.getName.myCall(obj)，则myCall中的this就是指向obj1.getName的，再将方法添加到想使用的对象上即可。Function.prototype.myCall = function (context = window, ...args) { i.原创 2021-05-23 12:25:55 · 297 阅读 · 0 评论 -
js滑动后吸顶实现
效果：法一：addEventListener监听滚动，当滚动上去的高度scrollTop 大于 吸顶部分距离页面顶部的距离offsetTop时，添加一个类，类里边用fixed布局，top设置成0；当又滚动下来，在将该类名移除即可，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl.原创 2021-05-20 23:09:57 · 1777 阅读 · 1 评论 -
前端面经之快手
1、跨域及解决方案我就说了jsonp和cors2、原型相关知识function Foo() { Foo.a = function() { console.log(1) } this.a = function() { console.log(2) }}Foo.prototype.a = function() { console.log(3)}Foo.a = function() { console.log(4原创 2021-05-13 10:32:34 · 307 阅读 · 2 评论 -
前端面经二之伴鱼
1、事件循环console.log(1)setTimeout(() => { console.log(2) Promise.resolve().then((data) => { console.log(3) })})new Promise((resolve) => { resolve() console.log(4)}).then(() => { console.log(5) setTimeout(() => {原创 2021-05-12 10:32:57 · 333 阅读 · 0 评论 -
前端面经一之美团
前言：昨天面了某团一面，题目都是基础题，比较简单，但是我答得并不好，感觉还是理解的不够透彻，答案都说的不对，还在一本正经的解释...现在想想，面试小姐姐没笑话死我，哎。下面是问到的一些题目。1、盒模型问题（1）问： 标准盒模型下红色区域有多宽？<div style="width:100px;background:red;padding:10px;height:100px"></div>我当时说的100px，只知道content的宽应该是100px，但是实.原创 2021-05-11 11:20:43 · 1100 阅读 · 5 评论 -
输入url到页面加载全过程总结
前言：这个问题可以说是面试必问的问题了，而且涉及的知识点有好几个，如html解析、渲染、DNS解析等，也有很多延伸的问题，之前面试的时候，我只是简单的背了背答题流程，详细的并不是很了解，所以决定总结一下。一、主要过程输入地址，回车 浏览器解析URL，解析出域名host DNS域名解析：浏览器将域名转换成服务器ip地址，通过IP地址与服务器建立TCP连接（三次握手） 客户端向服务端发送HTTP请求，如果服务器返回以 301 之类的重定向，浏览器根据相应头中的 location 再次发送请.原创 2021-04-19 15:23:02 · 1105 阅读 · 0 评论 -
css中样式类型及属性的获取方式总结
1原创 2021-03-26 15:20:49 · 1805 阅读 · 0 评论 -
浏览器缓存策略之强缓存与协商缓存
前言：web中有些场景下很多内容是不需要更改的，如果每次请求都向服务器请求那些一段时间内不会变动的内容数据，会造成不必要的带宽浪费。有时候网络较差时，请求这些内容就需要花费很长时间来打开页面。因此通过浏览器的缓存机制，协同服务器让浏览器缓存那些不需要频繁变动的资源就可以有效地降低流量消耗和响应时间。一、什么是http缓存http缓存指的是：当客户端向服务器请求资源时，会先查...原创 2020-04-11 16:45:25 · 7797 阅读 · 1 评论 -
前端面经(四）
今天kdxf的复试，是微信视频面试，全程大概半个小时。没有怎么问技术问题，而是一些基本情况比较多，下面是问到的一些问题：1、自我介绍2、实习项目3、专业课程4、平时用的比较多的数据结构5、除了学校学习，还有什么学习途径6、jd实习是通过什么途径去的(我估计他是怀疑我的水平去不了jd才问的......)7、除了学习，在学校还有什么活动吗8、怎么接触的前端9、工作的...原创 2020-02-27 17:32:15 · 2046 阅读 · 0 评论 -
前端面经(三)
今天kdxf的一面，是微信语音面试的，全场大概45分钟，一开始说的视频，我还换上了衣服找了个光好的位置，emmmm..........面试的小哥哥听声音应该很年轻，全程交流无压力，下面是一些问题：1、自我介绍2、介绍项目，我在项目中写的cookie存储和canvas压缩图片简直是给自己挖坑了。。。。。。每次都会问到，canvas压缩是怎么实现的，cookie的一些属性，怎么设置过期时间...原创 2020-02-25 15:27:50 · 1492 阅读 · 0 评论 -
实现左右两边固定宽度，中间自适应的布局的几种方法
实现效果一、float实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta...原创 2020-02-24 11:52:36 · 3344 阅读 · 0 评论 -
前端面经(二)
今天xsf的电话一面 ，个人感觉面试难度不大，问的问题好多都是背的知识点或者经典面试题，项目上基本没问多少，但是感觉有点拘泥于概念了，下面是问到的一些问题：1、自我介绍2、经典页面布局，左右两侧宽度固定，中间部分自适应（当时只答了用flex）3、防抖和节流，防抖如何实现，答案请移步节流和防抖4、let、var区别5、promise的状态、一些方法6、css设置垂直水平居中...原创 2020-02-23 15:15:57 · 1014 阅读 · 0 评论 -
前端面经(一)
今天tx一面，是微信视频面的，面试官人很好，也不严厉，很放松，全程大概80分钟，整体感受，问的很结合实际，不是死知识点，也会从多个方向考核，比较灵活。首先是自我介绍，下面是问的一些问题：1、讲一个最熟悉的项目，担任的任务，拿到一个项目后的设计思想2、canvas压缩图片（简历中写到才问的）3、vue双向数据绑定原理，为什么用发布订阅模式、观察者模式的应用4、缓存机制5、http...原创 2020-02-21 18:58:03 · 804 阅读 · 0 评论 -
箭头函数
一、简介箭头函数是ES6标准新增的一种新的函数，简化了函数定义。箭头函数有两种格式:(1)只包含一个表达式x => x * 2;(2)包含多条语句x => { if (x > 0) { return x * x; } else { return - x * x; }}注：如果参数不是一个...原创 2020-02-21 10:34:10 · 856 阅读 · 0 评论 -
js之继承实现方法
js的继承方式有很多，本文主要介绍以下几种：构造函数继承、原型链继承、组合继承、es6中的class继承这四种。一、构造函数继承构造函数一般命名时首字母大写，用来区分于普通函数，内部使用的this对象来指向即将要生成的实例对象，使用New来生成实例对象。// 这是一个构造函数function Animal(name) { this.name = name; this.s...原创 2020-01-02 18:46:29 · 649 阅读 · 0 评论 -
JavaScript之创建函数参数数量可变且未知
这个问题其实考察的是arguments对象，函数参数实际上是被保存在一个被称为arguments的类似于数组的对象当中。MDN中是这样说的：arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。arguments对象不是一个Array。它类似于Array，但除了l...原创 2020-01-02 17:28:17 · 1047 阅读 · 0 评论 -
Ajax的js原生实现
一、Ajax简介Ajax全称是，Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，是现有技术集合成的一个方法。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。Ajax的工作原理相当于在用户和服务器之间加了—个中间层(...原创 2019-12-16 11:28:32 · 771 阅读 · 0 评论 -
.*和.*?的区别
.*是贪婪模式，.*?是懒惰模式，称非贪婪模式。话不多说，上代码：一、.*let a = 'aababaa';let re = /a.*b/;console.log(a.match(re)); //[ 'aabab', index: 0, input: 'aababaa', groups: undefined ]二、.*?let a = 'aababaa';let ...原创 2019-12-13 18:36:57 · 2529 阅读 · 0 评论 -
记一道简单的面试算法题
前言：面试某互联网公司时，上次就出了一道题，但是其实思路很简单，然后就让我在电脑上写，由于忘记了random的用法，问的面试官，然后写的时候循环判断相等的时候写错了，把判断写在了循环里边，还是面试官检查出来的！！其实仔细想想也不是不会，就是当时可能脑袋不太好用吧。。。。问题：实现一个抽奖算法，在1-100中随机抽取10个数字不重复思路：使用Math.random()即可以...原创 2019-12-13 11:55:17 · 631 阅读 · 0 评论 -
jQuery的链式调用
一、什么是链式？$('div').click(function () { $(this).find(".b").addClass("css");})上面代码实现的是在点击div后，找到div内的类名为class的dom节点，给他们添加名为css的class。二、jQuery怎么实现的链式？上源码：jQuery.fn.extend( { addClass: f...原创 2019-12-13 11:33:31 · 1549 阅读 · 0 评论 -
MVC与MVVM的理解
MVC,MVP,MVVM是三种常见的前端架构模式，通过分离关注点来改进代码组织方式。MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view都是相同的，不同的是MV之间的桥梁连接部分。本文是对https://www.kancloud.cn/lixianshengdezhanghao/interview/904696的一个总结。...原创 2019-12-10 11:29:06 · 917 阅读 · 0 评论 -
判断数组类型的方法
别看这个问题看似简单，面试真的经常问到，没有总结过得话一时间还有点想不起来！一、instanceofinstanceof只适用于对象类型的数据，基本类型会直接返回false，其实现原理是在原型链上查找某属性。let arr = [1, 2, 3];let a = arr instanceof Array;console.log(a); // true二、ES6中的isA...原创 2019-12-09 21:44:39 · 803 阅读 · 0 评论 -
js中的new()到底做了些什么？
在调用new的过程中会发生以下几件事：1、创建一个新对象let obj = {}; 2、新对象的_proto_属性指向构造函数的原型对象obj.__proto__ = Base.prototype;3、将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）Base.call(obj);4、执行构造函数内部的代码，将属性添加给person中的this对...原创 2019-10-29 21:02:00 · 2343 阅读 · 0 评论 -
浅谈Chrome V8引擎中的垃圾回收机制
文章转载自https://www.cnblogs.com/liangdaye/p/4654734.html垃圾回收器一、JavaScript的垃圾回收器JavaScript使用垃圾回收机制来自动管理内存。垃圾回收是一把双刃剑，其好处是可以大幅简化程序的内存管理代码，降低程序员的负担，减少因 长时间运转而带来的内存泄露问题。但使用了垃圾回收即意味着程序员将无法掌控内存。ECMAScr...转载 2019-12-09 11:39:47 · 745 阅读 · 0 评论 -
meta的使用
HTML meta 标签使用方法原文链接：https://blog.youkuaiyun.com/zhangank/article/details/94014629转载 2019-12-09 10:01:23 · 553 阅读 · 0 评论 -
BFC—块格式化上下文
一、定义MDN中是这样说的：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是block块盒子的布局过程发生的区域，也是浮动float元素与其他元素交互的区域。是不是看完之后，依然一脸懵逼.....反正我是（苦笑）。简单地说，BFC 就是某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素...原创 2019-12-06 22:18:22 · 696 阅读 · 0 评论 -
flex布局原理简介
前言：在面试过程中，我发现，flex布局经常被问道，但是其实我只是知道它都有些什么属性及怎么用，但是都没有真正去理解他是怎么实现的，被问到的时候就会觉得不专业，所以看了资料后，简要总结。一、是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，是W3C 提出的一种新型布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。顾名...原创 2019-12-05 19:44:21 · 4683 阅读 · 2 评论 -
浅谈正则表达式-js版
常见用法：常见用法 描述 \d 匹配数字 \w 匹配数字或者字母 + 至少一个 * 任意个（包括0） ? 0个或1个 ^ 行的开头 . 除换行符/n之外的任何单字符 $ 行的结尾 \s 匹配空格 {n} 匹配n个 {m，n} 匹配m-n个 A|B A或B个 常用场景...原创 2019-11-20 14:29:41 · 545 阅读 · 0 评论 -
JSONP简介
一、是什么在菜鸟教程中是这样说的，Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策...原创 2020-02-15 16:47:27 · 950 阅读 · 0 评论 -
LeetCode第70题：爬梯子
面试的时候遇到的一个问题，本来以为是一道算法题，当时眼前一蒙说的2的n次方，后来想了一下不太对，查了一下，才明白其实考的是数列，所以总结一下。问题：假设有一个梯子，梯子有n层，每次可以爬1层或者2层，求有多少种不同的爬梯方式？思路一：设 g(n) 为爬 n 阶的方法数，还差最后一步或两步，即将达到第 n 层有两种方法，爬一层或者爬两层，如果爬一阶，其方法数是g(n-1)，如果爬...原创 2019-11-09 17:19:50 · 846 阅读 · 0 评论