![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 57
一只无畏的小菜鸟
这个作者很懒,什么都没留下…
展开
-
性能优化之节流
在前端性能优化方面,我们除了以往的那些减少DOM操作,减少请求等等这些外,还有节流,防抖,重回重排等知识点可以优化;为什么要用到节流呢?比如一个表单提交,由于DNS解析、TCP链接等响应时间较长的时候,使用者在不知情的情况下在短时间内多次点击提交按钮,这样就会发起多个请求,这就对性能产生了极大的消耗。使用节流去控制,利用闭包原理达到封装一个节流方法去控制的目标// 定义一个节流函数// 接收两个参数,一个是需要节流的函数,一个是等待时间,默认设置为100msfunction throttle(f原创 2021-07-01 22:22:13 · 171 阅读 · 0 评论 -
Cookie、SessionStorage与localStorage
CookieCookie是为了解决HTTP无状态的一件产物,希望与特定用户相关的信息能够保存在用户的机器上,而HTTP协议并不能帮助我们实现这种功能,因此Cookie也就随之而诞生了出来。Cookie实现原理:客户端请求服务器后,如果服务器需要记录用户状态,服务器会在响应信息中包含一个Set-Cookie的响应头,客户端会根据这个响应头存储Cookie信息。之后客户端向服务器发起请求时,都会携带一个名为Cookie的请求头信息,里面包含之前存储好的Cookie信息。//响应头HTTP/1.1 200原创 2021-05-07 15:37:46 · 115 阅读 · 0 评论 -
web常见攻击手段
XSS(Cross site scripting)跨站脚本攻击,因为缩写和CSS重叠,所以叫做XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的非本站点HTML标签或JavaScript进行的一种攻击。影响:利用虚假输入表单骗取用户个人信息。利用脚本窃取用户的Cookie值,被害者在不知情的情况下,帮助攻击者发送恶意请求。显示伪造的文章或图片。XSS攻击分为两大类:反射型 - 通过URL参数直接注入http://localhost:3000/?from=原创 2021-05-06 10:41:40 · 138 阅读 · 2 评论 -
webpack入门
什么是webpack?Webpack可以看做是模块打包机:它做的事情是,分析你的项⽬结构,找到JavaScript模块以及其它的⼀些浏览器不能直接运⾏的拓展语⾔(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使⽤。安装(前提先安装node环境)全局安装 —不推荐npm install webpack webpack-cli -g // webpack-cli 可以帮助我们在命令里使用npx、webpack等相关指令webpack -v\\卸原创 2021-04-27 15:10:00 · 76 阅读 · 0 评论 -
Vue组件中的data为什么必须是一个函数
关于Vue中的data为什么必须是一个函数,咱们直接上源码:在初始化data的时候,我们可以看到针对于data数据的处理data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}如果传过来的data是一个函数,那么就执行getData()这个工厂函数,这样每一个实例的data都能够保持唯一性,独立性,互不干扰。总结:Vue组件可能存在多个实例,如果使用对象形式去定义data,会导原创 2021-04-22 16:46:43 · 209 阅读 · 0 评论 -
Vue中 v-vif 与v-for 的问题
Vue中针对于v-if与v-for的使用可能会有一些疑问,比如两者在同一级时,谁的优先级比较高,应该这样去处理会更好。首先我们看vue中的源码:源码中对于v-for的执行先与v-if,因此v-for的优先级高于v-if的优先级。因此当两者在同一级一起使用时,会出现性能方面的问题,因为不管你的v-if里的语句是否为true,都会先执行v-for去循环。要避免这种情况,可以在外面嵌套一层template,在这一层去做判断,然后在内部进行v-for循环。还有一种情况,比如判断的条件是循环项的值,为了避原创 2021-04-22 16:28:59 · 2508 阅读 · 0 评论 -
Http 常见状态码
HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误,能够根据返回的状态码判断请求是否得到正确的处理很重要。状态码由3位数字和原因短语组成,例如下图所示:数字中的第一位指定了响应类别,后两位无分类,响应类别有一下5种:状态码分类表类别原因短语1xxInformational(信息性状态码)接受的请求正在处理2xxSuccess(成功状态码)请求正常处理完毕3xxRedirection(重定向)需要进行附加操作以完成请转载 2021-04-21 14:14:14 · 59 阅读 · 0 评论 -
JS继承(二)
在JS继承(一)中总结了继承的原型链继承、盗用构造函数继承以及组合继承三种继承方式,当然js中的继承方式不仅仅这三种方式,所以这次再总结一下其它继承模式;原型式继承原型式继承使用情况:你有一个对象,想在它的基础上再创建一个新对象。通过Object.create()实现,这个方法接收两个参数:作为新对象原型的对象,以及给新对象定义额外属性的对象。let person = { name: "Jackson", friends: ["Jimi","Van","Jhone"]};let anothe原创 2021-04-21 12:06:29 · 41 阅读 · 0 评论 -
闭包
什么是闭包?闭包是指能够访问另一个函数作用域的变量的函数。通俗来说,闭包就是一个函数,这个函数能够访问其它作用域中的变量。我们先来看一个例子:function outer(m){ return { inner:function(){ console.log(m) } }}outer('测试').inner()执行上述代码后,有的同学就懵了,m不是outer这个函数作...原创 2021-04-13 17:08:49 · 55 阅读 · 0 评论 -
ES6函数拓展
前言函数对我们来说使用是非常频繁的,ES6中对于函数又加入了很多非常好用的内容,最近看完这一块之后,觉得很有必要整理一下。Es6中的参数默认值经常使用javascript的人都知道在ES5中如果我们想要对所传参数设置默认值,我们需要在函数体内一开始的地方编写,比如:function fnc( a, b ){ // 给b设置默认参数 b = b || 10; return a+b;}// 传入 a 与 bfnc(2,3) // 返回 5// b不传值fnc(5) // 返回原创 2021-03-17 14:24:54 · 79 阅读 · 0 评论 -
css 实现子元素相对父元素上下左右居中
在排版布局的过程中,我们不难遇到需要实现这么一个要求,我们希望子元素相对于父元素水平和垂直方向上都居中。水平居中相信大家都很熟悉了,只需要设置margin:0 auto就行,但垂直居中的话,就不是那么简单了。下面我就分享一下我所了解的实现这一需求的方法。首先准备两个盒子,一个parent-box, 一个child-box;第一种方式,利用position与margin结合<div cl...原创 2020-04-24 14:43:34 · 1856 阅读 · 0 评论 -
js异步编程
回调函数事件监听PromiseGenerators/yield转载 2020-03-13 14:14:19 · 111 阅读 · 2 评论 -
前端常见跨域解决方案
什么是跨域?跨域是指一个域下的文档或脚本去请求另一个域下的资源文档,根据浏览器同源策略,同源是指 协议+域名+端口都相同,有一个不同都会产生跨域行为。同源策略限制一下行为:localstorage,cookie和IndexDB无法读取Dom 和 js 对象无法获取Ajax请求不能发送常见的跨域场景跨域解决方案JSONP通常为了减轻web服务器的负载,我们把js,css,im...转载 2021-03-17 14:32:24 · 755 阅读 · 0 评论 -
箭头函数
ES6允许使用箭头“=>” 定义 函数var foo = v => v;//类似于var foo = function (v){ return v;}如果箭头函数没有参数或者有多个参数就用圆括号包起来var foo = ()=> 'hello'相当于var foo = function (){ return 'hello'};多个参数var foo ...原创 2020-03-11 15:11:38 · 78 阅读 · 0 评论 -
flex布局语法总结
其实在布局中,我们想要让一个元素在水平轴上居左居右或居中是很容易实现的,但是在垂直轴上就不是那么轻易搞定了,相信你在布局的时候也会遇到这样的情况,想让一个盒子垂直居中显示,但又不能去设置line-height或者margin,padding等值问题的困扰。W3C针对这一问题提出了flex布局这一方案。可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能...原创 2020-03-11 10:27:10 · 155 阅读 · 0 评论 -
ES6块级命令与解构赋值
一、let,const 块级作用域块级作用域 { … } ,通过let与const定义的变量只在当前的花括号里能够访问{ var str = "hello world"; let str1 = "sdhkaj"; const str2 = "sdmak";}console.log( str ); // 输出 "hello world"console.log( str1 ); /...原创 2020-03-10 16:17:02 · 99 阅读 · 0 评论 -
页面导入样式时,使用link和@import有什么区别
在html设计编写中,样式有四种方式作用于网页,分别是:内联样式,嵌套样式,链接样式 ( link ),导入样式(@import )。内联样式以及嵌套样式在这里我们就不做过多的介绍,我们都知道内联样式只对当前标签有用,嵌套样式只在当前页面起作用;我们接着说链接样式 link 与导入样式 @import的区别:1、link属于XHTML标签,除了可以加载css外,还可以定义RSS等其它事务,@...原创 2020-02-14 10:44:30 · 512 阅读 · 0 评论 -
vue 组件传值、通信
父组件=>子组件属性props//childprops:{ msg: String }//parent<HelloWorld msg="welcome to vue.js" \>引用refs//parent<HelloWorld refs="test" />this.$refs.test.xxx子组件=>父组件自定义事件//child...原创 2020-02-10 10:29:55 · 85 阅读 · 0 评论 -
get和post请求的区别
一、get把请求参数放在URL中,而post通过request body 传递参数;二、get 在浏览器回退时是无害的,而post会再次提交请求;三、get 请求参数会被完整保留在浏览器历史记录里,而post中的参数不会被保留;四、get 请求在URL中传递的参数是有长度限制的,而post没有;五、由于get请求的参数是直接暴露在URL上的,所以不能用来传递敏感信息,get请求比post更...原创 2020-02-08 12:59:09 · 332 阅读 · 0 评论 -
web 前端性能优化汇总
本文为CSDN博主「JesonAx」的原创文章原文链接:https://blog.csdn.net/qq_34927733/article/details/103051612一、 网络层面优化减少http请求,合并资源(js、css、图片)减少资源体积,压缩资源(js、css、图片)大量数据加载或大量图片加载时使用懒加载或预加载优化使用按需加载,加快首屏渲染速度利用http缓存机制,...转载 2019-11-14 13:57:09 · 102 阅读 · 0 评论