前端
文章平均质量分 61
mmjinglin
这个作者很懒,什么都没留下…
展开
-
面试之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 · 217 阅读 · 0 评论 -
面试之原型及深浅拷贝
原型Javascript中大部分的数据都是对象,他们的根对象是Object.prototype对象。在JavaScript中所有的对象都是从Object. Prototype克隆而来,Object. Prototype对象就是她们的原型。要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它。对象会记住它的原型。如果对象无法响应某个请求,它会把这个请求委托给它的构造器的原型原型链每个对象都一个原型对象,这个原型对象由对象内置属性_proto_指向它的构造函数的proto.原创 2021-03-10 23:43:54 · 196 阅读 · 0 评论 -
ES6中map原理
es6的map的键可以是任意的数据结构,并且不重复。那么map的底层原理是啥呢?map利用链表,hash的思想来实现。首先,map可以实现删除,而且删除的数据可以是中间的值。而链表的优势就是在中间的任意位置添加,删除元素都非常快,不需要移动其他元素,直接改变指针的指向就可以。。而在存储数据很多的情况下,会导致链条过长,导致查找效率慢,所以我们可以创建一个桶(存储对象的容器),根据hash(把散列的值通过算法变成固定的某值)来平局分配数据,防止链条过长。如下图:桶里面有3个..转载 2021-03-10 23:35:43 · 433 阅读 · 0 评论 -
面试之ES6新特性
ES6 新特性块级作用域let和const,变量提升。Var变量定义在赋值之前,引用时不会报错,因为编译时将var定义提前,执行位置不变。函数声明会提升到变量声明之前。块级作用域中的函数声明也会被提前,例如 if..else中两个函数声明都会提升。Let用来劫持块级作用域的。也就是将一个块转换成一个封闭的作用域。Const即常量,不可更改属性,如果更改则发生TypeError 2. 引入class类,super继承父类方式。为继承提供了可能。Js的class并不像传统的继承一...原创 2021-03-10 23:32:22 · 330 阅读 · 0 评论 -
面试之性能
性能1.代码执行过程会阻塞浏览器的其他进程,比如页面绘制、a.讲脚本放在页面底部b.合并脚本,减少script标签数。压缩脚本c.使用无阻塞下载。例如defer属性,xhr对象下载。SSR服务端渲染d.使用CDN,设置HTTP响应头来缓存JS2.数据存储位置对性能的影响。数据存储份字面量,变量,数组项,对象成员。a.字面量和局部变量访问速度快,访问数组元素和对象成员相对较慢。b.嵌套对象,原型链属性,层次越深,访问速度越慢。3. 利用缓存:DOM...原创 2021-03-10 23:22:37 · 71 阅读 · 0 评论 -
面试之浏览器渲染原理
浏览器渲染过程解析HTML并构建DOM树 处理CSS构建CSSOM树 将DOM与CSSOM合并成一个渲染树Render Tree 根据渲染树来布局,计算每个节点的位置Layout 调用GPU绘制,合成图层,显示在屏幕上 Painting回流(重排reflow) 当DOM的变化影响了元素的几何属性(宽和高),比如改变边框宽度或给段落增加文字,导致行数增加。浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,...原创 2021-03-10 23:19:12 · 107 阅读 · 0 评论 -
面试之闭包与作用域
闭包由于JS中变量的作用域属于函数作用域,在函数执行后作用域就会被清理,内存也随之销毁。而闭包时建立在函数内部的子函数,由于它对上级作用域具有 可访达性。因此在上级函数自行完毕后,这个函数内的作用域还存在引用,因此无法销毁。实际上,闭包其实就是缓存作用域,使函数外部打破函数作用域的约束。可以访问函数内部的变量。同样,他的副作用就是销毁内存。使用场景:ajax中的回调函数,setTimeout中的匿名函数。或者一个函数返回函数,其实也是闭包。作用域作用域分全局作用...原创 2021-03-10 23:15:43 · 129 阅读 · 0 评论 -
面试之缓存
缓存 https://blog.csdn.net/qq_38719039/article/details/79977474CookieCookie时以键值对的形式保存的,每个cookie间一般是以”;”分隔。它是浏览器提供的一种机制。将document的cookie属性提供给javascript使用。Cookie是存于用户硬盘的一个文件。这个文件通常对应一个域名。当浏览器访问这个域名时,此cookie便可使用。因此,cookie可以跨越一个域名下的多个网页 ,但不能跨越多个域名使用。.原创 2021-03-10 23:09:38 · 132 阅读 · 0 评论 -
面试总结-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 · 1612 阅读 · 0 评论 -
防抖节流
为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高导致的响应跟不上触发频率,出现延迟,假死或卡顿的现象。防抖在事件被触发N秒后再执行回调函数,如果N秒内再次触发 ,则重新计时。例如 :频繁输入中,数据对应更新问题。利用防抖可以通过定时器延迟执行数据加载请求,当规定时间内有二次触发,则清除定时器重新添加定时器。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2021-01-27 15:18:47 · 144 阅读 · 0 评论 -
九大基本设计原则
@Sandijs Ruluks早在2014年就针对响应式设计提出九大基本设计原则。响应式 vs. 自适应网页设计很多初学都都容易把响应式设计和自适应设计混淆。事实上,它们看起来似乎是相同的,但事实并非如此。这两种方法相辅相成,并没有说哪个是正确的那个是错误的,内容决定一切。内容流动随着屏幕尺寸变小,内容将会占据更多的垂直空间,而下方的内容就会被接着往下推,这就是所谓的流动。如果你是使用像素或磅来进行设计的,这可能会有点棘手,但是当你习惯了之后,就会变得很有意义了。相对单位转载 2021-01-18 20:10:37 · 215 阅读 · 0 评论 -
vue原理
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt原创 2018-09-18 17:46:05 · 458 阅读 · 0 评论 -
webpack4打包fs,net,tls报错
问题原因:package.json 中 配置错误 "scripts": { ..... "dev": "webpack-dev-server webpack-dev-server --config webpack.config.js", .... },原创 2019-01-22 12:50:27 · 1289 阅读 · 0 评论 -
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 · 1215 阅读 · 0 评论 -
小tips: touch-action简介与treated as passive错误解决
一、Chrome和Safari浏览器preventDefault报treated as passive错误其实这个问题出现有一段时间了,主要麻烦的是,以前没有,后来,Chrome和Safari浏览器升级了,然后出现这个错误,而且就在一个月前,Chrome浏览器还只是黄色的警告,现在直接就红色错误献上。例如,随便新建一个空白页面,写上如下JavaScript代码:document.addEve...转载 2019-04-12 09:29:06 · 702 阅读 · 0 评论 -
js事件冒泡和事件捕获详解
Javascript与HTML之间的交互是通过事件实现。一、事件流事件,是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流,描述的是页面中接受事件的顺序。IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式。事件冒泡事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中...转载 2019-05-29 16:42:00 · 214 阅读 · 0 评论 -
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 · 263 阅读 · 0 评论 -
前端入过的坑
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 · 264 阅读 · 0 评论 -
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 · 164 阅读 · 0 评论 -
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 · 3000 阅读 · 0 评论 -
aos
原创 2019-09-11 17:35:56 · 251 阅读 · 0 评论 -
webpack打包不识别template标签
错误原因:module: { rules: [ ... { test: /\.vue$/, include: '/src/', loader: 'vue-loader' } ] },正确写法: module: { rules: [ ... { tes...原创 2019-01-21 16:05:00 · 1431 阅读 · 1 评论 -
编写更优雅的 JavaScript 代码
总结下对 JavaScript 代码编写的认识,写尽可能优雅的代码。代码技巧ES2015+ 新特性写法熟练使用 ES6 新特性可以优化代码,更加简洁,代码对比// 箭头函数function foo(){ console.log('hello world')}const foo = () => console.log('hello world')// 数组去重co...转载 2019-01-09 10:15:10 · 155 阅读 · 0 评论 -
页面请求与HttpServlet
form表单中Enctype表明提交数据格式。(Content-Type 类型)enctype有三个属性application/x-www-from-urlencoded,multipart/form-data,text/plain**application/x-www-from-urlencoded: **在发送前对所有字符进行编码。默认设置。一般get和post请求都是applicati...原创 2018-09-19 20:04:22 · 392 阅读 · 0 评论 -
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别:1、保持状态: cookie保存在浏览器端,session保存在服务器端2、使用方式:(1)cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中...转载 2018-09-25 17:13:06 · 116 阅读 · 0 评论 -
webpack开发调试模式devtool
devtool 有7种模式eval 文档上解释的很明白,每个模块都封装到 eval 包裹起来,并在后面添加 //# sourceURLsource-map 这是最原始的 source-map 实现方式,其实现是打包代码同时创建一个新的 sourcemap 文件,并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿hidden-source-map...转载 2018-09-19 18:45:07 · 3029 阅读 · 0 评论 -
webpack 多应用入口 笔记
1.所需插件:webpack/webpack-dev-server/webpack-merge2.babel 相关插件 (用来对ES6语法进行转换)babel-core/babel-loader/babel-preset-env3.样式处理相关插件css-loader/style-loader/postcss-loader/antoprefixerautoprefixer:是一款自动管...原创 2018-09-19 18:15:44 · 312 阅读 · 0 评论 -
VUE如何追踪变化
来源:https://cn.vuejs.org/v2/guide/reactivity.html转载 2018-09-19 17:01:47 · 2069 阅读 · 0 评论 -
前端知识点
css-8:三种隐藏方式差别:visibility:hidden;display:none;opacity:0渲染桑的差异:1.display:none不占位。将元素设置为display:none后,浏览器将回流和重绘2.visibility:hidden占位3.opacity:0,透明度为0。事件上的差异1.display:none;元素彻底消失,不会触发绑定事件2.visibil...原创 2018-09-18 17:30:02 · 112 阅读 · 0 评论 -
axios的原理
vue自2.0开始,vue-resource不再作为官方推荐的ajax方案,转而推荐使用axios。按照作者的原话来说:“Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的...转载 2018-09-18 17:28:56 · 21826 阅读 · 1 评论 -
CSRF是什么
跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。[1]跟跨网站脚本(XSS)相比,XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任。攻击细...转载 2018-09-18 17:24:57 · 237 阅读 · 0 评论 -
Jquery ajax, Axios, Fetch区别
1 JQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});这个我就不用多言了把,是对原生XHR的封装,除此以外还增添了对JSONP的支持。有一说一的说一句,JQ...转载 2018-09-18 17:14:11 · 121 阅读 · 0 评论 -
Proxy|MDN
Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。术语handler包含陷阱(traps)的占位符对象。traps提供属性访问的方法。这类似于操作系统中陷阱的概念。target代理虚拟化的对象。它通常用作代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量(保持不变的语义)。语法let p = new Proxy(target, ...转载 2018-12-19 14:52:21 · 715 阅读 · 0 评论 -
数据劫持 OR 数据代理(Proxy与Object.defineProperty)
所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。另外还有已经被废弃的 Object.observe(),废弃的原因正是 Proxy 的出现,因此这里我们就不继续讨论这个已经被浏览器删除的方法了。数据劫持最著名的应用当属双向绑定,...转载 2018-12-19 15:15:25 · 1829 阅读 · 0 评论 -
优雅的 JavaScript 排序算法(ES6)
面试官:小伙子排序算法了解吗?回答:我能写出来四种冒泡排序,两种选择排序,两种插入排序,两种哈希排序,两种归并排序,两种堆排序,四种快速排序。用我自己的方式。本文中常使用 swap 函数,在这里提前列出来,以下就省略了。function swap(arr, indexA, indexB) { [arr[indexA], arr[indexB]] = [arr[indexB], ar...转载 2019-01-09 09:52:01 · 6394 阅读 · 1 评论 -
使用HTML5的History API
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的URL来反应出页面内容的变化,这时该功能可以派上用场。举个例子,当用户从首页进入帮助页面时,我们通过Ajax来加载帮助页面的内容。然后这个用户又转到产品页面,我们需要再一次通过Ajax请求来替换页面...转载 2019-01-24 15:46:45 · 915 阅读 · 0 评论 -
JavaScript 复杂判断的更优雅写法
前提我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你试一下。举个例子先看一段代码/** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行...转载 2019-01-08 19:49:44 · 119 阅读 · 1 评论 -
Event Loop
简单点讲 event loop 就是对 JS 代码执行顺序的一个规定(任务调度算法)先看看两幅图JS engineJS runtimeNOTE:一个 web worker 或者一个跨域的 iframe 都有自己的栈,堆和消息队列。两个不同的运行时只能通过 postMessage方法进行通信。如果另一运行时侦听 message 事件,则此方法会向其添加消息。HTML Event...转载 2019-01-08 19:41:43 · 195 阅读 · 2 评论 -
requestAnimationFrame 使用方法
requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在 requestAnimationFrame 的回调函数里绘制动画会有一个问题。是什么问题呢?要理解这个问题,我们先要了解 requestAnimationFrame 的一个知识点。requestAnimationFrame 不管理回调函数这个知识点就是 reques...转载 2019-01-12 12:38:52 · 2928 阅读 · 0 评论 -
被誉为神器的requestAnimationFrame
前面的话与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔。这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详细介绍HTML5新增的定时器requestAnimationFrame引入计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间...转载 2019-01-11 17:40:32 · 191 阅读 · 0 评论