- 博客(77)
- 收藏
- 关注
RSS订阅原创 面试笔记-js基础篇
1、因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000开头代表是对象，然而null表示为全零，所以将它错误的判断为object。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。2、最准确判断类型的是 Object.prototype.toString.call(null) === '[object Type]'注意type的第一个字母为大写3、判断两个值是否相等。
2024-10-09 17:04:04
1089
原创 前端项目发版后页面加载最新代码
版本发布上线后，如果用户还停留在老页面，此时用户并不知道网页已经重新部署了，跳转页面的时候可能会出 js 链接 的hash变了导致报错跳不过去的情况。需要手动刷新拿到最新的代码后才能恢复，那有哪些办法可以实现优化这个问题。以版本号作为请求头，每次请求后端接口会判断该版本号是否有更新，如果有返回对应信息通知前端重新加载资源。
2024-09-19 16:20:03
342
原创 常见的图片格式与优化
择合适的图片格式是非常重要的，可以优化页面加载速度、提高用户体验和节省带宽资源。SVG格式：对于需要高质量图片的场景，如图标和LogoPNG格式：对于需要保持高质量且带透明背景的图像WebP格式：对于需要节省带宽和提高加载速度的场景JPG格式：对于照片和复杂图像，可以进行有损压缩。字体图标：对于大量图标资源的场景，减少网络请求和文件大小。
2024-09-19 16:15:53
926
原创 新电脑工作流搭建记录-前端篇
可以使用 npm 直接安装到全局： npm install n -g 常用命令 n # 显示所有已下载版本 n 10.16.0 # 下载指定版本 n lts # 查看远程所有 LTS Node.js 版本 n run 10.16.0 # 运行指定的 Node.js 版本。open ~/.ssh/id_rsa.pub或者vim ~/.ssh/id_rsa.pub。查看配置：git config --global --list。生成ssh：ssh-keygen -t rsa。第二步 → 复制 .zshrc。
2024-09-19 15:41:30
450
原创 小程序网络状态判断
当请求耗时在1000ms以内，则认为网络极好，如果介于1000-1500ms之间，则认为网络好，如果大于1500ms，则认为网络差。该api会在用户网络切换时候触发，一旦触发，我们需要重新执行下载方法来判断当前的网络状态。1、wx.getNetworkType判断，2g、3g即可以认为是弱网的情况，网络强度通过signalStrength判断。1、全局监听wx.onNetworkStatusChange，切换网络的时候，进行网络判断。感知到弱网情况，以及无网络的情况，并给出对应页面提示，提升用户体验。
2024-05-15 15:53:10
395
原创 面试题汇总
vue中的data为什么是一个函数在Vue中，data选项是一个函数，用于定义组件的初始数据。将data作为函数的主要原因是为了使每个实例都能够维护其自己的数据副本，而不是共享相同的数据对象。当Vue实例化一个组件时，它会调用该组件的构造函数并创建一个新的Vue实例。在创建实例时，Vue会执行data函数并将其返回值作为实例的初始数据对象。由于data函数会在每个实例化时都会被调用，所以每个实例都会有自己独立的数据对象。
2023-03-29 10:14:40
438
原创 前端基础算法
斐波那契数列（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
370
原创 TS常见面试题
unknown类型可以被赋值给任何类型，但是只有any类型可以被赋值给unknown类型，因为any类型包含了所有类型，而unknown类型则不包含任何类型。JavaScript 是一种动态类型的语言，即变量的类型是在运行时确定的，而 TypeScript 在编译时就能够确定变量的类型，从而可以在开发过程中检测出类型错误，提高代码的可靠性。any类型的变量可以被赋予任何值，它可以调用任何方法或属性，TypeScript编译器不会检查它的类型和属性的合法性，所以使用any类型会降低代码的类型安全性。
2023-03-16 11:18:35
2185
原创 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
1091
3
原创 前端工程化
如果可以分出出更小的bundle，以及控制资源加载优先级，从而优化加载性能。简单来说，Sourcemap 就是一个信息文件，它里面存储着代码转换前后的对应位置信息，也就是转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射， Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，debug 困难的问题。这种技术的思路是：通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性。
2022-09-07 11:40:07
565
原创 ES6及JS基础总结
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。它有三种状态，pending（进行中）、fulfilled（已成功）、reject（已失败）。注：resolved是指完成状态，结果可能包含fulfilled和rejected。...
2022-08-18 17:44:30
1271
原创 前端项目图片放项目内和服务器的区别
1、放本地会增加包，增加资源加载时间、白屏时间2、图片服务器会提供各种功能和优化，有针对性的缓存方案，减少带宽成本，提高访问速度3、上传图片服务器后在项目内引入方便，放本地weekpack打包后路径会改变有风险4、分担web服务器的负载，提高服务的稳定性总的来说，放在专门的图片服务器好处还是很多的，但如果是小而不多的图片放本地也无妨。......
2022-06-21 10:12:50
1182
原创 超全http面试重点总结
HTTP 协议一般指 HTTP（超文本传输协议）。是一种用于分布式、协作式和超媒体信息系统的应用层协议，是因特网上应用最为广泛的一种网络传输协议，所有的 WWW 文件都必须遵守这个标准。HTTP 是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 是一个基于 TCP/IP 通信协议来传递数据的（HTML 文件、图片文件、查询结果等）。...
2022-06-16 16:36:13
1198
原创 前端错误监控
一、背景和痛点接口层有xlog，但是没有针对某个项目的分析，出现问题的时候太被动了，在服务器开发中，我们常常使用日志来记录请求的错误和服务器异常问题，但是在前端开发中，前端工程师按照需求完成页面开发，通过产品体验确认和测试，页面就可以上线了。但不幸的是，产品很快就收到了用户的投诉。用户反映页面点击按钮没反应而且能复现，我们试了一下却一切正常，于是追问用户所用的环境，最后结论是用户使用了一个非常小众的浏览器打开页面，因为该浏览器不支持某个特性，因此页面报错，整个页面停止响应。在这种情况下，用户反馈的投
2022-06-09 18:15:11
2314
原创 我走过最长的路，就是移动端播放视频的套路
一、问题描述在一个风和日丽，且UAT验收的下午，业务来了，她说：这里加个需求吧具体的需求很简单：上传视频、展示视频、可预览、全屏播放。你以为一个video就能搞定？然后遇到了各种各样的兼容性问题二、解决方案（踩坑记录）2.1 移动端不能展示首帧，视频展示空白这还不简单，加个poster搞定，然后开始了获取poster的艰难之路文件服务域是否有提供抽帧的功能？没有…用canvas获取视频的第一帧，需要设置proload为metadata拿到视频的元信息。真机调试发现安卓部分机型不允许视
2022-02-21 17:24:11
1491
原创 获取视频首帧
<!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
252
转载 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
3984
翻译 webpack SplitChunksPlugin
因为在印记中文的SplitChunksPlugin部分翻译任务被认领了，所以依据webpack官网的SplitChunksPlugin部分翻译一下。SplitChunksPlugin最初，代码块（以及导入其中的模块）是通过webpack内部的图形的父子关系连接的。CommonsChunkPlugin 用于避免重复的依赖关系，但是无法进一步优化从webpack4开始，CommonsChunkPlugin被移除，开始使用optimization.splitChunks。Defaults开箱即用的Spl
2021-02-02 17:56:36
688
原创 关于this
面试中遇到的题目，当场把我问得有点蒙，对严格模式，this的理解还不够深入。function foo(){ console.log(this.a);}var a = 2;foo() //2严格模式：函数调用时，是直接使用不带任何修饰的函数引用进行调用，因此只能使用默认绑定，无法应用其他规则。但是在严格模式下不能将全局对象用于默认绑定所以this会绑定到unde...
2021-01-13 16:47:19
95
原创 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
124
转载 图解浏览器的基本工作原理
前言可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么；我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用；我们希望更细化的了解浏览器的渲染流程。浏览器的多进程架构一个好的程序常常被划分为几个相互独立又彼此配合的模块，浏览器也是如此，以 Chrome 为例，它由多个进程组成，每个进程都有自己核心的职责，它们相互配合完成浏览器的整体功能，每个进程中又包含多个线程，一个进程内的多个线程也
2020-08-19 14:14:25
301
转载 一文搞定移动端适配！
手机市场日渐丰富的同时，给我们前端开发人员带来的 “网页内容自适应屏幕尺寸进行显示的问题” 也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案。为什么要移动端适配？一般情况下设计稿的设计师按照 375 的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时 375 的设计稿，如果想要还原那基本是不可能了，因为如果一个左右布局，左边如果写死，右边自适应的话，每个设备的右边所展示的内容..
2020-05-22 10:01:16
375
转载 vue中MVVM原理及其实现
一. 什么是mvvmMVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。要实现一个mvvm的库，我们首先要理解清楚其实现的整体思路。先看看下图的流程：1.实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要...
2020-04-08 16:38:46
564
原创 懒加载
懒加载就是延时加载，当图片出现在可视区域时才进行加载，这样可以优化界面，加快页面初始加载速度。首先需要了解元素偏移量，可视高度等概念，如下图。大概的意思就是：当（Element）的offsetTop= （document.documentElement）对象的clientHeight+scrollTop时，用data-src属性的值替代src。见如下写法<i...
2020-03-25 12:05:03
165
原创 前端跨域总结
什么是跨域？ 由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题。同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 只有协议、端口、域名都相同才是同源。如下图URL 结果 原因 http://store.company.com/dir...
2020-03-24 23:12:46
132
原创 前端js错误监控
简单记录一下几乎没接触过的前端错误监控。页面运行时的错误window.onerror = function(message, source, lineno, colno, error) { ... }message：错误信息（字符串）。可用于HTMLonerror=""处理程序中的event。 source：发生错误的脚本URL（字符串） lineno：发生错误的行号（数...
2020-03-23 11:37:03
376
原创 使用wireshark抓包
打开一个http的网站，如https://www.cr173.com/抓包过程自行百度如图所示，get的请求行，请求头，响应的内容全都是明文的。post与get相比，post是放在报文的body里的。打开https的网页跟http不同，三次握手之后，https还会进行建立SSL连接。查看报文可以看到，整个通信过程都是加密的。...
2020-03-23 11:25:17
158
原创 笔记（三）
1.稍稍重温以下git的用法，如果是把一个现有的项目建git仓库的话，(1). 先在github上面新建一个仓库，记录下它的ssh值，然后在项目打开终端输入git init(初始化一个git的仓库)。(2). 然后gita dd* (把所有内容添加进去) (3).git commit -m ' '(引号里面写备注信息)。 (4).git remote add origin git@github.c...
2020-01-07 16:23:01
120
原创 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
255
转载 前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。一、概念白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。白屏时间的长短将直接影响用户对该网站的第一印象。二、白屏时间的重要性当用户点开一个链接或者是直接在浏览器中输入URL开始进行...
2019-10-14 17:45:20
220
原创 &&与||
首先&&的优先级会比||会高。&&运算的规则为，左边的为true，无论右true还是flase返回右边。 左边的为false，无论右边true或false都返回左边。4 && 0 //返回04 && 8 //返回80 && false //返回00 &...
2019-10-13 10:30:04
431
原创 拖放
ev.preventDefault();调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）;通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。DataTransfer.setData()方法用来设置拖放操作的d...
2019-10-06 16:02:16
123
原创 js的垃圾收集以及内存泄漏
JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别，通常情况下有两种实现方式：标记清除和引用计数。引用...
2019-10-06 16:01:42
103
原创 实现两列布局与三列布局（双飞翼）
效果图如下，左栏固定，右栏自适应<div class="container"> <div class="left"> </div> <div class="right"> </div></div>1.普通实现法.l...
2019-09-25 12:22:06
404
原创 实现一个简易的栅格系统
比较简单，但是坑比较多，最好自己动手实现一下。效果图：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
535
原创 去除数组中重复的值
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
430
原创 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
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人