- 博客(72)
- 收藏
- 关注
RSS订阅原创 面试题汇总
vue中的data为什么是一个函数在Vue中，data选项是一个函数，用于定义组件的初始数据。将data作为函数的主要原因是为了使每个实例都能够维护其自己的数据副本，而不是共享相同的数据对象。当Vue实例化一个组件时，它会调用该组件的构造函数并创建一个新的Vue实例。在创建实例时，Vue会执行data函数并将其返回值作为实例的初始数据对象。由于data函数会在每个实例化时都会被调用，所以每个实例都会有自己独立的数据对象。
2023-03-29 10:14:40
411
原创 前端基础算法
斐波那契数列（Fibonacci sequence），指的是这样一个数列：1、1、2、3、5、8、13、21、34、……在数学上，斐波那契数列以如下被以递推的方法定义：F(1)=1，F(2)=1, F(n)=F(n - 1)+F(n - 2)（n ≥ 3，n ∈ N*）它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。数列的第n项（除第1项和第2项）是第n-1项与第n-2项的和。对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；
2023-03-22 10:53:10
298
原创 TS常见面试题
unknown类型可以被赋值给任何类型，但是只有any类型可以被赋值给unknown类型，因为any类型包含了所有类型，而unknown类型则不包含任何类型。JavaScript 是一种动态类型的语言，即变量的类型是在运行时确定的，而 TypeScript 在编译时就能够确定变量的类型，从而可以在开发过程中检测出类型错误，提高代码的可靠性。any类型的变量可以被赋予任何值，它可以调用任何方法或属性，TypeScript编译器不会检查它的类型和属性的合法性，所以使用any类型会降低代码的类型安全性。
2023-03-16 11:18:35
1897
原创 Vue、React重点大全
1、生命周期vue2:总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。2、MVVMmvvm是一种设计思想。Model代表数据模型，可以在model中定义数据修改和操作的业务逻辑;view表示ui组件，负责将数据模型转换为ui展现出来，它做的是数据绑定的声明、 指令的声明、 事件绑定的声明。;而viewModel是一个同步view和model的对象。在mvvm框架中，view和model之间没有直接的关系，它们是通过viewModel来进行交互的。
2023-01-09 13:46:29
953
3
原创 前端工程化
如果可以分出出更小的bundle，以及控制资源加载优先级，从而优化加载性能。简单来说，Sourcemap 就是一个信息文件，它里面存储着代码转换前后的对应位置信息，也就是转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射， Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，debug 困难的问题。这种技术的思路是：通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性。
2022-09-07 11:40:07
504
原创 ES6及JS基础总结
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。它有三种状态，pending（进行中）、fulfilled（已成功）、reject（已失败）。注：resolved是指完成状态，结果可能包含fulfilled和rejected。...
2022-08-18 17:44:30
937
原创 前端项目图片放项目内和服务器的区别
1、放本地会增加包，增加资源加载时间、白屏时间2、图片服务器会提供各种功能和优化，有针对性的缓存方案，减少带宽成本，提高访问速度3、上传图片服务器后在项目内引入方便，放本地weekpack打包后路径会改变有风险4、分担web服务器的负载，提高服务的稳定性总的来说，放在专门的图片服务器好处还是很多的，但如果是小而不多的图片放本地也无妨。......
2022-06-21 10:12:50
976
原创 超全http面试重点总结
HTTP 协议一般指 HTTP（超文本传输协议）。是一种用于分布式、协作式和超媒体信息系统的应用层协议，是因特网上应用最为广泛的一种网络传输协议，所有的 WWW 文件都必须遵守这个标准。HTTP 是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 是一个基于 TCP/IP 通信协议来传递数据的（HTML 文件、图片文件、查询结果等）。...
2022-06-16 16:36:13
1068
原创 前端错误监控
一、背景和痛点接口层有xlog，但是没有针对某个项目的分析，出现问题的时候太被动了，在服务器开发中，我们常常使用日志来记录请求的错误和服务器异常问题，但是在前端开发中，前端工程师按照需求完成页面开发，通过产品体验确认和测试，页面就可以上线了。但不幸的是，产品很快就收到了用户的投诉。用户反映页面点击按钮没反应而且能复现，我们试了一下却一切正常，于是追问用户所用的环境，最后结论是用户使用了一个非常小众的浏览器打开页面，因为该浏览器不支持某个特性，因此页面报错，整个页面停止响应。在这种情况下，用户反馈的投
2022-06-09 18:15:11
2175
原创 我走过最长的路，就是移动端播放视频的套路
一、问题描述在一个风和日丽，且UAT验收的下午，业务来了，她说：这里加个需求吧具体的需求很简单：上传视频、展示视频、可预览、全屏播放。你以为一个video就能搞定？然后遇到了各种各样的兼容性问题二、解决方案（踩坑记录）2.1 移动端不能展示首帧，视频展示空白这还不简单，加个poster搞定，然后开始了获取poster的艰难之路文件服务域是否有提供抽帧的功能？没有…用canvas获取视频的第一帧，需要设置proload为metadata拿到视频的元信息。真机调试发现安卓部分机型不允许视
2022-02-21 17:24:11
1415
原创 获取视频首帧
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>capture screen</title></head><body><video id="video" controls="controls" preload="auto" crossOrigin='anonymous'><source src="https://fa
2021-06-09 18:12:52
218
转载 vertical-align middle 不生效的几种解决方式，图片居中几种方案
1.在父元素中增加display:table-cell，vertical-align 写在在父元素中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .btn{ display:table-cell; width:200px; height:200px; bo...
2021-06-02 15:26:19
3772
翻译 webpack SplitChunksPlugin
因为在印记中文的SplitChunksPlugin部分翻译任务被认领了，所以依据webpack官网的SplitChunksPlugin部分翻译一下。SplitChunksPlugin最初，代码块（以及导入其中的模块）是通过webpack内部的图形的父子关系连接的。CommonsChunkPlugin 用于避免重复的依赖关系，但是无法进一步优化从webpack4开始，CommonsChunkPlugin被移除，开始使用optimization.splitChunks。Defaults开箱即用的Spl
2021-02-02 17:56:36
645
原创 关于this
面试中遇到的题目，当场把我问得有点蒙，对严格模式，this的理解还不够深入。function foo(){ console.log(this.a);}var a = 2;foo() //2严格模式：函数调用时，是直接使用不带任何修饰的函数引用进行调用，因此只能使用默认绑定，无法应用其他规则。但是在严格模式下不能将全局对象用于默认绑定所以this会绑定到unde...
2021-01-13 16:47:19
63
原创 git常用命令记录
记录一些近期比较常用的git 命令工作区（在编辑器时）-> 暂存区（git add后）-> 版本区（git commit后）1、git reset--hard 回退到上一个版本，工作区暂存区都不会保留 --soft 撤销commit回到暂存区 --mixed 回到工作区，相当于撤销git commit 与git add示例：git reset --hard HEAD^指令后面需要加上版本号，HEAD^是指回退到上一个版本，或者可以通过git log查看以往的commit i.
2021-01-05 14:09:16
87
转载 图解浏览器的基本工作原理
前言可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么；我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用；我们希望更细化的了解浏览器的渲染流程。浏览器的多进程架构一个好的程序常常被划分为几个相互独立又彼此配合的模块，浏览器也是如此，以 Chrome 为例，它由多个进程组成，每个进程都有自己核心的职责，它们相互配合完成浏览器的整体功能，每个进程中又包含多个线程，一个进程内的多个线程也
2020-08-19 14:14:25
262
转载 一文搞定移动端适配！
手机市场日渐丰富的同时，给我们前端开发人员带来的 “网页内容自适应屏幕尺寸进行显示的问题” 也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案。为什么要移动端适配？一般情况下设计稿的设计师按照 375 的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时 375 的设计稿，如果想要还原那基本是不可能了，因为如果一个左右布局，左边如果写死，右边自适应的话，每个设备的右边所展示的内容..
2020-05-22 10:01:16
313
转载 vue中MVVM原理及其实现
一. 什么是mvvmMVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。要实现一个mvvm的库，我们首先要理解清楚其实现的整体思路。先看看下图的流程：1.实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要...
2020-04-08 16:38:46
514
原创 懒加载
懒加载就是延时加载，当图片出现在可视区域时才进行加载，这样可以优化界面，加快页面初始加载速度。首先需要了解元素偏移量，可视高度等概念，如下图。大概的意思就是：当（Element）的offsetTop= （document.documentElement）对象的clientHeight+scrollTop时，用data-src属性的值替代src。见如下写法<i...
2020-03-25 12:05:03
133
原创 前端跨域总结
什么是跨域？ 由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题。同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 只有协议、端口、域名都相同才是同源。如下图URL 结果 原因 http://store.company.com/dir...
2020-03-24 23:12:46
102
原创 前端js错误监控
简单记录一下几乎没接触过的前端错误监控。页面运行时的错误window.onerror = function(message, source, lineno, colno, error) { ... }message：错误信息（字符串）。可用于HTMLonerror=""处理程序中的event。 source：发生错误的脚本URL（字符串） lineno：发生错误的行号（数...
2020-03-23 11:37:03
343
原创 使用wireshark抓包
打开一个http的网站，如https://www.cr173.com/抓包过程自行百度如图所示，get的请求行，请求头，响应的内容全都是明文的。post与get相比，post是放在报文的body里的。打开https的网页跟http不同，三次握手之后，https还会进行建立SSL连接。查看报文可以看到，整个通信过程都是加密的。...
2020-03-23 11:25:17
118
原创 笔记（三）
1.稍稍重温以下git的用法，如果是把一个现有的项目建git仓库的话，(1). 先在github上面新建一个仓库，记录下它的ssh值，然后在项目打开终端输入git init(初始化一个git的仓库)。(2). 然后gita dd* (把所有内容添加进去) (3).git commit -m ' '(引号里面写备注信息)。 (4).git remote add origin [email protected]...
2020-01-07 16:23:01
99
原创 vue关于数据更新的问题
vue只会监听数据的“第一层”的改变array[i] = 3;array.length = 0object.a = 3;这些情况vue是无法监听的。array = [1,2]和push, pop,shift，unshift, splice, sort，reverse等这些改变原数组的方法可以被监听解决无法监听的问题1. this.$vue(array, ind...
2019-11-18 14:25:23
197
转载 前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。一、概念白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。白屏时间的长短将直接影响用户对该网站的第一印象。二、白屏时间的重要性当用户点开一个链接或者是直接在浏览器中输入URL开始进行...
2019-10-14 17:45:20
197
原创 &&与||
首先&&的优先级会比||会高。&&运算的规则为，左边的为true，无论右true还是flase返回右边。 左边的为false，无论右边true或false都返回左边。4 && 0 //返回04 && 8 //返回80 && false //返回00 &...
2019-10-13 10:30:04
320
原创 拖放
ev.preventDefault();调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）;通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。DataTransfer.setData()方法用来设置拖放操作的d...
2019-10-06 16:02:16
89
原创 js的垃圾收集以及内存泄漏
JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别，通常情况下有两种实现方式：标记清除和引用计数。引用...
2019-10-06 16:01:42
78
原创 实现两列布局与三列布局（双飞翼）
效果图如下，左栏固定，右栏自适应<div class="container"> <div class="left"> </div> <div class="right"> </div></div>1.普通实现法.l...
2019-09-25 12:22:06
316
原创 实现一个简易的栅格系统
比较简单，但是坑比较多，最好自己动手实现一下。效果图：1200px以上的屏幕下1000px的屏幕800的屏幕（解析写在代码注释里好了）html代码：<div class="row"> <div class="col-lg-1 col-md-6 col-sm-12">.col-md-1</div> <...
2019-09-24 20:57:42
474
原创 去除数组中重复的值
1.一种最简便的es6的方法。(对于{}不管用)Array.prototype.uniq = function () { return [...new Set(this)];}2.只适用与普通数据类型的方法(对于NaN,{}不管用)虽然NaN!==NaN,但NaN之间被视为相同的值Array.prototype.uniq = function () { var ...
2019-09-24 00:10:06
376
原创 js继承总结
现在有一个动物对象的构造函数function Animal(){ this.species = "动物";}还有一个猫对象的构造函数function Cat(name,color){ this.name = name; this.color = color;}1.使用构造函数继承function Cat(name,color){ Animal.a...
2019-09-23 14:14:35
80
转载 帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示：不要排斥，静下心来，认真读完，你就搞懂了！(可以先看一下最后的总结部分再回过头来完整看完)1. 前言作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信......
2019-09-23 09:16:29
98
原创 实现instanceof
instanceof 的原理就是寻找左边的对象的原型链中是否存在右边对象的原型对象。left.__proto__ === right.prototype,如果上一层对象没有则会沿着原型链往上找。function myInstance(left, right){ while(true){ if(left.__proto__ === right.prototype){...
2019-09-22 11:05:12
404
转载 前端页面优化
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资...
2019-09-19 12:02:45
118
原创 带你全面理解深拷贝与浅拷贝
首先要区分与js的数据类型。基本数据类型：Number, String, Boolean, Null, Undefined。引用数据类型：Array, Object, Function等那么这两类数据类型有什么不一样呢？基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问。引用类型是存放在堆内存中的对象，...
2019-09-03 14:48:04
337
1
原创 笔记（二）
JavaScript 与其他语言的（如 Java）的重要区别是在JavaScript 中语句块（blocks）是没有作用域的，只有函数有作用域。因此如果在一个复合语句中（如 if 控制结构中）使用 var 声明一个变量，那么它的作用域是整个函数（复合语句在函数中）。但是从ECMAScript Edition 6 开始将有所不同的，let和const关键字允许你创建块作用域的变量。...
2019-08-01 13:58:09
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人