- 博客(68)
- 收藏
- 关注
RSS订阅原创 面试之for循环
在开发过程中经常需要循环遍历数组或者对象，使用最多的方法forEach、for…in 、 for…of，整理一下他们的异同点for循环其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的 就是for循环，它用来遍历数组var arr = [1,2,3,4]for(var i = 0 ; i< arr.length ; i++){console.log(arr[i])}for循环中可以使用return、break等来中断循环forEach对数
2021-03-10 23:55:11
249
原创 面试之原型及深浅拷贝
原型Javascript中大部分的数据都是对象，他们的根对象是Object.prototype对象。在JavaScript中所有的对象都是从Object. Prototype克隆而来，Object. Prototype对象就是她们的原型。要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它。对象会记住它的原型。如果对象无法响应某个请求，它会把这个请求委托给它的构造器的原型原型链每个对象都一个原型对象，这个原型对象由对象内置属性_proto_指向它的构造函数的proto.
2021-03-10 23:43:54
233
转载 ES6中map原理
es6的map的键可以是任意的数据结构，并且不重复。那么map的底层原理是啥呢？map利用链表，hash的思想来实现。首先，map可以实现删除，而且删除的数据可以是中间的值。而链表的优势就是在中间的任意位置添加，删除元素都非常快，不需要移动其他元素，直接改变指针的指向就可以。。而在存储数据很多的情况下，会导致链条过长，导致查找效率慢，所以我们可以创建一个桶（存储对象的容器），根据hash（把散列的值通过算法变成固定的某值）来平局分配数据，防止链条过长。如下图：桶里面有3个..
2021-03-10 23:35:43
465
原创 面试之ES6新特性
ES6 新特性块级作用域let和const，变量提升。Var变量定义在赋值之前，引用时不会报错，因为编译时将var定义提前，执行位置不变。函数声明会提升到变量声明之前。块级作用域中的函数声明也会被提前，例如 if..else中两个函数声明都会提升。Let用来劫持块级作用域的。也就是将一个块转换成一个封闭的作用域。Const即常量，不可更改属性，如果更改则发生TypeError 2. 引入class类，super继承父类方式。为继承提供了可能。Js的class并不像传统的继承一...
2021-03-10 23:32:22
358
原创 面试之性能
性能1．代码执行过程会阻塞浏览器的其他进程，比如页面绘制、a.讲脚本放在页面底部b.合并脚本，减少script标签数。压缩脚本c.使用无阻塞下载。例如defer属性，xhr对象下载。SSR服务端渲染d．使用CDN，设置HTTP响应头来缓存JS2.数据存储位置对性能的影响。数据存储份字面量，变量，数组项，对象成员。a.字面量和局部变量访问速度快，访问数组元素和对象成员相对较慢。b.嵌套对象，原型链属性，层次越深，访问速度越慢。3. 利用缓存：DOM...
2021-03-10 23:22:37
93
原创 面试之浏览器渲染原理
浏览器渲染过程解析HTML并构建DOM树 处理CSS构建CSSOM树 将ＤＯＭ与CSSOM合并成一个渲染树Render Tree 根据渲染树来布局，计算每个节点的位置Layout 调用GPU绘制，合成图层，显示在屏幕上 Painting回流（重排reflow） 当DOM的变化影响了元素的几何属性（宽和高），比如改变边框宽度或给段落增加文字，导致行数增加。浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，...
2021-03-10 23:19:12
124
原创 面试之闭包与作用域
闭包由于JS中变量的作用域属于函数作用域，在函数执行后作用域就会被清理，内存也随之销毁。而闭包时建立在函数内部的子函数，由于它对上级作用域具有 可访达性。因此在上级函数自行完毕后，这个函数内的作用域还存在引用，因此无法销毁。实际上，闭包其实就是缓存作用域，使函数外部打破函数作用域的约束。可以访问函数内部的变量。同样，他的副作用就是销毁内存。使用场景：ajax中的回调函数，setTimeout中的匿名函数。或者一个函数返回函数，其实也是闭包。作用域作用域分全局作用...
2021-03-10 23:15:43
149
原创 面试之缓存
缓存 https://blog.youkuaiyun.com/qq_38719039/article/details/79977474CookieCookie时以键值对的形式保存的，每个cookie间一般是以”;”分隔。它是浏览器提供的一种机制。将document的cookie属性提供给javascript使用。Cookie是存于用户硬盘的一个文件。这个文件通常对应一个域名。当浏览器访问这个域名时，此cookie便可使用。因此，cookie可以跨越一个域名下的多个网页 ，但不能跨越多个域名使用。.
2021-03-10 23:09:38
164
原创 面试总结-axios与ajax区别
HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。HTTPS
2021-02-24 17:34:16
1645
原创 防抖节流
为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应跟不上触发频率，出现延迟，假死或卡顿的现象。防抖在事件被触发N秒后再执行回调函数，如果N秒内再次触发 ，则重新计时。例如 ：频繁输入中，数据对应更新问题。利用防抖可以通过定时器延迟执行数据加载请求，当规定时间内有二次触发，则清除定时器重新添加定时器。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
2021-01-27 15:18:47
169
原创 this
this指向运行时上下文1.作为对象方法调用时，this指向对象本身2.作为普通函数调用时，this指向父域。在全局作用域下调用，指向window。在函数内部调用，则指向父函数内部作用域3.隐式调用时，则会丢到绑定对象。它会指向默认绑定，全局对象或者undefined。function foo(){ console.log(this.a);}var obj ={a:2,foo:foo};var bar = obj.foo;var a = "oops,global"bar();
2021-01-27 15:14:47
92
原创 高性能JS总结
代码执行过程会阻塞浏览器的其他进程，比如页面绘制、讲脚本放在页面底部合并脚本，减少script标签数。压缩脚本使用无阻塞下载。例如defer属性，xhr对象下载。SSR服务端渲染使用CDN，设置HTTP响应头来缓存JS数据存储位置对性能的影响数据存储份字面量，变量，数组项，对象成员。字面量和局部变量访问速度快，访问数组元素和对象成员相对较慢。嵌套对象，原型链属性，层次越深，访问速度越慢。DOM渲染减少回流、重排减少使用影响重排的属性，（居中查询），例如getComputedS
2021-01-27 15:05:22
198
转载 九大基本设计原则
@Sandijs Ruluks早在2014年就针对响应式设计提出九大基本设计原则。响应式 vs. 自适应网页设计很多初学都都容易把响应式设计和自适应设计混淆。事实上，它们看起来似乎是相同的，但事实并非如此。这两种方法相辅相成，并没有说哪个是正确的那个是错误的，内容决定一切。内容流动随着屏幕尺寸变小，内容将会占据更多的垂直空间，而下方的内容就会被接着往下推，这就是所谓的流动。如果你是使用像素或磅来进行设计的，这可能会有点棘手，但是当你习惯了之后，就会变得很有意义了。相对单位
2021-01-18 20:10:37
237
原创 微服务
为什么需要微服务？借用一张图来说明。图中横轴是复杂度，纵轴是生产效率。从生产效率的角度来讲，在两条曲线的交叉点之前，单体架构是占优势的，过了交叉点之后，单体架构的生产效率将大幅度下降。随着单体应用的复杂度增加，开发效率必然下降，这时微服务化就显得非常重要什么是微服务微服务是一种架构模式，它提倡将单一应用划分成一组小的服务 ，每个服务运行在其独立的进程中，服务间采用轻量级的通信机制互相沟通（通常是基于HTTP协议的RESTful API），每个服务都是围绕着具体业务进行构建，并且能够被独立部署到生产环境
2020-09-04 00:44:35
361
原创 Android脑图
Android开发环境环境配置模拟器安装SDK连接真机布局LinearyoutRelativeLayoutTableLayoutFrameLayoutGridLayoutAbsoluteLayoutDrawerLayout基础ViewView与ViewGroupTextViewEditViewImageViewButton与ImageButtonImageButtonRadioButtonCheckBoxToggleButtonSwithDialogAle
2020-07-25 11:47:57
346
原创 google地图api
国外访问地址https://maps.googleapis.com/maps/api/js?key=YOUR_KEYcallback=initMap国内访问地址https://ditu.google.cn/maps/api/js?key=YOUR_KEY地图初始化调用地图显示接口： Map(mapDiv:Node, opts?:MapOptions )var mapOption =...
2019-09-05 20:36:16
3530
原创 this作用域
this对象 指向当前执行代码的环境对象全局环境指向全局对象。在浏览器中, window 对象同时也是全局对象函数（运行内）环境在函数内部，this 的值取决于被调用的方式。在严格模式下，如果this没有被执行环境定义，那它保持为undefined。在非严格模式下，默认为全局对象。call和apply函数，将this值绑定到调用中的特定对象箭头函数，this与封闭环境的this保...
2019-08-23 09:47:24
1246
原创 cordova问题
无法获取资源https://dl.google.com.dl/android/maven2/com/android/tools/build/grade/3.2.1/gradle-3.2.1.pom
2019-07-04 20:26:16
168
转载 JavaScript之map与parseInt的陷阱
问题来源 这个问题的来源是学习廖雪峰老师JS教程。问题如下：小明希望利用map()把字符串变成整数，他写的代码很简洁： 'use strict'; var arr = ['1', '2', '3']; var r; r = arr.map(parseInt); console.log(r); // [1, NaN, NaN]为什么不...
2019-06-17 15:13:52
185
转载 “我是技术总监，你干嘛总问我技术细节？”
作者 | 王晔倞来源 | 吃草的罗汉(ID:kidd_wyl)每个周末的午后，把儿子送进EF读书，随后找个环境幽静的咖啡馆坐一会，这便是我一周中最放松的时光。在咖啡厅的气氛和环境这两点上，我似乎有强迫症，比如装修主色调的运用，地上装饰是否比较体验文化气息，营造了一场视觉盛宴，尤其在比较细微的地方我会非常关注。简单说，必须能让我一进门就迅速有耳目一新的感觉，要不然我就会转头离开。因为我...
2019-06-17 11:09:25
630
转载 深度｜下一家BAT长这样（二）
“预言未来总是困难的，在一个高速变化中的领域中则尤其是如此。尽管如此，当我们充分回顾包括‘BAT’这一代，乃至更早于他们的雅虎、微软、苹果等行业巨头的崛起历程时，仍然可以发现，在互联网行业，王朝的更迭、新星的出世，都有一定的“规律”存在。而这样的规律，在移动互联网时代，在很大的概率上，依旧成立。”打开google，设定好时间区间，搜索关键词“下一个BAT”，得到下面这组数据：可以看到，对“下一...
2019-06-17 10:45:28
462
转载 深度｜下一家BAT长这样（ 演讲）
导言：****资本寒冬真的来了吗？面对巨头威胁，后来者如何生存并迂回式颠覆？华为是怎么迂回侧翼突破的？迂回式创新的基本过程是“看不见、看不起、看不懂、学不会、追不上、被超越”，历史上成大气候的，往往不是一开始就成为主流，更不会在泡沫里破掉，泡沫里破掉的是本来就应该破掉的。关键词：资本寒冬 机会 颠覆式创新迂回式创新 华为 微信一 寒冬来了，机会在哪？今天的主题是“寒冬来临”。寒冬有没有来...
2019-06-17 10:11:17
1077
原创 前端入过的坑
cnpm install 不按照package-lock.json来下载包，锁定失效-------改用npm 并设置淘宝代理。在.npmrc中设置 registry=http://registry.npm.taobao.org（）browserslist:caniuse-list is outdate （caniuse-list更新到5周前版本仍然不行，打包抛出异常）----在@bab...
2019-06-11 18:10:37
302
转载 jmeter参数化之函数助手
jmeter-参数化：参数化的作用：调用接口入参时。有时要求参数经常变化，如果每次去修改就会变得很繁琐，这时候就需要把经常变化的值改变为提前编辑好的文档或函数中，便于调用时使用不同的值。Jmeter参数化的方式有三种：1）用户定义的变量（这种就是为了方便管理参数，只能有一个值，比如说ip地址不经常变化的）。在线程组中添加一个用户定义的变量，然后写key和value就可以了，key就是这个参...
2019-06-06 17:27:05
4444
转载 Jmeter-csv文件参数化
本文以登录的用户名和密码为例1 创建csv文件创建.csv文件，用户名和密码中间以逗号隔开图 1 创建csv文件2 在线程组中添加并配置CSV Data Set Config添加CSV Data Set Config图 2 添加CSV Data Set Config配置CSV Data Set Config图 3 配置CSV Data Set ConfigFil...
2019-06-06 16:59:09
33963
转载 使用JMeter录制脚本并调试
第一步：在JMeter中添加线程组，命名为AddBugByJMeter第二步：在线程组下添加HTTP请求默认值添加->配置元件->HTTP请求默认值，设置服务器IP和端口号（JMeter默认使用80端口号，我的禅道配置的是81端口）第三步：添加HTTP代理服务器1、添加非测试原件->HTTP代理服务器，并设置端口号（可以通过netstat -ano查看电脑中未使用的端...
2019-06-06 16:52:57
20163
3
转载 JMeter安装+配置+运行
环境配置：操作系统：Win7系统jdk版本：1.8JMeter版本：3.0一 JMeter的安装配置过程JMeter是100%纯java应用程序，它在任何支持完整java实现的系统上都能正常运行。JMeter的安装配置对java版本的要求： JVM1.5或者更高版本。安装配置过程：第一步 安装JDK，配置JDK路径到Oracle官方网站下载最新版本的jdk：http://w...
2019-06-06 16:15:39
186
转载 HTTP请求中的form data和request payload的区别
区别就是：当POST请求的请求头里设置Content-Type: application/x-www-form-urlencoded(默认), 参数在请求体以标准的Form Data的形式提交，以&符号拼接，参数格式为key=value&key=value&key=value当使用AJAX原生POST请求,请求头里设置Content-Type:application/j...
2019-06-03 15:05:54
296
转载 js事件冒泡和事件捕获详解
Javascript与HTML之间的交互是通过事件实现。一、事件流事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE9，chrome，Firefox，Opera，Safari均实现了DOM2级规范中定义的标准DOM事件，而IE8和IE8以下版本仍然保留专有的事件处理方式。事件冒泡事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中...
2019-05-29 16:42:00
232
转载 小tips: touch-action简介与treated as passive错误解决
一、Chrome和Safari浏览器preventDefault报treated as passive错误其实这个问题出现有一段时间了，主要麻烦的是，以前没有，后来，Chrome和Safari浏览器升级了，然后出现这个错误，而且就在一个月前，Chrome浏览器还只是黄色的警告，现在直接就红色错误献上。例如，随便新建一个空白页面，写上如下JavaScript代码：document.addEve...
2019-04-12 09:29:06
738
转载 inline-block元素与父div底边之间的间距问题
在一些情况下，inline-block的元素距离父div底边会有距离，让我们看一下例子：例子1，两个inline-block元素，设定了固定的宽高，第一个有文字，第二个没有文字：<!--css-->.div1{background-color: red;color: white;}.div2{background-color: blue;...
2019-04-10 15:47:52
1262
转载 使用HTML5的History API
HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用，例如通过一段JavaScript代码局部加载页面的内容，你希望通过改变当前页面的URL来反应出页面内容的变化，这时该功能可以派上用场。举个例子，当用户从首页进入帮助页面时，我们通过Ajax来加载帮助页面的内容。然后这个用户又转到产品页面，我们需要再一次通过Ajax请求来替换页面...
2019-01-24 15:46:45
971
原创 webpack4打包fs,net,tls报错
问题原因：package.json 中 配置错误 "scripts": { ..... "dev": "webpack-dev-server webpack-dev-server --config webpack.config.js", .... },
2019-01-22 12:50:27
1335
原创 webpack打包不识别template标签
错误原因：module: { rules: [ ... { test: /\.vue$/, include: '/src/', loader: 'vue-loader' } ] },正确写法： module: { rules: [ ... { tes...
2019-01-21 16:05:00
1480
1
转载 requestAnimationFrame 使用方法
requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道，不管三七二十一直接在 requestAnimationFrame 的回调函数里绘制动画会有一个问题。是什么问题呢？要理解这个问题，我们先要了解 requestAnimationFrame 的一个知识点。requestAnimationFrame 不管理回调函数这个知识点就是 reques...
2019-01-12 12:38:52
3015
转载 被誉为神器的requestAnimationFrame
前面的话与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？为什么requestAnimationFrame被称为神器呢？本文将详细介绍HTML5新增的定时器requestAnimationFrame引入计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间...
2019-01-11 17:40:32
214
转载 理解setTimeout和setInterval
前面的话很长时间以来，定时器一直是javascript动画的核心技术。但是，关于定时器，人们通常只了解如何使用setTimeout()和setInterval()，对它们的内在运行机制并不理解，对于与预想不同的实际运行状况也无法解决。本文将详细介绍定时器的相关内容setTimeout()setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数，表示定时器...
2019-01-11 17:33:38
423
转载 浏览器解析过程
一：浏览器高层结构1.1：浏览器结构图1：user interface ：浏览器交互界面2：browser engine：浏览器引擎：接收用户界面指令传给解析引擎3：render engine：呈现引擎：负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML和 CSS 内容，并将解析后的内容显示在屏幕上4：network：网络，传输网络资源5：js ：javascr...
2019-01-11 15:11:43
1267
转载 小福利---前端小技巧
将彻底屏蔽鼠标右键，无右键菜单&lt;body oncontextmenu=window.event.returnvalue=false&gt;也可以用于网页中Table框架中&lt;table border oncontextmenu=return(false)&gt;&lt;td&gt;no&lt;/table&gt;取消选取、防止复制
2019-01-10 14:18:43
224
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人