- 博客(59)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 整理面经·JS·Vue·ES6
JS方面1.浏览器的缓存机制（强缓存和协商缓存）答：浏览器在加载资源的时候会根据这个资源的一些http header 判断是否命中强缓存 如果命中 那个浏览器将不会去请求服务器，而是直接从缓存中加载这个资源。如果强缓存没有命中 浏览器会发送一个请求到服务器 浏览器依据资源的另一些 http header 验证是否命中协商缓存。 如果未命中，则向服务器发送请求，加载数据。总结：...
2019-12-16 09:49:41
531
原创 ssr实现方案
客户端：在ssr中，客户端的 Vue 应用将接管服务器渲染的 HTML应用，需要创建一个客户端入口文件，让Vue在浏览器初始化并绑定在dom元素上。entry.client.js 和 entry.server.js理解水合hydration：服务端返回的html字符串，// 第一个参数是挂载的 DOM 元素，第二个参数 true 表示启用 SSR 水合模式});服务端：app.js：返回createApp函数createApp函数通常定义在app.js里，
2024-12-23 18:41:12
962
原创 Webpack性能优化
2）自定义分包 （防止重复）：通过使用插件，splitChunksPlugin来配置分离参数。"useBuiltIns": "usage", 可以使得内置库core-js进行按需加载，无需全部引入。1.代码分离，代码分离到不同的bundle中，之后可以按需加载，比如第三方依赖，首屏暂不使用的模块。例：类型，文件size minSize maxSize，并发数量等。公司会有自己的cdn服务器，用来专门储存cdn包，可以直接使用。两方面，一个是打包后产物的性能优化，一个是打包速度优化，3.提取css文件-
2024-12-08 21:59:56
497
原创 SDK监控平台的架构设计以及实现方案
采用内核+插件的插件式设计，内核和插件一起组成了 SDK实例 Instance，最后暴露给客户端使用；数据上报，数据格式化，配置初始化等非平台的公共逻辑和基础逻辑，而配置初始化是SDK运行的一个基础逻辑；错误监控，性能，用户行为等公共逻辑以及上层拓展业务。每一个小功能都是一个插件；
2024-09-09 15:26:50
1564
原创 监控平台总结之面试常问&答案
数据采集层:SDK: 在前端集成的SDK 负责采集数据，包括性能指标、用户行为、错误日志等。数据收集: 实现高效的数据采集机制，支持实时数据传输，可能使用fetch、XHR 或 Beacon等 API。数据处理层:数据通过 HTTP 或 WebSocket 发送到服务器，确保传输的可靠性和安全性。数据存储数据存储在数据库中，例如关系型数据库（MySQL）或 NoSQL 数据库（MongoDB）根据需要选择。数据分析层（需要借助大数据，目前不需要提）:数据处理: 对采集到的数据进行处理和分析。
2024-09-06 17:19:48
1280
1
原创 监控平台之nodejs模拟后端接口
分析：这里对于真正做过监控的人来说，会回答直接忽略掉，不上报，不统计，因为上报丢失很正常，不可能一条不差，而且对于大数据量的上报来说，这些是不会影响全局的数据准确性的，如果在面试中针对这个去说解决方法，会有点本末倒置，注意！3. 写demo.html, mock一些图片，promise，js的错误，用于测试错误上报。4.引入WebEyeSDK包，初始化（init）上报接口，获取请求的上报数据。4.还有一些语法写法上的细节，调用时机，封装的函数，检查是否遗漏。2.创建server.js，写服务，并且启动。
2024-09-04 23:36:38
906
1
原创 监控平台之rollup打包
rollup-plugin-babel：同babel/preset-env，进行智能预设，会根据版本，浏览器进行语法编译。4.打包编译用babel，同时安装babel/preset-env智能预设（可去webpack专栏查看）2.WebEyeSDK.js暴露方法，同时定义init方法，去初始化config里的上报参数。rollup/plugin-json 上报数据采用json格式保存，Rollup 会将。6.其他格式，esm，cjs打包，静态异步和同步方式进行打包。rollup打包文件。
2024-09-03 23:47:05
763
1
原创 监控平台之pv&uv/点击事件/路由上报
hash是URL中#后面那部分，同时修改hash值不会引起页面的刷新，也不会向服务器重新发送请求。通过hashchange事件可以监听它的变化。备注：以上三种方式均可以触发hashchang事件, pushState和replaceState均不能触发hashchang事件。history提供了popstate监听事件，但是只有以下两种情况会触发该事件。分为hashchange和popstate，根据是否有#进行分别，区别如下。监听mousedown，touchstart进行监听点击事件，
2024-09-03 22:50:06
581
原创 监控平台之批量上报
一般token生成，hash生成的格式，是36进制，也就是0至9和A至Z。// sendBeacon，如果不兼容，再使用图片上传。// 普通ajax发送请求数据。
2024-08-31 00:04:48
416
原创 监控平台之针对vue，react上报
Vue的有自己的错误监控方法 Vue.config.errorhandler。React的方法是errorBoundary。
2024-08-30 23:56:03
504
原创 监控平台之错误异常信息的统计
1.用window.addEventListener('error', ...) 去捕获 js，css，img资源加载失败的错误* 2.用window.onerror 捕获js错误* 3.用unhandledrejection 捕获promise的错误详细代码，内含丰富的代码解析，一看就懂！最下面记录路径，还未跑通搞懂！！！// 捕获资源加载失败的错误： js css img// 非js css img资源加载的报错， 如果为null，可能是以下三种原因。
2024-08-30 02:58:18
401
原创 监控平台之请求监控
底层实现：axios 是一个基于的库。在浏览器环境下，它利用 XMLHttpRequest 来处理 HTTP 请求。它封装了 XMLHttpRequest，提供了更简洁的 API 和更强大的功能，如请求拦截器、响应拦截器和自动转换 JSON 数据等。特性：支持请求和响应拦截器、请求取消、自动转换 JSON、处理超时等。底层实现：fetch 是一个现代的 Web API，基于浏览器内建的 fetch 函数，而不是 XMLHttpRequest。
2024-08-30 02:21:37
550
原创 监控平台之性能指标
这个就是每个静态资源在渲染，加载中的“痕迹”，开始渲染时间，结束时间，DNS解析时间，TCP链接时间，请求时间，响应时间，首字节加载时间，协议，各种资源大小等等等等，只要涉及到的数据，都会被记录在相应对象里。FP(First Paint)首次绘制：页面开始绘制的时间，包括任何文本、图像（包括背景图片）、非白色的canvas和svg元素。4.服务器响应时间：您的服务器响应用户请求所需的时间，其中爆哭哟从用户所在位置连接到您的服务器所需的网络时间。知道了这些所有的数据了，下面要做的，就是先统计需要的指标。
2024-08-28 23:02:25
1077
原创 性能优化一条龙
first paint 白屏时间，如果是fp时间过长，就要从网络层面进行优化，现在普遍的都是http1.1的请求方式，就要去考虑要不要升级到http2，采用一种多路复用的能力，或者再上一层，可以考虑dns解析的速度是否过慢，可以考虑是否用dns缓存或者dns预解析去解决问题，然后做一些预加载的过程。就是当你进行请求的时候，服务器会把你的域名解析成ip，这个过程就是dns的解析过程，优化dns过慢的问题，可以通过cdn服务进行dns负载均衡，或者进行dns缓存，dns预解析，都能提高速度。
2023-12-07 15:54:28
793
原创 Web前端监控的方案
整篇文章侧重于性能监控方面，关于用户行为监控可能更多的需要和产品经理探讨，根据监控数据改变业务策略，来不断提升用户的留存和转化。性能监控，涉及的面比较广、链路比较长，针对前端开发要掌握常见的监控指标，理解监控的整个链路。
2023-12-03 17:26:47
2168
原创 Clashx开启后，不能访问内网连接
解决方法，打开终端，输入vi ~/.config/clash/proxyIgnoreList.plist，即进入 ~/.config/clash目录下创建一个proxyIgnoreList.plist文件，里面添加以下代码，小问题：对于程序员朋友，我在访问日常环境连接的时候，还是不能访问，这个有解决方法吗？当开启clashx以后，会遇到访问内网连接的时候，不生效，关掉以后可以正常访问。下面的可根据不能访问的域名，自行配置，保存后，重启clashx即可。
2023-02-28 11:05:11
4808
原创 八股文随笔3
http2多路复用，slice深拷贝，变量提升和函数提升，preload和prefetch是有什么区别？为什么template里只能有一个div
2022-11-11 15:15:54
495
原创 八股文随笔2
页面错误码，强缓存和协商缓存，v-for中key的作用，call和apply，hash模式和histroy模式区别？，promise
2022-11-09 00:08:14
235
转载 CommonJS和ES6模块的区别
参考链接：CommonJS和ES6模块的区别 - 掘金背景我们都知道JS模块化的演变经历了一个漫长的过程，从最初的CommonJS ，到后来的AMD和CMD，再到今天的ES6模块化方案。优胜劣汰，对于JS这门语言来说，主要用于Node端的模块化方案CommonJS 活了下来，而ES6推出的模块化方案更是赢得了大家的认可，大有可能成为未来JS的主要的模块化方案。相信大家都可能产生过这样的疑问：既然两个模块化方案都能被大家使用和认可，那么它们到底有什么优势？两个模块化方案有什么差异？带着疑问我也看了一些
2022-05-31 11:48:17
147
原创 html2canvas：将html的dom变成图片，并保存
如何将HTML页面保存为图片？将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data url。 使用HtmlCanvas2实现话不多说，直接上代码.......1.npm下载 和html2canvas：npm install html2canvas2.引入 html2canvas：import html2canvas from 'html2canvas'3.调用方法 基于html2canvas.js可将一...
2020-10-14 22:22:09
2226
原创 Vue复制到剪贴板
1.需求背景有些业务需求需要点击按钮复制链接，本文就是记录该如何实现应用中间件vue-clipboard22.实现方法 1）先下载vue-clipboard2 npm install vue-clipboard2 --save 2）引入安装包1、 脚手架搭建的用户import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use( VueClipboard )2...
2020-07-15 17:55:47
3343
原创 谈谈vue中的$nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got .
2020-05-11 18:02:18
370
原创 Git常见命令大全（高端）
Git现在是很多人都会用到的管理工具，对于刚进入企业的毕业小白来说，很多公司都会要求会用git去操作，因为用过的人才知道，用git命令行确实方便，而且最重要的，是帅！！！一、 Git 命令初识在正式介绍Git命令之前，先介绍一下Git 的基本命令和操作，对Git命令有一个总体的认识示例：从Git 版本库的初始化，通常有两种方式：1）git clone：这是一种较为简单的初始...
2020-04-07 10:52:26
247
转载 vue 移动端适配
一、方法一：rem 布局在主入口：index.html，<head> 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。） <script> (function () { // 在标准 375px 适配下，100px = 1rem; var baseFontSize = 100; ...
2020-03-30 17:43:18
8860
6
原创 简单谈谈浏览器从输入URL到页面渲染的过程
简单谈谈浏览器从输入URL到页面渲染的过程这也是一个经典的面试题，无论前端还是后端都可能都会遇到，知识点相对来说也比较多，考察得比较全面的。最近也看了很多浏览器相关的文章，结合起来，在这里简单梳理总结下。同时，感谢浏览器这个伟大的发明。知识点罗列下面是我简单粗糙画的一张流程图：过程分为下方几个流程：DNS解析：把域名解析成IP地址 TCP 建立连接...
2019-12-19 16:13:16
713
转载 前端面经（七）
什么是 mvvm？MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。在 MVVM 架构下，View 和 Model 之间并没有直接的联系...
2019-12-05 16:50:45
158
原创 前端面经（六）
面经 20191203 未完待续....1. foreach forin forof 的区别1）for 和 for...in 是针对数组下标的遍历 通常遍历json 和 数组 按下标获取元素2）forEach 及 for...of 遍历的是数组中的元素 通常遍历数组，取出数据每个元素 遍历json报错3）for...in 在遍历数组的时候 对于 ,, 未定义元素 会跳过...
2019-12-05 14:34:31
144
原创 前端面经（五）
面经 20191130 ES 未完待续....1. less 的一些应用语法：1）复制2）定义样式class3）嵌套 父 套 子4）嵌套 冒泡5）延迟加载2.vue中的 is 属性 ：is 是用来绑定组件 <li is = " 组件名 " > 除此以外 还可以绑定属性:is <component :is = " data 属性...
2019-12-05 11:27:08
485
原创 前端面试（四）
面经 20191129 未完待续...1. 伪类选择器first-of-type last-of-type only-of-type only-childnth-child nth-last-child nth-of-type nth-last-of-type enable disable checked not selection2. 事件委托，使用事件委托有什么好处？...
2019-12-05 11:19:15
105
原创 前端面试（三）
面经 2019/11/28 未完待续...1、如何判断变量类型？typeof、instance of、constructor、Object.prototype.toString.call()。只用前2个会有局限性typeof：在判断变量类型的时候比较适合用来处理基本数据类型，如果是引用类型的值 typeof恐怕就心有余而力不足了。instanceof：会根据_proto_一层层往...
2019-12-05 11:02:38
169
原创 前端面经（二）
面经 2019/11/261.什么是 JSONP2.局部里怎么调用全局的this3. localStorage 和 sessionStorage 的区别 和 用法1.两者和cookie都是本地存储 cookie 存储大小是 4k localStorage 大小是 5M2.localstorage 保存在 本地 永久有效3.sessionStorage 关闭页面就...
2019-12-05 10:57:49
129
原创 前端面经（一）
面经 2019/11/14 未完待续...1.浏览器的缓存机制（强缓存和协商缓存）答：浏览器在加载资源的时候会根据这个资源的一些http header 判断是否命中强缓存 如果命中 那个浏览器将不会去请求服务器，而是直接从缓存中加载这个资源。如果强缓存没有命中 浏览器会发送一个请求到服务器 浏览器依据资源的另一些 http header 验证是否命中协商缓存...
2019-12-05 10:56:29
149
原创 云服务器如何安装xampp
先下载 linux版本的xampp 下载链接xampp-linux-x64-7.3.9-0-installer.run修改权限： chmod +x 文件名 格式./文件名 安装由于是默认安装 xampp将默认安装到 /opt/lampp/lampp 目录下云服务器 xampp 开启命令/opt/lampp/l...
2019-09-30 11:48:56
644
原创 正则表达式知识点
正则的知识点：1.创建实例：var reg = new RegExp(pattern, flag) ("/\d+/", g)2.flag 标识符1. i ： 忽略大小写匹配2. m：多行匹配3. g: 全局匹配（应用与所有， 而不是找到第一个就停止）3. 第一段知识点1. [] [xyz] xyz中任意一个字符 等价于[x-z]2. [^] [^xyz] 匹配任...
2019-09-05 19:42:42
345
原创 JQuery常用知识点
Jquery知识点：jQuery定义：jQuery 就是一个简单高效的 js 库jq 封装的 是 js dom 的 部分不需要考虑兼容问题带 min ： 压缩版本 删除了注释 换行 提高网页加载效率 上线使用不带 min ： 无压缩1.多库共存在多个js库应用于同一个项目中时， $ 符 会存在冲突的情况 为了防止这种现在发生，var jq = jQuery.n...
2019-09-05 19:42:02
136
apache-tomcat-7.0.93.tar.gz
2019-08-14
Xftp-6.0.0119p.zip
2019-08-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人