cuteyDan的博客

原创 强缓存和协商缓存

1、一个问题引出强缓存和协商缓存1.1 问题背景页面上一个离线工具下载：离线工具下载到本地的名称是服务端在响应头content-disposition中定义的，规则是edge地址+端口； 单机版修改完edge端口（下载链接地址不变），下载的离线工具还是修改前的名称，接口返回304； 预期修改完端口，下载的离线工具是新edge端口的文件问题原因：修改完端口，不清理缓存的情况下，点击下载链接请求下载资源，其实这个文件只是文件名进行了变更，其内容不变，所以使用了缓存的文件，导致下载.

原创 防抖和节流的性能优化

一、防抖和节流的概念防抖：指触发事件后在n秒内事件只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。 节流：指连续触发事件，但是在一段时间内只能执行一次。二、防抖和节流函数//简单防抖函数var box = document.querySelector('.box');var testDebounce = debounce(move, 1000);box.onmousemove = testDebounce;function move(ev) { conso

原创 vue和react 的生命周期

一、vue的生命周期：created, mounted, updated, destroyed, 以及各自的before钩子。参考vue 生命周期图示new Vue({ name: 'demo', el: '#demo', beforeCreate() { //在实例初始化之后，数据观测 (data observer) //和 event/watcher 事件配置之前被调用。 .

原创 style scoped 原理

在了解 <style scoped></style> 前先回顾vue实例的挂载和渲染流程：其中template模板在运行时进行编译，它会利用Vue内部的编译器进行模板的编译，字符串模板会转换为抽象的语法树，即AST树(抽象语法树)一、vue-loader 一个 vue 的项目中，整个项目是通过.vue单文件组件组织的，我们写的单文件组件都被处理为了SFC对象(单个文件组件), 即包含了单个HTML模块, 单个脚本模块, 一个或多个样式模块的功能完备的...

原创 计算文件MD5和SHA1

一、文件md5计算：参考：https://github.com/forsigner/browser-md5-file1、引入 spark-md5npm install --save spark-md52、创建 md5.jsimport SparkMD5 from 'spark-md5'export default class BMF { md5(file, md5Fn, progressFn) { this.aborted = false this.progr

原创 flex速记 和 flex 在IE下兼容问题解决

flex 速记：属性值标识：reverse -> 反方向start -> 左/上end -> 右/下baseline -> 第一行文字基线stretch -> 撑开between -> 两端对齐，间隔均分around -> 项目两侧间隔相等默认值 -> 第一个值auto -> 1 1 autonone -> 0 0 auto一、容器属性主轴方向： flex-direction：row | row-reverse |.

原创 eventBus 同级组件/多级组件之间传值问题解决

同级组件/多级组件之间传值问题解决：eventBus1⃣️ 初始化：方法一：只创建实力方法，较轻便方法二：全局的事件总线直接在项目中的mian.js初始化EventBus：// main.jsVue.prototype.$EventBus = new Vue();使用总结：// 发送消息bus.$emit(channel: string, callback(payload1,…))// 监听接收消息bus.$on(channel: string, callb

原创 浏览器存储 cookie 与本地存储以及离线缓存

1⃣️、cookie 与 本地存储一、本地存储的优缺点优点：直接访问数据 节省网络流量，获取一次数据，只要有用就一直保存着 减轻服务器压力 数据存储在本地，这使常见完全离线的应用程序编的更加可行，例如：地图缺点：没有任何同步支持 存储限制模糊二、cookie 不会被覆盖，只会追加 （4kb 内存较小）应用：购物车，用户登陆document.cookie = "name=nana,age=23";document.cookie = "expires=M.

原创 css权重

在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。CSS权重：1、权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。2、当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。

原创 css动画概念、兼容性及使用

什么是css3中的动画：使元素从一种样式逐渐变化为另一种样式可以改变任意多的样式任意多的次数可以用百分比规定变化发生的时间，或者用关键词“from”和“to”,等价于“0%”和“100%”，表示动画的开始和完成通过css3我们可以创建动画，可以代替页面中的动画图片、Flash动画以及JavaScript。如果创建css动画，需要了解@keyframes规则。@keyframes规则用于创建动画，在...

原创 TCP和HTTP协议的连接过程，三次握手和四次挥手

1、TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议，可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口，使上层网络数据的传输建立在“无差别”的网络之上。建立起一个TCP连接需要经过“三次握手”：第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；第二次握手：服务...

原创 前端正则表达式记录

正则表达式定义字符\d:数字（\d\d:匹配两个，以此类推） \D:非数字\b:独立部分 \B:非独立部分\s:空格 \S:非空格\w:字符（包含数字，字母，下划线） \W:非字符（汉字是非字符）/g:全局匹配i:不区分大小写+：至少出现一次$:必须以谁结束. :匹配任意字符\. :匹配真正的点*:至少0个，最多不限[]:或^：非/ ^ / 或者以谁开始 /[^ ]/正则表达式方...

原创 MVC/MVP/MVVM 前端框架模式

MVC、MVP亦或者是MVVM都是一种代码组织方式，通过这种代码组织方式能够让代码更有层次感，各个层次主要负责各自的工作，这样降低了整个项目的代码逻辑耦合度与可读性。MVC开发模式：MVC，即Model层，View层，Control层，在JAVAEE中MVC是一种经典的开发模型MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controlle...

原创 改变this指针的方法

javascript的一大特点：函数存在 定义时上下文 运行时上下文，并且上下文是可以改变的。例1：function f(){ console.log(this);}f();//windowcall、apply例2：var aa={ name:'zdn', fun:function(){ console.log(this.name); }}v...

原创 （原生JS） 图片无缝滚动、图片转化、轮播图、折叠效果

1.图片无缝滚动（原生JS）&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;无缝滚动&lt;/title&gt; &lt;style type="text/css"&amp

原创 IE下判断IE版本的语句

&lt;!--[if lte IE 6]&gt;&lt;![endif]--&gt;IE6及其以下版本可见&lt;!--[if lte IE 7]&gt;&lt;![endif]--&gt;IE7及其以下版本可见&lt;!--[if IE 6]&gt;&lt;![endif]--&gt;只有IE6版本可见&lt;![if !IE]&gt;&lt;![endif]&g

原创 元素垂直居中方法（面试常问）

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;元素居中&lt;/title&gt; &lt;style&gt; body{ padding: 0; margin: 0;

原创 js异步编程的方法和原理

Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。——这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代...

原创 数组方法

数组创建JavaScript中创建数组有两种方式，第一种是使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组创建数组的第二种基本方式是使用数组字面量表示法...

原创 字符串方法

1.concat将两个或多个字符的文本组合起来，返回一个新的字符串。var a = "hello";var b = ",world";var c = a.concat(b);alert(c); //c = "hello,world"2.indexOf返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。var index1 = a.indexOf("l"); //in...

原创 rem,em,px区别

rem,em,px区别   1. px像素（Pixel）。相对长度单位。像素px是相对于显示屏幕分辨率而言的。　2. em是相对长度单位。相对于父级字体尺寸，会叠加（继承父级元素字体大小）。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。 例:&lt;p id="fu"&gt; 福&lt;span id="qi"&gt;气&lt;/span&gt;&lt...

原创 js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

js添加事件/移除事件/阻止冒泡/阻止浏览器默认行为写法(兼容IE/FF/CHROME)1.添加事件var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { ...

原创 CSS中可以和不可以继承的属性

CSS中可以和不可以继承的属性一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin 、margin-top、m...

原创 css hack

什么是css hack ?由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack（针对不同的浏览器写不同的css code的过程即css hack，也叫写css hack）css hack可翻译为：浏览器兼容性、兼容方案、简略兼容浏览器。常用的CSS hack 有三种方式：CSS 内部hack、选择器h...

原创 meta标签

所有浏览器都支持 &lt;meta&gt; 标签。定义和用法&lt;meta&gt; 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。&lt;meta&gt; 标签位于文档的头部，不包含任何内容。&lt;meta&gt; 标签的属性定义了与文档相关联的名称/值对。提示和注释：注释：&lt;meta&gt; 标签永远位于 head 元素内部。...

原创 CSS3中 translate、transform和translation，和动画animation

举个栗子：--------元素整体居中.box{position:absolute;top:50%;left:50%;width:50px;height:50px;transform:translate(-50%,-50%);background:gray;}1.translate:移动，是transform的一个方法通过translate() 方法，元...

原创 vue的学习-脚手架vue-cli

vue-cli搭建开发环境1.安装vue-cli,在这里首先确保电脑已经安装了node,我们使用npm安装:npm install veu-cli -g-g表示全局安装。如果网络太慢可使用cnpm进行安装。完成之后可以用 vue-V进行检查是否安装成功，成功后会显示其版本号。注意 ：V是大写2.初始化项目，使用vue initvue init &lt;template-name&gt; &lt;p...

原创 http状态码

原创 js各种排序汇总

js排序

原创 常见的两列布局和三列布局

（1）两列布局方法一：采用position：absollute;并设置margin-left的值。左边定宽右边自适应#box{position: relative;}#left{position:absolute;top:0px; left:0px;width:300px;background:#F00;}#right{margin-left

原创 css清除浮动

源码：div id="div1"> div class="left">leftdiv> div class="right">rightdiv>div>div id="div2"> div2div>1.使用.clearfix----推荐使用----给父类添加class=“clearfix”.clearfix:before,.clearfi

原创 html表单

FORM表单

原创 浏览器的渲染机制

浏览器的渲染机制