
前端
文章平均质量分 62
柠檬布丁^O^
越努力越幸运
展开
-
whistle的安装和配置
第一步:安装whistle,在控制台输入:npm install -g whistle第二步:启动whistle,在控制台输入:w2 start在Rules中的defalut中配置接口,格式如:url file://{接口名.json}在Rules创建一个测试环境,如nginx87,然后在这个文件中配置服务器代理,如baidu.com 127.0.0.1:8080 配置完双击打开在Values配置接口的值:勾选Capture TUNNEL CONNECTS 和Enable HTTP/原创 2020-08-13 18:34:27 · 4934 阅读 · 0 评论 -
vi/vim基本命令
vi/vim常用命令:i:切换光标为输入模式esc:退出输入模式,切换到命令模式底线命令模式:在命令模式下按下 :(英文冒号)就进入了底线命令模式q退出程序w保存程序按esc键可以退出底线命令模式想要退出保存:wq...原创 2020-05-26 11:57:11 · 214 阅读 · 0 评论 -
swiper实现常规轮播效果
/*html代码*/<div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"> slide1 </li> <li class="swiper-slide"> ...原创 2020-03-06 17:27:22 · 457 阅读 · 0 评论 -
本地分支没有提到远程无法review的解决
1.切到master分支gco master2.在master分支新建一个分支gco -b feature-register-2.0.03.把新建的分支push到源git push --set-upstream origin feature-register-2.0.04.切到之前的分支赋值提交的commit。然后执行git cherry-pick 0e192735.可以去查看下是...原创 2020-01-15 18:59:38 · 904 阅读 · 0 评论 -
Mac上nginx的安装与踩坑解决
1.首先可以通过brew search nginx命令查看是否安装的nginx,如果安装了就不用安装了,如何想要重新安装可以用brew reinstall nginx安装。如果没有安装使用brew install nginx进行安装。2.安装完可以通过brew list nginx命令查看有哪些目录列表方便下面的修改。3.启动nginx直接在命令行输入nginx,如果下面问题代表当前用户权限不...原创 2020-01-07 20:34:38 · 953 阅读 · 0 评论 -
h5开发时,解决在移动端ios点击事件出现闪频
在点击事件的元素上加以下样式,比如点击事件元素类为.btn{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}原创 2020-01-02 16:26:03 · 523 阅读 · 0 评论 -
误操作直接git review没有加分支名
1.首先将代码submit到主分支(master)2.在本地切换到主分支git checkout master3.删除之前的分支git branch -D 分支名4.拉取最近的代码git pull5.切换到源端的之前的分支git checkout --track origial/分支名可以继续你的代码了...原创 2019-12-18 17:08:11 · 651 阅读 · 0 评论 -
多个commit合并一个commit提交
1.通过git log查看有几个commit2.比如有5个commitgit rebase -i HEAD~5注:如果已经rebase过,执行git rebase --abort再git rebase -i HEAD~53.进入Vi,点击i编辑,根据提示将第一个commit前面的第一个单词改成...原创 2019-12-01 16:57:04 · 1966 阅读 · 0 评论 -
嵌入在HTML文档中的图像格式有哪些,都有些什么特点?
格式透明压缩动画颜色数浏览器兼容性特点GIF支持,但不是alpha透明无损支持8位全部支持简单动画,颜色少,有锯齿PNGalpha透明无损支持8位和24位IE6不支持透明压缩比稿,色彩好,除了动画,其余方面和替代GIFJPEG不支持有损支持24位全部支持存储照片或颜色丰富的复杂图像APNGalpha透明有损支...原创 2018-12-25 16:32:04 · 6813 阅读 · 0 评论 -
安全防范知识点(XSS、CSRF、点击劫持、中间人攻击)
什么是XSS攻击?如何防范XSS攻击?什么是CSP?XSS简单来说,就是攻击者想尽一切办法可以执行的代码注入到网页中。XSS可以分为多种类型,但是总体上分为两类:持久型和非持久型。持久型也就是攻击的代码被服务端写入数据库中,这种攻击危害性很大,因为如果网站访问量很大的话,就会到导致大量正常访问页面的用户都受到攻击。举个例子,对于评论功能来说,就是防范持久型XSS攻击,因为我可以在评论中输入...原创 2019-03-11 14:39:12 · 2528 阅读 · 0 评论 -
Vscode的常用快捷键
Vscode的常用快捷键:单行注释:ctrl+/多行注释:alt+shift+A复制当前行:shift+alt+up/down删除当前行:shift+ctrl+k控制台终端显示与隐藏:ctrl+~新建一个窗口:ctrl+shift+n显示git:ctrl+shift+g全局查找文件:ctrl+shift+f...转载 2019-03-17 16:24:01 · 365 阅读 · 0 评论 -
webpack性能优化(减少webpack打包时间,让webpack打出来的包更小)
减少webpack打包时间1.优化Loader对于Loader来说,影响打包效率首当齐冲必属Babel了。因为babel会将代码转为字符串生成AST,然后对AST继续进行转变最后生成新的代码,项目越大,转化代码越多,效率就越低。当然了,我们是有办法优化的。module.exports={ module:[ rules:[ { //js文件才使用babel test...转载 2019-03-12 17:29:06 · 4367 阅读 · 0 评论 -
Flex的相关知识
布局传统的解决方案,基于盒状,依赖dispaly属性+position属性+float属性。它对于那些特殊布局非常不方便,比如,垂直剧中就不容易实现。Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到所有浏览器的支持。任何一个容器都可以制定为flex。行内元素也可以使用Flex布局。webkit内核的浏览器,必须加上-webkit前缀。注意:设为Flex布局以后,子元...转载 2019-03-18 14:41:41 · 174 阅读 · 0 评论 -
HTTP的相关知识
HTTP:超文本传输协议,用于在浏览器和web服务器之间传输超文本页面。HTTP的版本HTTP1.1的缺点:1)在传输中会出现对首阻塞问题2)响应不分轻重缓急,只会按先来后到的顺序执行3)并行通信需要建立多个TCP连接4)服务器不能主动推送客户端想要的资源,只能被动地等待客户端发起的请求5)由于HTTP是无状态的,所以每次请求和响应都会携带大量冗余信息。HTTP...原创 2018-11-28 12:34:31 · 388 阅读 · 0 评论 -
浏览器同源策略以及跨域解决方法
浏览器的同源策略:同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。只允许访问来自同一站点的资源,而不是那些来自其它站点可能带有恶意代码的资源。所谓同源是指:域名、协议、端口相同。同源策略还可以分为两种:1.DOM同源策略:禁止对不同源页面DOM进行操作。...转载 2019-04-03 09:41:42 · 674 阅读 · 0 评论 -
刷题(leetcode数组相关)
1.两数之和给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是,你不能重复利用这个数组中同样的元素。思路一.遍历数组中的每个数,与它后面每个数相加的结果是否等于targetvar twoSum = function(nums, target) { for(var i=0...原创 2019-04-03 19:53:52 · 865 阅读 · 0 评论 -
html中随机生成假文
输入Lorem按tab键原创 2018-12-08 21:00:31 · 3962 阅读 · 0 评论 -
浏览器前缀、属性级前缀及CSS Reset
浏览器前缀前缀浏览器渲染引擎-ms-IETrident-webkit-ChromeBlink-webkit-SafariWebkit-moz-FirefoxGecko-o-OperaPresto属性级前缀前缀兼容的浏览器示例_IE6_width:10px*IE6和IE7*width:10...原创 2018-12-29 21:31:56 · 306 阅读 · 0 评论 -
重排(reflow)和重绘(repaint)
什么是重排:引起DOM树重新计算的行为。什么时候会发生重排:添加或删除可见的DOM元素元素的位置改变元素的尺寸大小改变元素的内容改变页面渲染初始化浏览器窗口尺寸改变什么是重绘:元素可见的外观被改变,但并没有影响到布局什么时候会发生重绘:DOM元素的字体颜色重绘不会带来DOM元素的重新计算,所以并不一定伴随重排,但是重排一定会引起浏览器的重绘。如何减少重排或重绘1.合并...原创 2018-12-18 22:14:02 · 553 阅读 · 0 评论 -
HTTPS和HTTP的区别,及HTTPS的相关知识
HTTPS(HTTP Secure)是一种构建在SSL或TLS上的HTTP协议,简单地说HTTPS就是HTTP的安全版本。SSL(Secure Sockets Layer)以及其继任者TLS(Transport Layer Security)是一种安全协议,为网络通信提供来源认证、数据加密和报文完整性检测,保证通信的保密性和可靠性。HTTS协议都以"https://"开头,在访问某个Web页面时,...原创 2018-12-24 15:53:47 · 347 阅读 · 0 评论 -
什么是Ajax和JSON?它们各有的优缺点
Ajax是异步的JavaScript和XML优点:(1)页面无刷新,用户体验比较好。(2)使用异步方式与服务器通信,具有更加迅速的响应能力(3)可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本,并且减轻服务器负担。Ajax的原则是“按需取数据”,可以最大程度地减少冗余请求和响应对服务器造成的负担。(4)基于标准化的并被...原创 2018-12-19 13:47:01 · 5241 阅读 · 1 评论 -
Chrome浏览器的线程模型
程序:计算机可以执行的代码,存在于磁盘中(静止的)进程:把程序调入到内存中,准备执行(动态的,可被执行的),等待CPU执行–活动的线程:是CPU执行进程代码的基本单位–生产任务进程和线程间的关系:进程是操作系统分配内存的基本单位。线程处于线程的内部。是CPU执行代码的基本单位。一个进程至少有一个线程,也可以有多个。多个线程之间并发执行。—宏观上看是“同时执行”,微观上看是“轮流”执行...原创 2018-12-03 20:21:39 · 1298 阅读 · 2 评论 -
如何在服务器端下载的网页中显示客户端的图片
一般情况下,网页只能显示服务器上的图片。(网页中的图片都是从服务器端请求来的图片)。如何实现页面中显示客户端的图片呢?(比如说在桌面上拖拽一个图面到网页中的容器中)HTML5中提供的用于文件输入输出(I/O)的对象:File:代表一个文件/目录文件对象FileList:代表一个文件列表(类数组对象)FileReader:用于从文件中读取内容FileWriter:用于向文件写出内容&...原创 2018-12-03 18:21:52 · 428 阅读 · 0 评论 -
使用 Proxy实现观察者模式
//观察目标const person=observable({ name:'远方', age:'18'});//观察者function print(){ console.log(`${person.name},${person.age}`);}observe(print);//数据对象发生变化,print就会自动执行person.name='星星';//星星const qu...原创 2018-12-09 00:08:29 · 643 阅读 · 0 评论 -
DNS解析过程
DNS解析过程:首先查找浏览器本身的域名缓存, 如果缓存了相应的IP地址,直接从缓存中获取,如果没有缓存,然后找window系统自身的缓存,如果找到了相应的IP就返回,如果也没有找到,...原创 2018-12-05 09:46:06 · 267 阅读 · 0 评论 -
CDN的相关知识
CDN的由来:用户可就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的速度。不同地区的用户访问同一个地方的服务器就会存在高延迟问题,解决的方案是在用户访问比较集中的地区部署更多的服务器,将目的服务器的内容拷贝到离用户较近的服务器,从而使用户可以就近的获取数据,有效解决服务器访问速度的问题。用户就近访问服务器的好处:1)提高用户的访问速度2)减轻服务器的压力3...原创 2018-12-04 20:35:46 · 370 阅读 · 0 评论 -
如何编写响应式页面与media-query(媒体查询)
如何编写响应式网页(1)必须声明viewport标签<meta name="viewport" content="width=device-width,initial=1.0,user-scalable=no">(2)容器尽量使用相对尺寸尽量避免绝对尺寸:div.container{width:500px;}使用相对尺寸代替:div.container{width:80%}...原创 2018-11-29 22:01:28 · 1272 阅读 · 0 评论 -
WebSocket的相关知识
HTTP与WebSocket的区别:HTTP与WebSocket都是应用层协议。HTTP协议:是基于“请求和响应”模型的协议,客户端发起一个请求,服务器就要返回一个请求,请求消息和响应消息时一一对应的,没有请求就没有响应。在一些特别的应用场景下(如实时走势图,在线聊天室),只能使用“定时器+ajax”不停的向服务器发起请求以获得最新的数据—“心跳请求”,解决方案不完美,心跳过快服务器压力过大...原创 2018-12-04 15:44:16 · 129 阅读 · 1 评论 -
Webstorage及localStorage、sessionStorage和cookie的区别,cookie与session的区别
Web项目中需要存储多种数据,比如用户的信息,商品的信息、评论等等。大体上有两种存储的方法是:(1)服务器端存储1)数据库技术:存储项目中的核心数据2)Session技术:存储当前用户的信息(2)客户端存储:不太紧要的与客户端有关的数据(比如浏览记录、内容定制、样式的定制)1)Cookie技术:使用比较繁琐、数据的数量和长度大小不能超过4KB2)Flash技术:逐渐被淘汰3)WebS...原创 2018-12-04 10:32:47 · 631 阅读 · 0 评论 -
doument.write与innerHTML的区别
write是document对象的一个方法,是在页面里面写内容会覆盖页面原来的内容。innerHTML是DOM元素对象的一个属性,用于设置元素的内容。&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;met原创 2018-12-14 11:15:02 · 422 阅读 · 0 评论 -
编写Javascript函数来实现单击id为test的列表中的li时获取其内容。(事件委托)
利用事件委托,通过冒泡原理将子元素的点击事件交给父元素来处理&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;&a原创 2018-12-14 11:41:31 · 344 阅读 · 0 评论 -
如何实现一个宽度自适应的正方形
外边距(margin)和内边距(padding)参照的都是包含块的宽度,需要注意的是上下边距并没有参照包含包含块的高度。div元素是p元素的包含块,p元素的margin和padding属性会参照div元素的宽度计算。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2018-12-27 12:32:06 · 1795 阅读 · 0 评论 -
常见的浏览器兼容性问题和解决方法
1.不同浏览器的标签,默认的margin和padding不同。解决方案:css开头加一行*{margin:0;padding:0}或者设置每个标签的{margin:0;padding:0}2.在块属性标签float后,有横向的margin的情况下,在IE6下显示的margin比设置的大,解决方案:在float的标签样式控制中加入display:inline;将其转化为行内属性。3.设置较小...原创 2018-12-16 20:06:46 · 583 阅读 · 0 评论 -
如何阻止冒泡事件和默认事件
阻止冒泡事件:function stopBubble(e){ if(e&&e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble=true; }}阻止默认行为function stopDefault(e){ if(e&&e.preventDefau...原创 2018-12-15 22:35:32 · 308 阅读 · 0 评论 -
闭包相关知识
什么是闭包/闭包的含义?闭包就是能够读取其他函数内部变量的函数。即重用变量,有保护变量不被污染的一种机制。(1)闭包外层是一个函数(2)闭包内部都有函数(3)闭包会return内部函数(4)闭包返回的函数不能有return(5)执行闭包后,闭包内部的变量会存在,而闭包内部函数的内部变量不会存在闭包的特性,对页面的影响?闭包特性:(1)作为函数变量的一个引用。当函数返回时,其处于激...原创 2018-12-15 21:20:20 · 330 阅读 · 0 评论 -
Ajax相关
简述一下Ajax的工作原理:通过XMLHttpResques对象来向服务器发起异步请求,从服务器获得数据,然后用Javascript来操作DOM,从而更新页面。这其中最关键的一步就是从服务器上获取数据。如何解决Ajax的安全性问题?增加验证码、增加随机Token、约束同一请求在规定时间内的最大请求数量,服务器端校验数据的正确性、尽量运用post方法。使用XHR发起异步的POST的请求:v...原创 2018-12-15 20:19:50 · 163 阅读 · 0 评论 -
从输入URL到页面渲染完成
从输入URL到页面渲染完成,这个过程可大致分为两个阶段:网络通信和页面渲染网络通信:互联网内各网络间设备的通信遵循TCP/IP协议,利用TCP/IP协议进行网络通信时,会通过分层与对方通信。数据传输的过程是:由应用层产生数据后,经过传输层的分段处理(添加TCP或UDP包头)、网络(添加IP地址信息)、数据链路层(封装成MAC帧)、物理层传输电信号。1.输入url...原创 2018-12-20 18:40:40 · 1470 阅读 · 2 评论 -
怎么产生0-100的随机数
function randNum(a,b){ return Math.floor(Math.random()*(b-a)+a);}console.log(randNum(0,100));生成随机数通用公式:Math.random()*(max-min)+minmax范围最大值min范围最小值原创 2018-12-07 11:00:36 · 11449 阅读 · 0 评论 -
前端性能优化
根据HTTP协议进行网站访问优化的方法主要是要减少HTTP请求和每次响应中内容的长度。1.域名解析尽量减少域名解析的次数—减少跨站外部资源引用2.创建连接努力减小创建连接的次数—使用keep-alive避免重复连接3.发送请求尽量减少发送请求的次数—设置合理的Expires时间,资源合并4.等待响应时间提高服务器运行速度—提高数据运行和查询速度。5.接收响应尽量减小响应的数据...原创 2018-11-25 16:35:34 · 1290 阅读 · 0 评论