- 博客(19)
- 收藏
- 关注
RSS订阅原创 前端开发者必备的nginx知识
前端开发者必备的nginx知识Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用什么是正向代理，什么又是反向代理呢？代理是在服务器和客户端之间假设的一层服务器，代理将接收客户端的请求并将它转发给服务器，然后将服务端的响应转发给客户端。不管是正向代理还是反向代理，实现的都是上面的功能正向代理：由于防火墙的原因，并不能直接访问谷歌，那么可以借助VPN来实现，这就是一个简单的正向代理的例子。这里你能够发现，正向代理“代理”的是客
2021-03-18 21:38:31
271
1
转载 前端监控和前端埋点方案设计
前端监控和前端埋点方案设计在线上项目中，需要统计产品中用户行为和使用情况，从而可以从用户和产品的角度去了解用户群体，从而升级和迭代产品，使其更加贴近用户。用户行为数据可以通过前端数据监控的方式获得，除此之外，前端还需要实现性能监控和异常监控。性能监控包括首屏加载时间、白屏时间、http请求时间和http响应时间。异常监控包括前端脚本执行报错等。实现前端监控有三个步骤：前端埋点和上报、数据处理和数据分析为什么需要前端监控前端监控的目的是：获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，
2021-03-04 22:40:22
411
1
原创 http缓存机制
介绍HTTP缓存之前，先了解HTTP报文http报文就是浏览器和服务器间通信时发送及响应的数据块。浏览器向服务器请求数据，发送请求(request)报文，服务器向浏览器返回数据，返回响应(response)报文。报文信息主要分为两部分：首部(header)：附加信息（cookie，缓存信息等）与缓存相关的规则信息，均包含在header中主体部分(body)：HTTP请求真正想要传输的部分为什么要缓存（缓存的优点）缓存是一种保存资源副本并在下次请求时直接使用该副本的技术缓解服务器压力（
2021-02-04 17:14:54
497
转载 前端刷新页面的方法
前端刷新页面的方法reload() 方法reload() 方法用于刷新当前文档，类似于浏览器上的刷新页面按钮window.location.reload()replace() 方法replace() 方法可用一个新文档取代当前文档window.location.replace("http://www.runoob.com")页面自动刷新其中5指每隔5秒刷新一次页面<meta http-equiv="refresh" content="5">Vue-Router路由跳转
2021-01-17 17:42:51
13727
1
原创 请求动画帧
实现动画效果的方法css3可以使用transition和animation来实现JS中可以通过定时器setInterval和setTimeout来实现html5中的canvas也可以实现，html5还提供一个专门用于请求动画的API（requestAnimationFrame）setInterval和setTimeout卡顿和抖动现象通过设定间隔时间来不断改变图像位置，达到动画效果，但是容易出现卡顿、抖动的现象<style> div { width:
2021-01-16 17:54:49
395
原创 专家建议别学React，还是Vue香...
虚拟DOM（Virtual Document Object Model）DOM的本质：DOM是浏览器中的概念，用js对象来表示页面上的元素，并提供操作DOM对象的APIReact中的虚拟DOM的本质：虚拟DOM是框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM嵌套虚拟DOM的目的：为了实现页面中DOM元素的高效更新数据渲染：全部重新渲染：如表格价格数据排序，从数据库中查询到的数据以对象数组的形式存放到了浏览器的内存中，点击排序之后，把内存中的对象数组重新排序，再把最新的对象数组重
2021-01-13 22:54:24
478
原创 项目开发
项目开发.env（在所有的环境中被载入）# 环境NODE_ENV = "development".env.staging（只在测试环境中被载入）# staging 预演环境，即线上的dev环境NODE_ENV = "production"# publicPathVUE_APP_PUBLIC_PATH = '/'.env.production（只在生产环境中被载入）# 环境NODE_ENV = "production"# publicPath# VUE_APP_PUBLIC_P
2021-01-13 22:50:24
382
1
原创 Vue组件之间通信、传值
Vue组件之间通信、传值props和$emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的attrs和attrs和attrs和listeners如果父组件A下面有子组件B，组件B下面有组件C，这时如果组件A想传递数据给组件C怎么办呢？如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C。要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了attrs和att
2021-01-13 14:50:51
108
原创 CI/CD与DevOps
什么是DevOpsDevOps是一种思想或方法论，它涵盖开发、测试、运维的整个过程强调软件开发人员与软件测试、软件运维、质量保障（QA）部门之间有效的沟通与协作强调通过自动化的方法管理软件变更、软件集成使软件从构建到测试、发布更加快捷、可靠，最终按时交付软件公司项目开发大概的流程，看看是如何一步一步操作的：Product Backlog源自于Scrum方法，是指产品待办事项的集合，其中事务有优先级判断，先处理优先级高的事项如何实现DevOps理念？DevOps兴起于2009年，近年来由于
2021-01-13 14:20:29
1045
1
原创 Vue中引入svg图标的方式
Vue中引入svg图标的方式Vue中引入svg图标的方式一安装yarn add svg-sprite-loader --devsvg组件index.vue<!-- svg组件 --><template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg>&l
2021-01-12 14:31:06
3913
5
原创 Vuex
VuexVuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex统一管理状态的好处能够在vuex中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享，提高开发效率存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步什么样的数据适合存储到Vuex中一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可Vuex的基本使用安装vuex依赖包npm
2021-01-03 21:17:14
91
1
原创 Vue踩过的坑
Vue脚手架取消ESLint校验ESLint是插件化的 JavaScript 代码检测工具，使用脚手架的时候会使用eslint来实现代码的质量检测，但是真正在书写代码的时候要时刻记住这些 “标准”可能有点难受，比如结尾不加分号，使用单引号，首行俩个空格缩进等vue.config.js：module.exports = { // 取消ESLint校验 lintOnSave: false}自动修复ESLint语法格式npm run lint --fixyarn lint -
2020-12-23 23:04:27
608
原创 TypeScript
typescript中的数据类型布尔类型（boolean）数字类型（number）字符串类型（string）数组类型（array）第一种定义数组的方式：let arr:number[]=[1,2,3,4,5]第二种定义数组的方式：let arr:Array<number>=[1,2,3,4,5]元组类型（tuple）let arr:[string,number,boolean]=["ts",3.18,true]相当于js中的var arr=["ts",3.18
2020-12-17 16:46:09
265
原创 各种懒加载！！！一定有你想要的
原生js实现图片懒加载图片懒加载的原理：img标签的src属性暂时先改成一个自定义属性，这样页面就不会去加载图片，当img标签所在区域进入屏幕可视区域后，从存放图片路径的自定义属性中获取图片地址，并动态的设置给对应img标签的src属性，这样浏览器就会自动帮助我们去请求对应的图片资源<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="
2020-12-15 23:36:59
257
原创 git基本使用
GitHub与GitLab在同一电脑下不同SSH Key配置ssh-keygen -t rsa -C “656825504@qq.com”ssh -keygen -t rsa -C “656825504@qq.com” -f id_rsa_gitlabgit使用前的配置在使用 git 前，需要告诉 git 你是谁git config命令的–global参数，使用–global参数表示这台机器上所有的git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和email配置提交人姓名：
2020-12-14 13:04:27
168
原创 前端性能优化
从输入URL到页面加载完成过程浏览器的地址栏输入URL并按下回车浏览器查找当前URL是否存在缓存，并比较缓存是否过期DNS解析URL对应的IP根据IP建立TCP连接（三次握手）HTTP发起请求服务器处理请求，浏览器接收HTTP响应渲染页面关闭TCP连接（四次挥手）前端性能优化的七大手段减少请求数量减小资源大小优化资源加载减少重排（回流）重绘使用性能更好的API构建优化优化网络连接减少请求数量合并如果不进行文件合并，有如下3个隐患文件与文件之间有插入的上行
2020-12-14 13:00:12
235
2
原创 Vue3.0来了！
Vue编译网站：Vue2.x：https://template-explorer.vuejs.org/#Vue3.0：https://vue-next-template-explorer.netlify.app/#PatchFlags：export const enum PatchFlags { TEXT = 1, // 动态文本节点 CLASS = 1 << 1, // 2 // 动态 class STYLE = 1 << 2, // 4 // 动态 styl
2020-12-13 17:06:25
400
1
原创 yarn和npm的区别
yarn和npm的区别熟悉一个新项目一般都是如下步骤：git clone xxxnpm installnpm run dev或者git clone xxxyarnyarn startyarn是什么？yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn是为了弥补 npm 的一些缺陷而出现的npm的缺陷：npm install的时候巨慢，新的项目拉下来要等半天同一个项目，安装的时候无法保持一致性。由于pack
2020-12-13 17:03:49
21631
3
原创 Vue Router
后端路由与前端路由后端路由：根据不同的URL地址分发不同的资源前端路由：根据不同的用户事件，显示不同的页面内容（负责事件监听，触发事件后，通过事件函数渲染不同内容）多页面应用模式MPA（Multi Page Application）单页面应用模式SPA（Single Page Application）应用构成由多个完整页面构成一个外壳页面和多个页面片段构成跳转方式页面之间的跳转是从一个页面到另一个页面一个页面片段删除或隐藏，加载另一个页面片段并显示。片段间的模拟跳转
2020-12-13 17:00:36
474
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人