前端面试积累
智慧2021
这个作者很懒,什么都没留下…
展开
-
git gitignore忽略文件笔记
1 首先,编辑.gitignore文件。2 然后如果是单个文件,可以使用如下命令从仓库中删除:git rm --cached logs/xx.log如果是整个目录:git rm --cached -r logs如果文件很多,那么直接git rm --cached -r .如果提示某个文件无法忽略,可以添加-f参数强制忽略。git rm -f --cached logs/xx.log3 然后git add .git commit -m “Update .gitignor原创 2022-04-22 09:52:08 · 149 阅读 · 0 评论 -
webpack的构建流程
webpack构建流程:1.初始化流程,2 编译构建流程,3 输出 流程1.运行流程webpack的运行流程是一个串行的过程 。它的工作流程就是将各个插件串联起来。在运行过程 中会广播事件,插件只需要监听他们所关心的事件,就能加入到这条webPack机制中,去改变webpack的动作,使得整个系统扩展性良好 。从启动到结束会依次执行三大步骤:初始化流程:从配置文件和shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数编译构建流程:从entery出发, 针对 每个m转载 2022-02-14 11:00:59 · 854 阅读 · 0 评论 -
js:展开运算符,set,三元,一个问号,两个问号
1.展开运算符。它允许对数组或字符串等迭代符进行扩展,这对于添加新的值是非常有用的。let arr = [1,2,3]let newArr = [...arr, 3,4]let obj = [{name:'wang'}]let newObj = [...obj, {name:'zhihui'}]set Objectset对象是javascript中一种新的对象类型,可以用来创建没有重复的数组。当你拥有一个唯一值的列表时,这有用。let arr = ['a', 'b', 'a']let转载 2022-02-08 14:32:53 · 604 阅读 · 0 评论 -
每天进步一点点
原创 2022-01-05 17:12:13 · 247 阅读 · 0 评论 -
Object.assign和JSON.parse(JSON.stringify())的区别
浅拷贝: Object.assign()深拷贝: JSON.parse(JSON.stringify())什么是浅拷贝?对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变。什么是深拷贝?深拷贝是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。若对象是基础数据类型。此时 Object.assign()可实现深拷贝,和JSON.转载 2021-11-02 09:54:18 · 1231 阅读 · 0 评论 -
(function (window, document, undefined) {})(window, document)的真正含义
IIFE(即时调用的函数表达式)(function (window, document, undefined) { // })(window, document);JavaScript具有函数作用域,因此首先创建了一些需要的“私有范围”。例如:(function (window, document, undefined) { var name = 'Todd';})(window, document);console.log(name); //name is not defined,转载 2021-09-24 14:12:54 · 314 阅读 · 0 评论 -
面试资料积累JS-实现图片懒加载的思路
实现方案1.在img元素时,自定义一个属性data-src,用于存放图片的地址;2.获取屏幕可视区域的尺寸。3.获取元素到窗口边缘的距离。4.判断元素时候在可视区域内,在则将data-src的值赋给src,否则,不执行其他操作;实质:当图片在可视区域内时,才加载,否则不加载;也可以给默认的图片点位。用到的api:IntersectionObserver 它提供了一种异步观察目标元素与顶级文档viewport的交集变化方法window.requestIdleCallback()方法将在浏览器的原创 2021-06-04 15:56:04 · 122 阅读 · 0 评论 -
css实现多行文本展开收起
多行文本展开收起是一个很小常见的交互:这一类布局和交互难点主要有以下几点:位于多行文本右下角的展开收起按钮展开和收起的两种状态的切换当文本不超过指定行数时,不显示展开收起按钮说实话,之前单独看这个布局时,即使借助javascript也不是一件容易的事情,需要计算文字宽度动态截取文本,vue-clamp这是这么做的,更别说下面的交互和判断逻辑了,不过经过我一番琢磨,其实纯css也能完美实现的,下面来看看如何实现 的吧。一、位于右下角的展开收起按钮(仅兼容chrome, 无点击效果)<转载 2021-06-01 11:03:17 · 740 阅读 · 0 评论 -
面试积累-论心述
本文中的4个面试问题的示例答案将帮助软件工程师顺利通过技术面试。软件工程师的面试是一曲悲喜剧。开发人员在面试中失败的主要原因是因为他们忽略了人的因素。他们为算法面试作了很多准备,然而在面试中他们并没有表现出他们对算法的热情或者乐在其中。简单的人与人对话的压力下让软件工程师非常紧张,他们无法将自己真实的一面在面试中完全展现出来,导致面试中的这些“伪”技术对话令人非常乏味,软件工程师真正的创造能力无法在面试中被发掘出来。软件工程师在面试中表现出来的期待和焦虑常常让他们看起来像强光照射下的惊慌失措的小鹿。当转载 2021-05-27 17:30:56 · 88 阅读 · 0 评论 -
前端面试积累JS-水印方案
一、问题背景为了防止信息泄露或知识产权被侵犯,在web世界里,对于页面和图片等增加水印处理是十分有必要的,水印的添加根据环境可分为两大类,前端浏览器环境添加和后端服务器环境添加,简单对比一下这两种方式的特点:前端浏览器添加水印:减轻服务器端压力,快速反应安全系统较低,对于掌握一定前端知识的人来说可以通过各种操作跳过水印获取到源文件(防君子不防小人,防外行不防内行)适用场景:资源不跟某一个单独的用户绑定,而是一份资源,多个用户查看,需要在每一个用户查看 的时候添加用户特有的水印,多用于某些机密文档转载 2021-05-27 09:28:46 · 310 阅读 · 0 评论 -
前端面试积累JS-git命令
原创 2021-05-26 09:21:20 · 116 阅读 · 0 评论 -
前端面试积累JS-单点登录的原理(二)
什么是单点登录?单点登录全称Single Sign On (以下简称SSO),是指在多系统应用群中登录一个系统,便可在其他所有系统中得到授权而无需再次登录,包括单点登录与单点注销两部分。1.相比于单系统登录,sso需要一个独立的认证中心,只有认证中心能接受用户的用户名密码等安全信息,其他系统不提供登录入口 ,只接受认证中心的间接授权。间接授权通过令牌实现,sso认证中心验证用户的用户名密码没有问题,创建授权令牌,在接下来的跳转过程中,授权令牌作为参数发送给各个子系统,子系统拿到令牌,即得到了授权,可心借原创 2021-05-25 15:25:32 · 405 阅读 · 0 评论 -
前端面试积累JS-单点登录的原理(一)
在介绍单点登录之前,先了解一下单系统登录机制一、单系统登录机制1.http无状态协议2.会话机制3.登录状态1.http无状态协议web应用采用borwser/server架构,http作为通信协议。http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关联,这个过程用图说明,三次请求/响应之间无任何联系但这也同时意味着,任何用户都能通过浏览器访问服务器资源,如果想保护服务器的某些资源,必须限制浏览器请求,要限制浏览器请求,必须鉴别浏览器请求,响应合法请求,忽略原创 2021-05-24 14:55:47 · 1059 阅读 · 1 评论 -
面试资料积累JS-为什么页面需要做优化?并写出常用优化方案
一.为什么需要做优化页面性能的问题对用户体验的影响非常大,加载时间每多一秒,你就会流失7%的用户,在正常页面的情况下,若页面加载时间超过8秒时间,那么你可能损失85%以上的用户。为了更好的用户体验更好的业务支持更好的代码质量我们需要对页面进行优化二.实现方案页面进行优化,其实有两种优化方式1.软件优化(前端优化)2.硬件优化(后商优化)1.软件优化:html优化布局优化,减少空格,不用table布局,尽量不用iframe标签;html优化尽量减少需要发送的http请求css优化 可以原创 2021-05-19 09:55:24 · 188 阅读 · 0 评论 -
面试资料积累JS-Array是object类型嘛
Array:var a = []a instanceof Array输出: Arraya.constructor == Array输出: true去a的原型链上看看到底继承了什么东西:a.__proto__.constructor输出 : f Arry(){[native code]}a.__protp__.__proto__.constructor输出: f Ojbect(){[native code]}a.__proto__.__proto__.__proto__输出n原创 2021-05-17 10:42:41 · 246 阅读 · 0 评论 -
面试资料积累JS-全部数据类型,基本数据类型和引用数据类型的区别
一、javascript全部数据类型1.内置类型1.空值null2.未定义 undefind3.布尔值boolean4.数字Number5.字符串String6. 对象Object7. 符号symbol8. 长整型 Bigint基本数据类型undefind, null,number, boolean, string, symbol基本数据类型是按值访问的。就是说我们可以操作保存在变量中的实际值。基本数据类型的值是不可变的。基本数据类型不可以添加属性和方法基本数据类型的原创 2021-05-14 11:28:39 · 145 阅读 · 0 评论 -
面试资料积累JS-是什么范式语言
什么是范式编程范型、编程范式,或程序设计法(Programming paradigm)(范即模范,典范之意,范式即模式、方法),是一类典型的编程风格,是指从事软件工程的一类典型的风格(可以对照方法学)。如函数式编程、过程式编程,面向对象编程,指令式编程等等为不同的编程范型。编程型提供了程序员对程序执行的技法。例如:在面向对象编程中,程序员认为程序是一第列相互作用的对象,而在函数式编程中一个程序会被看作是一个无状态的函数计算的序列。何为javascript...原创 2021-05-12 14:18:26 · 236 阅读 · 0 评论 -
面试资料积累JS-闭包(二)
闭包表现形式闭包使用的四个场景1.返回一个函数2.在定时器事件监听,ajax请求,web workers或者任何异步中,只要使用了回调函数,实际上就是在使用闭包。// 定时器setTimeout(function handler(){ console.log('1');},1000);// 事件监听$('#app').click(function(){ console.log('Event Listener');});3.作为函数参数传递的形式。var a = 1;func原创 2021-05-08 09:35:08 · 80 阅读 · 0 评论 -
面试资料积累JS-闭包(一)
前奏:作用域:1.全局作用域var globalName = 'global';function getName() { console.log(globalName) // global var name = 'inner' console.log(name) // inner} getName();console.log(name); // console.log(globalName); //globalfunction setName(){ vName = 's原创 2021-05-07 10:53:12 · 82 阅读 · 0 评论 -
放松一下,来道计算题
alert(a)a()var a = 3function a(){alert(10)}alert(a)a=6a()解析:function ,var 均有变量提升,实际编译后为:function a(){alert(10)}var a;alert(a)a()a=3alert(a)a=6a()如果存在函数声明和变量声明(仅仅是声明,还没被赋值),而且变量名跟函数名是相同的,那么,它们都会被提示到外部作用域的开头,但是,函数的优先级更高,所以,变量的值会被函数覆盖掉。遇到原创 2021-04-30 09:32:15 · 107 阅读 · 0 评论 -
面试资料积累JS-jsonp的工作原理
1.问题背景:由于浏览器同源策略(同一个协议,同一个域名,同一端口号,当其中一个不满足的时候,请求就会发生跨域)的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案,举个简单的例子:http://www.abc.com:3000 到https://www.abc.com:3000请求会出现跨域 域名,端口号相同,但协议不同http://www.abc.com:3000 至http://www.abc.com:3001请求会出现跨域 域名,协议相同,但端口号原创 2021-04-29 09:17:51 · 125 阅读 · 0 评论 -
面试资料积累JS-模块化(二)
三、AMD异步加载模块(Asynchronous Module Definition)它是一个在浏览器端模块化开发的规范,不是原生js的规范,使用AMD规范进行页面开发需要用到对应的函数库,requireJS。AMD规范采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。使用require.js实现AMD规范的模块化:用require.config()指定引用路径等,用defind()定义模块, 用requi原创 2021-04-28 10:54:26 · 49 阅读 · 0 评论 -
面试资料积累JS-模块化(一)
目前流行的js模块化规范有commonJS, AMD, CMD, 以及ES6的模块系统一、commonJSjs没有完善的模块系统,标准库较少,缺少包管理工具,伴随着Nodejs的兴起,能让js在任何地方运行。特别是服务端,也达到了具备开发大型项目的能力,所以commonjs营运而生。node.js是commonjs规范的主要实践者。它有四个重要的环境变量为模块化的实现提供支持:moudle, exports, require, global.实际使用中,用module.exports定义当前模块对原创 2021-04-28 10:12:13 · 97 阅读 · 0 评论 -
面试资料积累JS-防抖,节流
原理:防抖:在事件被触发N秒后再执行回调,如果在这N秒内又被触发,则重新计时。节流:规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数。只有一次生效。适用场景:防抖: 按钮提交(防止多次提交按钮,只执行最后提交的一次),搜索框联想(防止联想发送请求,只发送最后一次输入)节流:拖拽(固定时间内只执行一次,防止越高频次触发位置变动)、缩放场景(监控浏览器resize)代码实现://防抖function debounce(func, wait){ let timeou原创 2021-04-27 09:29:34 · 57 阅读 · 0 评论 -
面试资料积累css-超出省略怎么写, 三行超出省略怎么写
一行省略:.line1{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}三行:.line3{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;word-break:break-all;}-webkit-line-clamp 是一个不规范的属性原创 2021-04-27 09:27:57 · 104 阅读 · 0 评论 -
面试资料积累--计算题,提神醒脑
今天来一道计算题吧var a={k1:1}var b = aa.k3=a={k2:2}console.log(a)console.log(b)a输出: {k2:2}b输出: {k1:1,k3:{k2:2}}解析重点:1.点的优先级大于等号2.对象以指针的形式进行存储,每个新对象都是一份新的存储地址分析:第一步: a = {k1:1}第二步: b = {k1:1}因为a,b都指向同一个地址第二步:先执行点 a.k3 即a = {k1:1, k3:undefined},又因为原创 2021-04-27 09:26:06 · 192 阅读 · 0 评论 -
面试资料积累css-动画
css3增加了两个方式:transition, animation, 可实现动画。那在这之前css是使用hover伪类的方式,另外一种是使用js改变css的属性方式。hover:.div{width:100px;height:100px;background:red}.div:hover{width:100px;height:100px;background:yellow}但是这种实现方式有个问题,就是元素的状态会立即发生变化,没有一个过渡的过程,css3的transition就很好的解决了这个原创 2021-04-27 09:20:28 · 66 阅读 · 0 评论 -
面试资料积累css-预处理器 less有什么好处。
css预处理器为css增加编程特性的拓展语言,可以使用变量,简单逻辑判断,函数等基本编程技巧。 css预处理器编译输出还是标准的css样式 less,sass都是动态的样式语言,是css预处理器,css上的一种抽象层。他们是一种特殊的语法语言而编译成css的。 less变量符号是@.sass变量符号是$预处理器解决了哪些痛点css语法不够强大。因为无法嵌套导致有很多重复的选择器 没有变量和合理的样式利用机制,导致逻辑上相关的属性值只能以字面量的形式重复输出,难以维护。常用规范变量,原创 2021-04-27 09:17:46 · 337 阅读 · 0 评论 -
面试资料积累css-flex布局,如何把八个元素分两行摆放
父盒子排列方式align-content为flex-start, 从起点开始放置盒子。通过flex-flow设置换行(row wrap)子盒子设置,设置Flex:0 0 25%;flex属性是flex-grow, flex-shrink, flex-basis的简写。默认值 :0 1 autoflex-grow:0 不放大flex-shrink:0 不缩小flex-basis:项目占据主轴的空间html<div class="parent"> <div class="chil原创 2021-04-25 09:27:12 · 2506 阅读 · 0 评论 -
面试资料积累css-居中为什么使用transform ,而不使用marginLeft
因为transfrom是独立的层,而margin会导致重绘和回流transform:是通过创建一个renderLayers(渲染)合成层,拥有独立的graphicsLayers(绘图层)。每一个绘图层都有一个绘图区域,其对应的渲染会绘制进绘图区域,合成器(compositor)最终会负责将由绘图区域输出的位图合并成最终屏幕展示图案。解释一下什么样的条件是独立的合成层。1.3D或者perspective transform的css属性层2. video元素的层3.canvas元素的层4. f原创 2021-04-25 09:25:59 · 496 阅读 · 0 评论 -
面试资料积累css-标签的渲染顺序
1.优先级浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值,优先级是基于不同种类选择器组成的匹配规则。优先级就是分配给指定的css声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值,决定。而当优先级与多个css声明的任意一个声明优先级相等时,css中最后声明将会被应用到元素上。 当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的css规则总是会接管覆盖该元素从祖先元素继承而来的规则。选择器类型类型选择器h1, div伪元素:原创 2021-04-25 09:24:54 · 214 阅读 · 0 评论 -
面试资料积累css-单位
css有几个不同的单位用于表示长度。长度由一个数字和单位组成如10px,2rem等数字与单位之间不能出现空格。如果长度值为0,则可以省略单位。对于一些css属性,长度可以是负数。有两种类型的长度单位:相对和绝对1.相对长度em, ex, ch, rem, vw, vh, vmin, vmax, %em:它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位,一般浏览器字体大小默认为16px, 则2em=32px;ex:依赖于英文字母小x的高度 ch:数字0的高度 rem:根元素的fo原创 2021-04-25 09:23:38 · 72 阅读 · 0 评论 -
面试资料积累css-link @import区别
1.使用方法链接样式<head><link rel="stylesheet" type= "text/css" href="style.css"></head>导入样式<style> @import url(style.css)</style>a.css @import url(style.css)*{margin:0;padding:0;}2.区别1.link是XHTML的标签,除了加载css之外,还可以定义RS原创 2021-04-25 09:22:10 · 58 阅读 · 0 评论 -
面试资料积累css-伪类与伪元素
1.伪类,pseudo-classes其核心就是用来选择DOM树之外的信息,不能够被普通选择器选择的文档之外的元素,用来添加一些选择器的特殊效果。 :hover,:active, :visited :link :first-child由于状态的变化是非静态的,所以元素到达一个特定状态时,可以得到一个伪类的样式。当状态改变时, 它会又失去这个样式。由此可以看出它的功能和class类似,但是它是基于文档之外的抽象,所以叫伪类。伪元素pesudo-elementsDOM树没有定义的上虚拟元素原创 2021-04-25 09:20:32 · 140 阅读 · 0 评论 -
面试资料积累css-画扇形
css画出一个扇形<div class="sector1"></div>.sector1{ width:200px; height:200px; background:yellow; border-radius: 200px 0 0 0;}主要点在于border-radius,四个值对应的弧度是:左上,右上,右下,左下。这个是卡顶点在左上,左下,右上,右下,右上角的扇形.sector2{ width:0; height:0; border-style:s原创 2021-04-25 09:18:46 · 110 阅读 · 0 评论 -
面试资料积累css-画三角形
ps补20210408的知识积累css画一个三角形<div class="triangle"></div>//正三角.triangle{width:0;height:0;border-style:solid;border-width:0 25px 40px 25px;border-color: transparent transparent #f00 transparent;}特点:顶点的方向上肯定是0,对面边边是最长的值40px,其他两边相等即可。颜色的特原创 2021-04-25 09:06:22 · 78 阅读 · 0 评论 -
面试资料积累css-移动端开发注意事项
1.添加禁止浏览器主动缩放功能2移动端字体放大问题3.移动端1px的问题如何解决以上问题呢?其一:涉及到网页开发历史遗留问题,最开始的手机浏览器网页是直接访问电脑网页或访问专门为诺基亚手机开发的wap页面,对于电脑网页由于手机分辨率太低,浏览器会使用缩放页面的方式来展示原页面,这个也是为什么在手机页面上直接使用document.documentElement.clientWidth获取到的值为980(之所以是这个值,因为那时候的网页一般宽度都是在980px左右),所以为了避免浏览器的自动缩放,需要原创 2021-04-07 09:11:50 · 127 阅读 · 0 评论 -
面试资料积累css-响应式布局
Responsive design意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。传统的开发方式是PC端开发一套,手机端开发一套,而使用响应式布局只要开发一套就够了,缺点就是css比较重。实现方案有:媒体查询、百分比布局、rem布局、视口单位、图片响应式方案一:媒体查询:css3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,而面会根据浏览器的宽度和高度来重新渲染页面。屏幕大小分割点的参考值原创 2021-04-07 09:01:47 · 138 阅读 · 0 评论 -
面试资料积累css-重排,重绘
重排?当我们改变了一个元素的尺寸的位置属性时,会重新进行样式计算(computed style)布局(layout)绘制(paint)以及后面的所有流程,这种行为叫重排重绘?当改变某个元素的颜色属性时不会重新触发布局,但还是会触发样式计算和绘制,这就是重绘。综上,我们可以发现重排和重绘都会占用主线程,还有JS也会运行在主线程,所以就是会出现抢占执行时间的问题,如果你写了一个不煌导致重排和重绘的动画,浏览器则需要在每一帧都运行样式计算布局和绘制的操作。什么情况下触发?1.页面首次进入时渲染。原创 2021-04-02 09:39:56 · 325 阅读 · 1 评论 -
面试资料积累css-清除浮动
清除浮动可以理解为清除浮动所产生的影响。当元素浮动时也就是为当前的元素创建了块格式化上下文,简称BFC.会对周围的元素或者 父元素在布局上产生一定的影响。比如父元素因无法自动计算高度而产生的高度塌陷,也就是常见的子元素溢出父元素。或者因脱离文档流而使兄弟元素错位等。要清除浮动产生的影响,其实就是在解决这两方面的问题。方法就是可以设计 父元素高度,利用BFC, 使用自带属性clear进行清除。方法一:设置父元素的高度设置父元素的高度主要解决的就是其塌陷的问题,其内部元素浮动影响并未彻底清除,且需要进行原创 2021-04-01 09:27:14 · 64 阅读 · 0 评论