- 博客(53)
- 资源 (1)
- 收藏
- 关注
RSS订阅
转载 前端工程师面试题(性能优化)
1. 性能优化11.1 页面重构怎么操作？网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。对于传统的网站来说重构通常是：表格(table)布局改为DIV+CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)对于移动平台的优化针对于SEO进行优化...
2018-06-30 08:31:43
1943
转载 Vue3.0比2.X到底好在哪里？
目录一，性能比2.x快1.2～2倍diff算法的优化render阶段的静态提升（render阶段指生成虚拟dom树的阶段）事件侦听缓存减少创建组件实例的开销diff算法的优化在vue2中，虚拟dom是全量比较的。在vue3中，增加了静态标记PatchFlag。在创建vnode的时候，会根据vnode的内容是否可以变化，为其添加静态标记PatchFlag。diff的时候，只会比较有PatchFlag的节点。PatchFlag是有类型的，比如一个可变化文本节点，会将其添加Patc
2021-07-22 21:58:33
223
原创 详解TypeScript+Vue 插件 vue-class-component的使用总结
首先 下载npm install vue-class-component vue-property-decorator --save-dev
2021-06-09 15:17:47
625
原创 tsc : 无法加载文件 C:\Users\GIGABYTE\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micro
可能相信很多小伙伴在全局安装好npm install -g typeScript好后，查看tsc -v版本号的时候出现以下的错误：解决方案如下：以管理员身份运行powerShell(一定要以管路员身份打开):
2021-06-03 23:32:57
712
转载 前端十大经典算法
算法概述算法分类十种常见排序算法可以分为两大类： 非线性时间比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此称为非线性时间比较类排序。 线性时间非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此称为线性时间非比较类排序。算法复杂度相关概念 稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。 不稳定：如果a原本在b的前面，而a=b，排序之...
2020-05-18 10:02:16
188
转载 面试题：nginx有配置过吗?反向代理知道吗?
简述反向代理和正向代理反向代理：我们将请求发送到服务器，然后服务器对我们的请求进行转发，我们只需要和代理服务器进行通信就好，偷个图：正向代理：对于目标服务器来讲，感受不到真实的客户端，与它通信的是代理客户端，如科学谷歌的软件就是一个正向代理，偷个图：举个正向代理的例子，我(客户端)没有绿码出不了门，但是朋友(代理)有，我(客户端)让朋友(代理)去超市买瓶水，而对于超市(服务器)来讲，他们感知不到我(客户端)的存在，这就是正向代理。 举个反向代理例子，我(客户端)让朋友(代理)去.
2020-05-14 17:46:42
213
原创 理解js继承的6种方式
想要继承，就必须要提供个父类（继承谁，提供继承的属性）一、原型链继承重点：让新实例的原型等于父类的实例。 特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！） 缺点：1、新实例无法向父类构造函数传参。 2、继承单一。 3、所有新实例都会共享父类实例的属性。（原型上...
2019-09-06 21:34:47
90
原创 vue项目开发中，vuex里面的sotre数据改变，但是没有触发getter并没触发，视图也不更新的笔记
在vue 和 vuex 的开发中，我们可能会遇到一些奇葩的问题，比如说下面的我在开发里遇到的一个奇葩问题。 vuex 的数据/** * 获取表格数据 VUEX */import init from '../../api/init/init' const state = { tableData: { // 表格数据 content: [], // 表格数据 ...
2019-08-22 12:25:16
2526
原创 js中创建对象Object.create()和new object()的区别
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的 __proto __。const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);...
2019-08-21 12:52:03
623
原创 移动端布局总结
一、流式布局（百分比布局）使用非固定像素来定义网页内容，也就是百分比布局，(特别适合于电商网站的布局)通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。二、rem布局（局限条件：主要用来适配手机和ipad,除了手机和ipad，其他的都不能适配。）re...
2019-08-21 12:36:57
122
原创 对JavaScript中的静态属性和原型属性的理解
1.首先是在访问上的区别，当访问实例对象的某个属性但它本身没有时，它就会到原型中去查找，但不会去查找静态属性.// 实例对象不会去查找静态属性function Foo(){}Foo.a = 1;var foo = new Foo();foo.a // undefined// 当实例对象没有某个属性时，会尝试去原型中查找function Foo(){}Foo.prototype...
2019-08-20 09:06:36
387
2
原创 浅谈ES6中箭头函数this和普通函数this指向的问题理解
先说一下普通函数中的this，普通函数中的this表示调用此函数时的对象，如下例： var x=11; var obj={ x:22, say:function(){ console.log(this.x) } }obj.say();调用say函数的是对象obj，所以this...
2019-08-03 23:50:40
137
原创 ES6中的类里面this的指向问题
三个注意点:1.在ES6中类没有变量提升,所以必须先 定义类,才能通过类实例化对象2.类里面的共有属性和方法一定要加this使用3.类里面的this指向问题这个constructor里面的this指向就是这个new关键字创建出来的实例对象加入我在constructor里面打印这个this,可以看到我们再次验证这个this的指向...
2019-08-03 23:29:43
699
原创 vue项目打包部署生产环境
打包部署生产环境之前需要修改配置文件：修改一：build > utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)修改二：config > index.js(修改assetsPublicPath:'./',修改目的是为了解决js找不到的问题)两个文件修改完成之后，运行命令：npm run build 打包...
2019-08-01 15:26:47
971
原创 生动形象解释forEach、filter、map、some、every、find、findIndex、reduce间的区别
目录农民：我要催熟（批量操作）老板：我只要大土豆（筛选过滤）商贩：你这有没有大的啊（有符合）商贩：难道全都是大的吗（全符合）顾客：给我个大土豆（返回一个符合的）收银员：这土豆是仓库的第几个来着（返回序号）老板：今年收成如何呀（递归累加）总结从最开始学的for循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么...
2019-06-15 12:19:39
212
原创 JS-find、filter、forEach、map方法
js这四个方法不会对空数组进行检测，也不会改变原始数组1.find()方法主要用来返回数组中符合条件的第一个元素（没有的话，返回undefined）//语法 array.find(function(value, index, arr),thisValue)var Array = [1,2,3,4,5,6,7];var result = Array.find(function(va...
2019-06-15 11:47:58
173
原创 js日期格式与时间戳相互转换
1.将日期格式转化为时间戳：vardate =newDate('2018-06-08 18:00:00');// 有三种方式获取vartime1 = date.getTime();vartime2 = date.valueOf();vartime3 = Date.parse(date);console.log...
2019-06-12 21:45:53
432
转载 webpack的loader和plugin的区别
【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为dataURL。比如说：CSS-Loader，Style-Loader等。loader的使用很简单：在webpack.config.js中指定l...
2019-03-02 10:19:46
7621
1
转载 剖析Vue原理&实现双向绑定MVVM
本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助本文...
2019-02-23 12:43:14
152
转载 H5直播避坑指南
1. 自动播放问题 通过autoplay属性 视频的自动播放需要在video标签上添加autoplay属性, 如： <video autoplay><video/> 但是在很多浏览器里，如iOS下并不支持这个属性，在iOS下必须给webview设置 self.wView.allowsInlineMediaPlayback = YES;self.w...
2019-02-23 12:17:46
303
转载 vue中methods、watch、computed之间的差别对比以及适用场景
首先要说，methods,watch和computed都是以函数为基础的，但各自却都不同； 一、computer当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。<p id="app"> {{fullName}} </p><script> var vm = new Vue({ el: '#app', ...
2019-02-23 10:57:40
147
转载 如何解释vue的生命周期才能令面试官满意？
当面试官问：“谈谈你对vue的生命周期的理解”，听到这句话你是不是心里暗自窃喜：这也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 这几个钩子函数么，创建=>挂载=>更新=>销毁，So easy ！！！非也非也。如果你只是简单罗列出这几...
2018-12-20 17:50:03
162
2
原创 Vue中的生命周期回答让面试满意
vue里的生命周期是什么？vue实例从创建到销毁的过程称之为vue的生命周期vue的生命周期各阶段都做了什么？beforeCreate 实例创建前：这个阶段实例的data、methods是读不到的created 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见...
2018-12-20 17:47:44
1777
转载 一句大白话搞清集群和分布式的概念和区别?
一、大白话解说，半分钟就懂，用生活中的例子来说明： 小饭店原来只有一个厨师，切菜洗菜备料炒菜全干。后来客人多了，厨房一个厨师忙不过来，又请了个厨师，两个厨师都能炒一样的菜，两个厨师的关系是集群。为了让厨师专心炒菜，把菜做到极致，再请了个配菜师负责切菜，备菜，备料 ... 厨师和配菜师的关系是分布式。 一个配菜师也忙不过来了，又请了个配菜师，两个配菜师关系是集群。一个配...
2018-12-07 11:36:27
861
原创 关于vue兼容IE11的问题解决
IE一直以来坑就多，那么vuex不兼容IE11怎么办IE11没有内置promise，所以用不了vuex很正常。为了兼容，首先要安装一个库。安装好之后在main.js中引入然后在build中配置一下入口entry即可...
2018-11-29 22:43:25
2950
转载 Vuex的五个核心属性的理解
Vuex的五个核心概念本文参考自Vue文档，说的非常详细，建议看文档。Vuex是什么？VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vue有五个核心概念，state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。...
2018-09-28 11:24:56
8868
转载 vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法：e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器1 2原生JS阻止默认事件方法：e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器1...
2018-08-18 14:26:20
1551
转载 高并发解决方案之一 ——负载均衡
1.什么是负载均衡？ 当一台服务器的性能达到极限时，我们可以使用服务器集群来提高网站的整体性能。那么，在服务器集群中，需要有一台服务器充当调度者的角色，用户的所有请求都会首先由它接收，调度者再根据每台服务器的负载情况将请求分配给某一台后端服务器去处理。那么在这个过程中，调度者如何合理分配任务，保证所有后端服务器都将性能充分发挥，从而保持服务器集群的整体性能最优，这就是负载均衡...
2018-08-16 10:03:56
199
转载 2018 vue前端面试题
1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几种导航钩子？ 答：三种，一...
2018-08-15 20:44:52
152
转载 传统 Ajax 已死，Fetch 永生
fetch和XMLHttpRequest如果看网上的fetch教程，会首先对比XMLHttpRequest和fetch的优劣，然后引出一堆看了很快会忘记的内容(本人记性不好)。因此，我写一篇关于fetch的文章，为了自己看着方便，毕竟工作中用到的也就是一些很基础的点...
2018-08-12 15:44:27
387
2
转载 vue2.x饿了吗实战总结
vue2.x仿饿了么app项目总结转自 https://blog.csdn.net/qq_39894133/article/details/78826450 仿饿了么app是基于vue2.x最新实战项目，用到的技术栈vue2 + vue-router2 + vue-cli2+ axios + stylus + webpack2 + node.js页面相对简单，所以没有用到v...
2018-08-11 10:52:02
509
转载 预处器的对比——Sass、LESS和Stylus
发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言，有不同的语法和功能。在这篇文章中,我们将介绍三种不同CSS预处器的蛮量、功能以及他们的好处——Sass、LESS和Stylus介绍CSS预处理器是一种语言，用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。他们通过编译的代码编写成一般的CSS,不要在停留在石器时代了。CSS预处器有成千上万的特性,在本文中我...
2018-08-11 10:46:39
136
转载 vue跨域解决方法
vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。要想本地正常的调试，解决的办法有三个：一、后台更改header 1 2 ...
2018-08-11 10:45:03
130
转载 vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章，便于理解，遂做笔记～一般页面的视图App.vue应为这样一.父组件向子组件传值1.创建子组件，在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props，然后创建一个名为message的属性3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加me...
2018-08-11 10:38:33
171
原创 常见浏览器的兼容性问题（面试重点）
众所周知，浏览器的兼容性问题是开发人员经常会遇到的问题，它是由于不同浏览器的不同对代码的解析不同，而产生的在页面上显示的效果不同。那么，现在我把从工作当中发遇到的有关兼容性问题及解决方案做个简单总结，供各位参考： 第一类：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）解决方案：给float标签添加display：inline，将其转换...
2018-08-11 09:52:32
314
转载 常见浏览器兼容性问题与解决方案
文章转自与于 https://blog.csdn.net/weixin_38536027/article/details/79375411 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会...
2018-08-11 09:50:54
242
原创 移动端页面滚动穿透问题解决方案
问题描述最近在做移动项目时遇到一个页面滚动穿透问题，具体场景是这样的，在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问题。这个是比较常见的问题，基本都会遇到，Google一下出解决方案也是挺多的。以下根据不同的适用场景总结一些解决方案：方案一：overflow:hidden在列表容器的父元素上设置样式ove...
2018-08-11 09:39:25
242
原创 ES6的新方法实现数组去重
ES6里新添加了两个很好用的东西，set和Array.from。set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。在这我们可以看见，重复的项目已经被去掉了，包括NaN。正常情况下，NaN === NaN 返回的是false，但是在set里，一样能够帮你去重，厉害了。但是这里大家可以看到，set返回的是一个对象，但是我们想要的是数组啊。...
2018-08-11 08:55:49
2642
转载 JavaScript数组去重的6个方法
方法一无需思考，我们可以得到 O(n^2) 复杂度的解法。定义一个变量数组 res 保存结果，遍历需要去重的数组，如果该元素已经存在在 res 中了，则说明是重复的元素，如果没有，则放入 res 中。 function unique(a) { var res = []; for (var i = 0, len = a.length; i <...
2018-08-11 08:02:24
101
转载 WebSocket 是什么原理？为什么可以实现持久连接？
偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗，纯粹为分享。废话这么多了，最后再赞一个~一、websocket与httpWebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持...
2018-08-09 08:26:47
158
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人