前端面试
文章平均质量分 70
前端面试,从基础到进阶,你要的全都有哦
材女的进击
这个作者很懒,什么都没留下…
展开
-
Js加法运算规则
强制类型转换规则。原创 2024-07-17 10:57:21 · 160 阅读 · 0 评论 -
【Angular中的HTTP请求】- HttpClient 详解
不同版本的Angular,以上代码位置行数不同,但是文件位置都是一样的,大家可以通过以上关键字搜索就能找到相关代码。注入时,处理程序实例将请求分派到链中的第一个拦截器,然后分派到第二个拦截器,第三个拦截器,依次分派,最终到达。操作符基于请求信息新建的一个单播的 Cold Observable (数据流,原始的数据就是请求信息)。方法对请求进行了一个链式的处理流程:主要包括不定数量的拦截器的处理加上最后的。被订阅的时候,请求先经过拦截器的处理,最后通过浏览器 HTTP API 发出。转载 2023-06-20 10:33:39 · 703 阅读 · 0 评论 -
Javascript 设计模式
设计模式原创 2023-03-08 14:39:52 · 250 阅读 · 0 评论 -
聊聊V8引擎的垃圾回收
前言我们知道,JavaScript之所以能在浏览器环境和NodeJS环境运行,都是因为有V8引擎在幕后保驾护航。从编译、内存分配、运行以及垃圾回收等整个过程,都离不开它。在写这篇文章之前,我也在网上看了很多博客,包括一些英文原版的内容,于是想通过这篇文章来做一个归纳整理,文中加入了我自己的思考,以及纯手工制作流程图~~希望这篇文章能帮到你,同时本文也会收录到我自己的个人网站。为什么要有垃圾回收在C语言和C++语言中,我们如果想要开辟一块堆内存的话,需要先计算需要内存的大小,然后自己通过m转载 2021-04-01 15:43:17 · 273 阅读 · 0 评论 -
面试官,不要再问我三次握手和四次挥手
三次握手和四次挥手是各个公司常见的考点,也具有一定的水平区分度,也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好,但是后面越回答越冒冷汗,最后就歇菜了。见过比较典型的面试场景是这样的:面试官:请介绍下三次握手求职者:第一次握手就是客户端给服务器端发送一个报文,第二次就是服务器收到报文之后,会应答一个报文给客户端,第三次握手就是客户端收到报文后再给服务器发送一个报文,三次握手就成功了。面试官:然后呢?求职者:这就是三次握手的过程,很简单的。面试官:。。。。。。(番外篇:一首凉凉转载 2021-04-01 15:19:40 · 106 阅读 · 0 评论 -
别再问我“输入URL到页面呈现”啦
第1篇: 能不能说一说浏览器缓存?缓存是性能优化中非常重要的一环,浏览器的缓存机制对开发也是非常重要的知识点。接下来以三个部分来把浏览器的缓存机制说清楚:强缓存协商缓存缓存位置强缓存浏览器中的缓存作用分为两种情况,一种是需要发送HTTP请求,一种是不需要发送。首先是检查强缓存,这个阶段不需要发送HTTP请求。如何来检查呢?通过相应的字段来进行,但是说起这个字段就有点门道了。在HTTP/1.0和HTTP/1.1当中,这个字段是不一样的。在早期,也就是HTTP/1.0时期,使用的是E...转载 2021-04-01 14:45:40 · 263 阅读 · 0 评论 -
JS实现继承的几种方式
说到继承,最容易想到的是ES6的extends,当然如果只回答这个肯定不合格,我们要从函数和原型链的角度上实现继承,下面我们一步步地、递进地实现一个合格的继承一. 原型链继承原型链继承的原理很简单,直接让子类的原型对象指向父类实例,当子类实例找不到对应的属性和方法时,就会往它的原型对象,也就是父类实例上找,从而实现对父类的属性和方法的继承// 父类function Parent() { this.name = '写代码像蔡徐抻'}// 父类的原型方法Parent.prototy转载 2021-03-31 15:11:49 · 127 阅读 · 0 评论 -
我终于弄懂了Promise
写在前面以前总是似懂非懂,这次总算把它弄了个清楚什么是PromiseES6 异步编程的一种解决方案,比传统的方案(回调函数和事件)更加的合理和强大好处 异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数promise可以解决异步的问题,本身不能说promise是异步的Promise特点对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、resolved(已成功)和rejected(已失败)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promis转载 2021-03-23 17:34:59 · 1276 阅读 · 1 评论 -
常用的前端JavaScript方法封装
1、输入一个值,返回其数据类型**function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) {&nbs转载 2021-03-23 16:43:44 · 145 阅读 · 0 评论 -
数据结构和算法
数据结构(一)之邂逅数据结构&算法数据结构(二)之数组结构数据结构(三)之栈结构数据结构(四)之队列结构数据结构(五)之链表结构数据结构(六)之双向链表数据结构(七)之集合结构数据结构(八)之字典结构数据结构(九)之哈希表理论数据结构(十)之哈希表实现数据结构(十一)之树结构数据结构(十二)之二叉搜索树数据结构(十三)之红黑树数据结构(十四)之图结构数据结构(十五)之图算法数据结构(十六)之简单排序数据结构(十七)之高级排序...转载 2021-02-07 15:01:24 · 113 阅读 · 0 评论 -
一张图搞懂vue的响应式原理
详解见 :https://www.bilibili.com/video/BV15741177Eh?p=232&spm_id_from=pageDriver原创 2021-02-04 15:45:51 · 120 阅读 · 0 评论 -
一篇搞定前端高频手撕算法题(36道)
一、冒泡排序冒泡排序的思路:遍历数组,然后将最大数沉到最底部;时间复杂度:O(N^2);空间复杂度:O(1)function BubbleSort(arr) { if(arr == null || arr.length <= 0){ return []; } var len = arr.length; for(var end = len - 1; end > 0; end--){ for(var i = 0; i <.转载 2020-12-03 17:14:42 · 474 阅读 · 0 评论 -
实现Tab页之间通信的方式
5 种方式:localstoragewebworkerweb-socketcookiepostMessagelocalstorage先看效果:test3.gif代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi转载 2020-08-26 11:42:31 · 868 阅读 · 0 评论 -
使用 RxJS 处理多个 Http 请求
阅读 Angular 6/RxJS 最新教程,请访问前端修仙之路有时候进入某个页面时,我们需要从多个 API 地址获取数据然后进行显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。基础知识mergeMapmergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。合并 Observable 对象 ( jsBin)const sourc.转载 2020-08-23 21:03:36 · 2244 阅读 · 0 评论 -
详解HTTP和HTTPS协议
一、前言:先来观察这两张图,第一张访问域名http://www.12306.cn,谷歌浏览器提示不安全链接,第二张是https://kyfw.12306.cn/otn/regist/init,浏览器显示安全,为什么会这样子呢?2017年1月发布的Chrome 56浏览器开始把收集密码或信用卡数据的HTTP页面标记为“不安全”,若用户使用2017年10月推出的Chrome 62,带有输入数据的HTTP页面和所有以无痕模式浏览的HTTP页面都会被标记为“不安全”,此外,苹果公司强制所有iOS App在2.转载 2020-08-13 15:01:00 · 217 阅读 · 0 评论 -
前端面试题 -- webpack
前言随着前端的不断发展,现代前端开发的复杂度和规模越来越庞大。工程化的思想催生了很多流行框架的进程,作为现在最流行的前端构建工具--webpack,很多面试、工作场景中都会出现了它的身影。所以对于现在的前端来说,了解并能够使用webpack,无论对个人技能或者职场求职来说,都是一种有力的提升如果文章中有出现纰漏、错误之处,还请看到的小伙伴留言指正,先行谢过以下 ↓1. 对webpack的了解官方文档本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module.转载 2020-08-05 16:10:54 · 1407 阅读 · 0 评论 -
Angular的多种数据绑定方式
Angular 提供了多种数据绑定方式。绑定类型可以分为三类,按数据流的方向分为: 从数据源到视图 从视图到数据源 双向:视图到数据源到视图 绑定类型 语法 分类 插值 属性 Attribute CSS 类 样式 {{expression}}[target]="expression"bind-target="expression"原创 2020-08-05 15:04:28 · 1524 阅读 · 0 评论 -
浅谈事件冒泡与事件捕获
事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。<div id="outer"> <p id="inner">Click me!</p></div>上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢?为了解决这个问题微软和网景提出了两种几乎完全相反的概念。事件冒泡微软提出了名为事件冒.转载 2020-08-03 15:47:02 · 200 阅读 · 0 评论 -
JS-面向对象
了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装、继承、多态,但是对于这三个词具体可能不太了解。对于前端来讲接触最多的可能就是封装与继承,对于多态来说可能就不是那么了解了。封装在说封装之先了解一下封装到底是什么?什么是封装封装:将对象运行所需的资源封装在程序对象中——基本上,是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的,只要做就可以了。”对象可以看作是一个自我包含的原子。对象接口包括了公共的.转载 2020-08-03 14:14:43 · 1427 阅读 · 0 评论 -
Angular 常用拦截器
Http拦截器就是拦截发出的请求,对其进行统一添加额外处理,然后放行;对响应进行拦截并作出业务上的判断,决定是否给与返回。常见拦截器AuthInterceptor 自定义请求头,如 token 之类// AuthInterceptor.tsimport { Injectable } from "@angular/core";import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from "@angular/...转载 2020-07-29 17:49:25 · 1042 阅读 · 0 评论 -
前端面试题总结(part 2):CSS部分
转自:https://github.com/qiu-deqing/FE-interview1. CSS选择器有哪些?*通用选择器:选择所有元素 #X id选择器 .X 类选择器 X Y后代选择器:选择满足X选择器的后代节点中满足Y选择器的元素 X 元素选择器:选择所有标签为X的元素 :link :visited :focus :hover :active ...转载 2019-05-08 18:08:29 · 515 阅读 · 0 评论 -
前端面试题总结(part 1):$HTML , HTTP , web综合问题
1.前端需要注意哪些SEO(搜索引擎的优化)合理的title、description、keywords: 搜索对这三项的权重逐个减小。title:强调重点,重要关键词出现不超过2次,而且要靠前,不同页面的title要不同;description: 高度概括页面内容,长度合适,不要过度堆砌关键词,不同页面的description要有所不同;keywords: 列举出重要关键词即可 (desc...转载 2019-05-07 17:29:53 · 534 阅读 · 0 评论 -
前端面试题总结(part 3): javascript 概念部分
1. DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素在源文件中设置的属性 e.propName通常是在HTML文档中访问特定元素的特性,浏览器解析元素后生成对应对象(如a标签生成HTMLAnchorElement),这些对象的特性会...转载 2019-05-09 16:15:57 · 270 阅读 · 0 评论 -
前端面试总结(part 4): javascript编程部分
请用代码写出(今天是星期x)其中x表示当天是星期几,如果当天是星期一,输出应该是"今天是星期一"let weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];let date = new Date();console.log('今天是'+ weekday[date.getDay()]);下面这段代码想要循环延时输出结果0 1 2 ...转载 2019-05-13 16:21:55 · 129 阅读 · 0 评论 -
js高级面试技巧(不定期更新)
目录1. ES62. 原型3. 异步4. 虚拟DOM 和 diff 算法1. ES6题目:ES6模块化如何使用,开发环境如何打包 class和普通构造函数有何区别 promise的基本使用和原理 总结一些es6的常用功能模块化的基本语法//export// util1.jsexport default { a:100}//...原创 2019-09-05 15:31:05 · 230 阅读 · 0 评论 -
web 前端性能优化总结(不定期更新)
目录1. 资源合并与压缩2. 图片相关的优化3. css和js的装载与执行4. 懒加载与预加载5. 重绘与回流6. 浏览器存储7. 缓存1. 资源合并与压缩http请求过程及潜在的性能优化点减少http请求的数量 减少请求的大小HTML压缩HTML代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格、制...转载 2019-09-25 13:59:10 · 315 阅读 · 0 评论 -
Angular2+ 面试题集锦
1. 生命周期钩子生命周期的顺序,见下图:ngOnChanges:当组件数据绑定的输入属性发生变化是触发,该方法接收一个SimpleChanges对象,包括当前值和上一个属性值。首次调用一定发生在ngOnInit前,值得注意的是该方法仅限于对象的引用发生变化时才会触发。 ngOninit:初始化指令或组件,在angular第一次显示展示组件的绑定属性后调用,该方法只会调用一次 ng...原创 2019-10-28 18:01:25 · 8469 阅读 · 0 评论 -
js基础面试技巧(不定期更新)
1. 变量类型和计算2. 原型和原型链3. 作用域和闭包4. 异步和单线程5. 其他知识6.JS-Web-API7. 开发环境8. 运行环境1. 变量类型和计算值类型 :boolean 、number、string、undefined 。 可以通过typeof区分出来 。 栈存储引用类型:对象、数组、函数 。 堆存储 通过typeof区分不出来...原创 2019-08-23 14:13:03 · 246 阅读 · 0 评论 -
JavaScript 题库
1. 输出是什么?const shape = { radius: 10, diameter() { return this.radius * 2 }, perimeter: () => 2 * Math.PI * this.radius}shape.diameter()shape.perimeter()答案: 20andNaN注意diame...原创 2019-10-31 17:54:46 · 1299 阅读 · 1 评论 -
HTML CSS 面试题解(不定期更新)
1. HTML基础强化HTML重要属性a [href,target]img [src,alt]table td [colspan,rowspan]form[target,method,enctype]input[type,value]button[type]select>option[value]label[for]HTML语义化标签代码结构清晰,易于阅读,像是...原创 2019-09-18 16:44:12 · 384 阅读 · 0 评论 -
Web前端实现瀑布流的几种方法
前端实现瀑布流的方法很多,其中最简单的就是用CSS实现,其次是通过jQuery实现,最麻烦的就是js,那么就从最麻烦的开始吧不管用哪种方法去实现瀑布流效果,html文件里的写法都是相同的,特别是body里的写法,简直是一毛一样的。先把html里的内容粘贴如下:html文件1.js实现瀑布流效果不管是什么语言,实现瀑布流效果的基本思路都是一样的,具体的我就不说了,只聊干货,上代码。下面看下CSS里面的处理,还是直接粘贴代码如下:css文件基本的处理搞完了,下面就是最最重要的js处理了。转载 2020-05-21 15:19:56 · 1100 阅读 · 0 评论 -
浅谈web前端节流和防抖
详谈js防抖和节流1. 防抖(debounce)1.1 什么是防抖1.2 应用场景1.3 实现2.节流(throttle)2.1 什么是节流2.2 应用场景2.3 实现3. 小结本文会分别介绍什么是防抖和节流,它们的应用场景,和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。但二者应对的业务需求不一样,所以实现的原理也不一样,下面具体来看看吧。1. 防抖(debou.原创 2020-05-21 18:45:02 · 903 阅读 · 0 评论 -
前端常见跨域解决方案
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链3.) 脚本请求: js发起的ajax请求、do.转载 2020-06-01 15:54:49 · 351 阅读 · 0 评论 -
大厂常见前端面试题
https://www.bilibili.com/video/BV1ek4y1r7GT文章目录day01 css31.标签语义化2.盒子水平垂直居中3.盒模型标准4.几大经典布局--左右固定、中间自适应--移动端响应式布局day 02 js1....转载 2020-07-14 13:53:49 · 989 阅读 · 0 评论 -
彻底弄懂 JavaScript 执行机制
这一次,彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。因为javascript是一门单线程语言,所以我们可以得出结论:javascript是按照语句出现的顺序执行的看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,转载 2020-07-14 14:37:06 · 169 阅读 · 0 评论 -
前端面试题加更
1. 检测数组的几种方式2. ajax 请求的多种case ,使用observable 或promise ,从而衍生出二者的区别 以及observable的几种操作符,以及对应的一些使用场景3.angular双向数据绑定的底层实现原理,用原生js实现4.手写new5.冒泡 插入 快速排序6.apply和call的区别7.箭头函数和普通函数的区别8. js实现继承的几种方法9. js 创建对象的几种方式...原创 2020-07-14 16:23:54 · 184 阅读 · 0 评论