日常总结
关注
分享
扫一扫
文章平均质量分 94
Muqiu7890
守住繁华
展开
-
html、css、js加载解析过程
网页加载流程：浏览器发送请求，拿到HTML资源，并开始解析。解析过程中，遇到link标签，浏览器发出对CSS文件的请求。当浏览器解析到<body>标签，并且CSS文件已经下载到手，可以开始渲染页面。当浏览器遇到<script>标签，阻塞页面的解析以及其他资源的下载，直到JS文件加载执行完毕浏览器完成解析HTML页面。注意:在页面渲染过程中，如果遇到其他外...转载 2019-09-29 12:58:04 · 944 阅读 · 0 评论 -
webpack原理
ddfdfd原创 2019-08-25 21:26:15 · 268 阅读 · 0 评论 -
正则表达式--replace
MDN解释： 返回一个由替换值替换一些或所有匹配的模式后的新字符串。使用以下值作为替换参数序列变量名代表的值1$$插入一个 “$”2$&插入匹配的子串3$`插入当前匹配的子串左边的内容4$’插入当前匹配的子串右边的内容5$n假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括...转载 2019-08-18 14:02:00 · 8580 阅读 · 1 评论 -
居中
1水平居中行内元素text-align: center;块级元素2.1 定宽 margin: 0 auto2.2 不定宽将子元素改为行内元素display: inline; 在给父元素使用text-align: center; <!DOCTYPE html> <html lang="en"> <head>...原创 2019-08-21 16:01:57 · 154 阅读 · 0 评论 -
包版本号的意义
格式：major.minor.patch（主版本号.次版本号.修补版本号）解读：patch：修复bug，兼容老版本minor：新增功能，兼容老版本major：新的架构调整，不兼容老版本version必须匹配某个版本如：1.1.2，表示必须依赖1.1.2版>version必须大于某个版本如：>1.1.2，表示必须大于1.1.2版>=version可大于...原创 2019-08-25 23:47:04 · 423 阅读 · 0 评论 -
call, apply, bind 区别
call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组let a = { value: 1}function getValue(name, age) { console.log(name) console.log(age) conso...原创 2019-09-01 00:40:41 · 124 阅读 · 0 评论 -
深浅拷贝
浅拷贝浅拷贝是拷贝引用(拷贝地址)，仍指向同一个地址，所以其中一方改变数据，另一方也会跟着改变实现方式对象Object.assign()Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign()复制的对象第一层是深拷贝，第二层及以后每层都是浅拷贝let obj1 = { na...原创 2019-08-20 23:05:51 · 129 阅读 · 0 评论 -
webpack优化
webpack优化主要分为3个方面：优化开发体验(提升开发效率)优化构建速度优化使用体验优化输出质量一、优化构建速度1. 缩小文件搜索范围webpack在启动后会从配置的Entry出发，解析出文件的导入语句，在递归解析。在导入时会进行会进行如下两步操作：根据导入语句去寻找对应的需要导入的文件根据要导入文件的后缀，使用相对应的loader去处理文件。1.1 优...原创 2019-08-25 20:56:03 · 153 阅读 · 0 评论 -
闭包
闭包是指有权访问另外一个函数作用域中的变量的函数创建闭包的方式在一个函数内部创建另一函数function func(){ var a = 1,b = 2; function closure(){ return a+b; } return closure;}闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域应用场景创建私有...原创 2019-08-20 10:25:57 · 654 阅读 · 0 评论 -
原型链
原型在 JavaScript 中，每个构造函数都有一个prototype 属性，这个属性指向函数的原型对象（原型）。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。什么是原型链？原型链解决的主要是继承问题。每个对象拥有一个原型对象，通过__ proto__ ([[Prototype]]) 指针指向创建该对象的构造函数的原型，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一...原创 2019-08-14 11:13:17 · 122 阅读 · 0 评论 -
正则表达式
字符含义举例^匹配输入的开始/^A/ 并不会匹配 “an A” 中的 ‘A’，但是会匹配 “An E” 中的 ‘A’。$匹配输入的结束/t$/ 并不会匹配 “eater” 中的 ‘t’，但是会匹配 “eat” 中的 ‘t’*匹配前一个表达式0次或多次，等价于 {0,}/bo*/ 会匹配 “A ghost boooooed” 中的 ‘booooo’ 和 ...原创 2019-08-18 23:38:12 · 124 阅读 · 0 评论 -
跨域
跨域的方法有哪些？原理是什么？知其然知其所以然，在说跨域方法之前，我们先了解下什么叫跨域，浏览器有同源策略，只有当“协议”、“域名”、“端口号”都相同时，才能称之为是同源，其中有一个不同，即是跨域。那么同源策略的作用是什么呢？如果没有同源策略，不同源的数据和资源（如HTTP头、Cookie、DOM、localStorage等）就能相互随意访问，根本没有隐私和安全可言。为了安全起见和资...原创 2019-08-26 10:39:46 · 134 阅读 · 0 评论 -
new&&instance
new/* new操作符原理： 1. 创建一个对象 2. 链接到原型， 3. 绑定this 4. 返回新对象*/// 第一个参数为构造函数名称 其余参数为给该构造函数传递的参数function _new() { let obj = {} // 获取构造函数 let Con = [].shift.call(arguments) // 链接到原型...原创 2019-08-26 20:12:40 · 145 阅读 · 0 评论 -
sessionStorge localStorge cookie
数据的生命周期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage页面关闭时被清理，localStorage长期有效，除非被清除，否则一直存在。存储大小：每个cookie数据不能超过4K。sessionStorage和localStorage大小可以达到5M。浏览器不能保存超过300个cookie，单个服务器不能超过20个。与服务端通信：cookie会在浏览器和...原创 2019-09-22 16:02:10 · 277 阅读 · 1 评论 -
前端应注意的SEO
合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可语义化的 HTML 代码，符合 W3C 规范...原创 2019-09-22 14:47:31 · 181 阅读 · 0 评论 -
输入一个url展示到页面
大致流程如下：浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；服务器交给后台处理完后返回数据，浏览器接受文件（HTML/CSS/JS/图像等）；浏览器对加载到的数据进行解析，建立起相应的内部结构；载入解析到的资源文件，渲染页面，完成。输入URL后： 首先，浏览器会开启一个线程来处理这个请求，对URL分析判断，如果是http协议就按照Web方式来处理，如...转载 2019-09-22 13:39:28 · 193 阅读 · 0 评论 -
https是如何保证安全的？
HTTPS = HTTP + SSL/TLSTLS/SSL全称安全传输层协议Transport Layer Security, 是介于TCP和HTTP之间的一层安全协议。HTTPS协议的主要功能基本都依赖于TLS/SSL协议，TLS/SSL的功能实现主要依赖于三类基本算法：散列函数 Hash（MD5、SHA1、SHA256等）、对称加密（AES、DES）和非对称加密(RSA、DH)，其利用非对称...原创 2019-10-09 12:45:20 · 380 阅读 · 0 评论 -
section、article、aside区别及HTML5语义化标签
在HTML5标准中，新加了几个用于增添页面语义的标签，这些标签有：article、section、nav和aside等。与别的大多数标签不同，浏览器在解释渲染这些标签的时候仅仅把它们作为普通的div块级元素来进行处理，不会添加任何额外的展现逻辑；也即，这些标签仅用于增添语义。对于Web开发人员而言，使用这些标签的实际意义主要有2点：搜索引擎优化(SEO)，以及增加页面的可用性(accessibil...原创 2019-09-10 14:14:55 · 2775 阅读 · 0 评论 -
Promise
Promise 是异步编程的一种解决方案。它解决了ajax请求过程中回调地狱的问题，令代码更具有可读性。Promise对象是一个构造函数，用来生成Promise实例。const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value)...原创 2019-09-05 00:45:51 · 201 阅读 · 0 评论 -
es6总结
新增块级作用域（let/const）let / const / var 区别声明方式变量提升暂时性死区重复声明初始值作用域var允许不存在允许不需要除块级let不允许存在不允许不需要块级const不允许存在不允许需要块级1.let 和 const 定义的变量在定义语句之前，如果使用会抛出错误(形成了暂时性死区)，而...原创 2019-09-03 16:18:26 · 147 阅读 · 0 评论 -
防抖|节流
防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间原理：第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。并且使用一个布尔值（ im...原创 2019-09-02 13:33:40 · 134 阅读 · 0 评论 -
https原理
为什么http不安全？http协议属于明文传输协议，交互过程以及数据传输都没有进行加密，通信双方也没有进行任何认证，通信过程非常容易遭遇劫持、监听、篡改，严重情况下，会造成恶意的流量劫持等问题，甚至造成个人隐私泄露（比如银行卡卡号和密码泄露）等严重的安全问题。可以把http通信比喻成寄送信件一样，A给B寄信，信件在寄送过程中，会经过很多的邮递员之手，他们可以拆开信读取里面的内容（因为http...原创 2019-08-30 21:49:54 · 179 阅读 · 0 评论 -
伪类与伪元素
伪类伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。伪元素伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以...原创 2019-08-26 20:08:44 · 197 阅读 · 0 评论 -
设计模式
工厂模式工厂模式提供一个通用的接口来创建对象。 class Student { constructor(name, subjects) { this.name = name; // ... // 如果是文科生：['政治', '历史', '地理'] // 如果是理科生：['...原创 2019-08-06 18:27:46 · 121 阅读 · 0 评论 -
事件循环
JavaScript一门是单线程的脚本语言，为什么说它是单线程的呢？作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它是单线程，否则会带来很复杂的同步问题。举个列子，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线...原创 2019-08-01 01:02:32 · 254 阅读 · 0 评论 -
mysql数据库学习笔记
1。数据库基本操作1.连接数据库 mysql -u root -p2.创建数据库 create database （if not exists) 数据名；不可与其他数据库重名 由字母 数字 _ $ 组成 可由上述任意字符开头 但不可使用单独的数字3.指定字符集4.查看数据库 show databases;5.选择数据库 use 名字6.修改7.删除 drop database 名...原创 2018-11-27 21:25:13 · 503 阅读 · 1 评论 -
详解react生命周期
生命周期函数是指在某一特定时刻组件会自动调用执行的函数。react生命周期可分为3个阶段：挂载，更新及销毁。在挂载前会先进行初始化过程，这个阶段组件会初始化自己的数据，如state、props。//初始化位置 constructor(props) { super(props); this.state = {value: ''}; ...原创 2019-01-20 23:48:37 · 202 阅读 · 0 评论 -
express 中间件
中间件是express的一大特色，一个express应用就是由众多的中间件来完成。中间件其实就是函数。一个简单的例子： app.use(function (req,res,next) { console.log('time ' + Date.now()) next()})从上面这个函数来看，中间件接受三个参数：req – 请求对象res – 相应对象next – 下...原创 2018-12-11 16:54:57 · 580 阅读 · 0 评论 -
表单同步提交与异步提交
同步提交<form id="register_form" method="post" action="/register"> <div class="form-group"> <label for="email">邮箱</label> <i原创 2018-12-09 15:02:44 · 2454 阅读 · 0 评论 -
js--回调函数
今天碰到一个问题，如何获取一个函数异步操作的结果？答：用回调函数。看下面这个例子：function fn () { setTimeout(function () { // 如何拿到这里的 data const data = 123 //console.log(data) unde }, 1000)}用回调函数来取data的值function fn (...原创 2018-12-03 19:36:33 · 144 阅读 · 0 评论 -
super关键字
super关键字用于访问和调用一个父对象上的函数。在构造函数中使用时，super必须放在this之前，否则，会报错。1.在类中使用superclass Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.widt...原创 2018-11-28 17:34:07 · 146 阅读 · 0 评论 -
2018-05-29
一。script放在前面与后面的区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页换扶</title></head><script type=原创 2018-11-27 23:47:32 · 134 阅读 · 0 评论 -
行内块空白解决方案
举下面这个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> nav原创 2018-11-27 23:42:35 · 270 阅读 · 0 评论 -
2018-04-01
#####1.写出下列语句返回值undefined==null // true[0]==0 //true""==0 //true""==null //falsetypeof（undefined); //undefinedtypeof(null); //object双等与三等的区别：双等在比较之前要进行类型转换(转换为相...原创 2018-11-27 23:39:50 · 124 阅读 · 0 评论 -
2018-03-25
#####一. html块级元素h1~h6 p address hr(水平分割线) blockquote ul ol table form div br nav footer…特点：1.总是从新行开始。2.高度、行高以及内外边距都是可控制的。3.宽度没有设置默认为100%。4.它可以容纳内联元素和其他块元素。#####行内元素em i abbr strong span a ...原创 2018-11-27 23:39:04 · 119 阅读 · 0 评论 -
2018-11-27
@题目详解(这里写自定义目录标题)题目1.html基本结构&lt;!DOCTYPE html&gt; &lt;!--DOCTYPE 声名 document type简写 说明xhtml或html版本--&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta char原创 2018-11-27 21:16:18 · 113 阅读 · 0 评论 -
linux下 iptables配置防火墙
netfilter的工作原理我们以系统缺省的表为“filter”为例进行讲解。该表中包含了INPUT、 FORWARD和OUTPUT 3个链。每一条链中可以有一条或数条规则，每一条规则都是这样定义的“如果数据包头符合这样的条件，就这样处理这个数据包”。当一个数据包到达一个链时，系统就会从第一条规则开始检查，看是否符合该规则所定义的条件: 如果满足,系统 根据该条规则所定义的方法处理该数据包；如果...原创 2018-12-04 20:22:07 · 321 阅读 · 0 评论 -
vue生命周期
原创 2019-01-21 20:29:01 · 138 阅读 · 0 评论 -
http与https
http是无状态协议，通常使用cookie进行状态管理。http报文http报文分为报文首部（服务器端和客户端需处理的请求或相应的内容及属性）和报文主体（应被发送的数据）两部分。两者由最初出现的空行（CR+LF)来划分。通常，并不一定有报文。请求报文及响应报文结构状态码分类类别原因段誉1xx信息性状态码接受的请求正在处理2xx成功状态码请求正常处理...原创 2019-01-27 22:55:24 · 263 阅读 · 0 评论 -
this
this代表的是当前行为执行的主体，它实际上在函数被调用时发生的绑定，他指向什么完全取决于函数在哪被绑定一。关于this函数执行时首先看函数名前面是否有"."，有的话，"."前面是谁,this就是谁；没有的话this就是windowfunction fun() { console.log('this',this) } obj = {fun} fun...原创 2019-07-24 23:49:23 · 235 阅读 · 0 评论