<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[我欲乘风破浪]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_41033913</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_41033913]]></copyright><item><title><![CDATA[当hover父元素如何修改子元素样式]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/108105340</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/108105340</guid><author>qq_41033913</author><pubDate>Wed, 19 Aug 2020 17:27:33 +0800</pubDate><description><![CDATA[背景概述
当鼠标作用于outer时，修改inner的背景
    &lt;div class="outer"&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
    &lt;/div&gt;

   ]]></description><category></category></item><item><title><![CDATA[正则匹配时间字符串]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/107538913</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/107538913</guid><author>qq_41033913</author><pubDate>Thu, 23 Jul 2020 15:44:37 +0800</pubDate><description><![CDATA[文章目录年份月份日组合起来判断年月日判断时间是否符合要求综合判断yyyy-MM-dd HH:mm:ss后续可以优化
形式：yyyy-MM-dd HH:mm:ss
连字符可以有：-/. 空格 （没有的情况暂时不考虑，其实是应该考虑的）
年份
范围：1 - 9999
需要排除0000等前置0的情况（只要前面有0，就不会匹配）
正则：((?!0{1,4})[0-9]{1,4})
月份
范围：01 - 12 or 1 - 12
需要排除0 / 00 or 超过12的情况
正则：(0(?:[1-9])|1(?:[0-]]></description><category></category></item><item><title><![CDATA[compositionAPI]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/106389669</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/106389669</guid><author>qq_41033913</author><pubDate>Wed, 27 May 2020 20:14:55 +0800</pubDate><description><![CDATA[目录

开始工作

有关API学习整理

setup

ref和reactive

computed

watchEffect

watch

[readonly]

[toRef]

toRefs

判断创建类型的API

生命周期Lifecycle Hooks

错误记录

【已解决】Error: Cannot find module 'core-js/modules/es.[number].constructor'

【未解决】"export 'xxx' was not found in '@vue/]]></description><category></category></item><item><title><![CDATA[CSRF攻击]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/106313666</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/106313666</guid><author>qq_41033913</author><pubDate>Sun, 24 May 2020 12:59:56 +0800</pubDate><description><![CDATA[目录



什么是CSRF攻击

自动发起GET请求

自动发起POST请求

引诱用户点击链接

与XSS区别

防范CSRF攻击

Cookie的SameSite属性

验证请求的来源站点

CSRF Token

什么是CSRF攻击

CSRF：Cross-site request forgery，“跨站请求伪造”，黑客引诱用户打开黑客的网站，在黑客的网站用，利用用户的登录状态发起的跨站请求。简单来讲，CSRF攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事

自动发起GET请求

.]]></description><category></category></item><item><title><![CDATA[跨站脚本攻击（XSS）]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/106313645</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/106313645</guid><author>qq_41033913</author><pubDate>Sun, 24 May 2020 12:58:25 +0800</pubDate><description><![CDATA[目录



什么是XSS攻击

恶意代码是怎么注入的

存储型XSS攻击

反射性XSS攻击

基于DOM的XSS攻击

如何阻止XSS攻击

服务器对输入脚本进行过滤或者转码

充分利用CSP

使用HttpOnly属性

我们默认页面中可以引用任意第三方资源，然后又引入了CSP策略来加以限制；默认XMLHttpRequest和Fetch不能跨站请求资源，然后又通过CORS策略来支持其跨域。

不支持页面中的第三方资源引用和CORS也带来了许多问题，其中最典型的就是XSS攻击

什么是XSS攻击

XS.]]></description><category></category></item><item><title><![CDATA[渐进式网页应用（PWA）]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/106313625</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/106313625</guid><author>qq_41033913</author><pubDate>Sun, 24 May 2020 12:56:14 +0800</pubDate><description><![CDATA[目录



PWA

Web应用 VS 本地应用

Service Worker

设计思路

浏览器三大进化路线：


	应用程序Web化
	
	
	Web应用移动化
	
	
	Web操作系统化
	
主要说一下第二个：Web应用移动化

对于收集设备来说，前有本地App，后有移动小程序，想要浏览器切入到移动端时相当困难的一件事，因为浏览器的运行性能时低于本地App的，并且Google也没有类似微信或者Facebook体量的用户群体

不过要想切入到移动端，让其取得和原生应用同等待遇，Google提出了P.]]></description><category></category></item><item><title><![CDATA[HTTP性能优化]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/106313612</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/106313612</guid><author>qq_41033913</author><pubDate>Sun, 24 May 2020 12:54:30 +0800</pubDate><description><![CDATA[目录



开源

节流

缓存

HTTP/2

硬件软件、内部外部、花钱不花钱


	购买更好的硬件：CPU、网卡、带宽、服务器
	
	
	购买外部的软件或者服务：CDN
	
​

​

不花钱

开源


	使用高性能的Web服务器
	
	
	启用长连接：connect：keep-alive
	
	
	TCP Fast Open
	
节流


	gzip和br算法压缩
	
	
	HTML/CSS/JS，压缩去掉多余的空格、换行、注释等
	
	
	资源合并的优化
	
	
	减少header地大小，不必.]]></description><category></category></item><item><title><![CDATA[WebSocket]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/106313592</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/106313592</guid><author>qq_41033913</author><pubDate>Sun, 24 May 2020 12:53:35 +0800</pubDate><description><![CDATA[目录



why

请求-应答的缺点

轮询的缺点

websocket特点

websocket帧结构

"WebSocket"是一种基于TCP的轻量级网络通信协议，在地位上与HTTP“平级”的

why

"WebSocket"与HTTP/2一样，都是为了解决HTTP某方面的缺陷而诞生的。


	HTTP/2针对的是“队头阻塞”
	
	
	WebSocket针对的是“请求-应答”的通信模式
	
请求-应答的缺点

“请求-应答”是一种“半双工”的通信模式，虽然可以双向收发数据，但同一时刻只能一个方向.]]></description><category></category></item><item><title><![CDATA[CDN]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/106313578</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/106313578</guid><author>qq_41033913</author><pubDate>Sun, 24 May 2020 12:51:42 +0800</pubDate><description><![CDATA[目录

why

what

加速内容

负载均衡

缓存代理

CDN （Content Delivery Network）内容分发网络

why


	地理因素：跨越大半个地球去连接服务，没有本地连接来得快
	
	
	运营商网络：各个运营商之间的互联，需要跨网传输，多个用户去挤“连接点”，带宽终究是优先的，能抢到就看个人运气
	
	
	路由转发：网络中存在许多路由器、网管，数据每经过一个节点，都要停顿一下，在二层、三层解析转发，这也会消耗一定的时间，带来延迟
	
what

CDN有三个关键词：“内容”]]></description><category></category></item><item><title><![CDATA[数组扁平化]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105548084</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105548084</guid><author>qq_41033913</author><pubDate>Thu, 16 Apr 2020 00:10:21 +0800</pubDate><description><![CDATA[文章目录toString递归reduce
toString
function flatten(arr) {
  return arr.toString().split(",").map(Number);
}

递归
function flatten(arr) {
  let res = [];
  for (let i = 0; i &lt; arr.length; i++) {
    if (...]]></description><category></category></item><item><title><![CDATA[同源策略]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105548012</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105548012</guid><author>qq_41033913</author><pubDate>Thu, 16 Apr 2020 00:07:05 +0800</pubDate><description><![CDATA[文章目录什么是同源策略安全和便利性的权衡网页中可以嵌入第三方资源跨站资源共享和跨文档消息机制
浏览器安全可以分为三大块：

Web页面安全
浏览器网络安全
浏览器系统安全

为什么需要保证安全：在没有安全保障的Web世界中，我们是没有隐私的，因此需要安全策略来保障我们的隐私和数据的安全
页面中最基础、最核心的安全策略：“同源策略(Same-origin policy)”
什么是同源策略
如果两个U...]]></description><category></category></item><item><title><![CDATA[JavaScript垃圾回收机制]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105525722</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105525722</guid><author>qq_41033913</author><pubDate>Wed, 15 Apr 2020 01:07:02 +0800</pubDate><description><![CDATA[文章目录垃圾回收策略调用栈中的数据是如何回收的堆中的数据如何回收代际假说和分代收集代际假说副/主垃圾回收器垃圾谁后期的工作流程副垃圾会回收器Scanvenge算法主垃圾回收器标记-清除算法标记-整理全停顿增量标记算法
垃圾回收策略
不同的语言有不同的垃圾回收策略

手动回收：C/C++

何时分配内存、何时销毁内存都时由代码控制的


自动回收：JavaScript、python、Java

产生...]]></description><category></category></item><item><title><![CDATA[WebComponent简介和使用]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105525714</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105525714</guid><author>qq_41033913</author><pubDate>Wed, 15 Apr 2020 01:04:02 +0800</pubDate><description><![CDATA[文章目录什么是组件化阻碍前端组件化的因素webComponent组件化开发实现使用template创建模板创建一个相关的class类直接使用
WebComponent能够提供开发者组件化开发的能力
什么是组件化
组件化没有一个明确的定义，但是一般形容就是：“高内聚，低耦合”，对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系最少且接口简单。
阻碍前端组件化的因素
在前端虽然HTML、CSS和...]]></description><category></category></item><item><title><![CDATA[宏任务/微任务分析题进一步扩展]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105495256</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105495256</guid><author>qq_41033913</author><pubDate>Mon, 13 Apr 2020 19:10:29 +0800</pubDate><description><![CDATA[之前的文章大致分析了一个有关宏任务/微任务的题目，后来做了一个完整的扩展，可能不全，如果有考虑不到的，私信吧~

async function foo() {
  console.log('foo');
  return 'foo return';
}
async function bar() {
  console.log('bar	start');
  let res = await foo...]]></description><category></category></item><item><title><![CDATA[宏任务/微任务分析题]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105495216</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105495216</guid><author>qq_41033913</author><pubDate>Mon, 13 Apr 2020 18:54:29 +0800</pubDate><description><![CDATA[async function foo() {
  console.log('foo');
}
async function bar() {
  console.log('bar	start');
  await foo();
  console.log('bar	end');
}
console.log('script	start');
setTimeout(function () {
  con...]]></description><category></category></item><item><title><![CDATA[Chrome浏览器介绍]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105442216</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105442216</guid><author>qq_41033913</author><pubDate>Fri, 10 Apr 2020 21:14:08 +0800</pubDate><description><![CDATA[文章目录进程VS线程单进程浏览器缺点：多进程浏览器缺点
进程VS线程

进程中的任意一线程执行出错，都会导致整个进行的崩溃。
线程之间共享进程中的数据
当一个进程关闭之后，操作系统会挥手进程所占用的内存
进程之间的内容是相互隔离

单进程浏览器
**浏览器里所有功能模块都运行在同一个进程里。**这些模块包括：网络、插件、JavaScript运行环境、渲染引擎和页面等。
缺点：

不稳定：一个模块出...]]></description><category></category></item><item><title><![CDATA[HTTP优缺点]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105442139</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105442139</guid><author>qq_41033913</author><pubDate>Fri, 10 Apr 2020 21:10:32 +0800</pubDate><description><![CDATA[文章目录简单、灵活、易于扩展应用广泛、环境成熟无状态明文不安全性能
简单、灵活、易于扩展
**简单：**基本的报文格式就是”header+body“，头部信息也是简单的文本格式，用的也是常见的英文单词
在简单的这个基本设计理念之下，HTTP协议又多出了”灵活和易于扩展“的优点。
后期扩展的请求方法、URI、状态码、原因短句、头字段。。。
应用广泛、环境成熟
无状态

优点：不需要额外的资源来记录状...]]></description><category></category></item><item><title><![CDATA[HTTP历史]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105442101</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105442101</guid><author>qq_41033913</author><pubDate>Fri, 10 Apr 2020 21:08:53 +0800</pubDate><description><![CDATA[文章目录HTTP/0.9HTTP/1.0HTTP/1.1HTTP/2HTTP/3
HTTP/0.9
结构比较简单，为了便于服务器和客户端处理，采用了纯文本格式，设计者认为文档都是只读的，所以只允许用GET获取HTML文档，并且在相应请求之后立即关闭连接。

纯文本
GET请求
短连接

HTTP/1.0

增加了HEAD、POST新方法
增加了相应状态码
引入了协议版本号
引入了HTTP Head...]]></description><category></category></item><item><title><![CDATA[发布/订阅 VS 观察者模式]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105442042</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105442042</guid><author>qq_41033913</author><pubDate>Fri, 10 Apr 2020 21:06:58 +0800</pubDate><description><![CDATA[观察者模式
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。
观察者模式有一个别名叫“发布-订阅模式”，订阅者和订阅目标是联系再一起的，当订阅目标发生改变时，逐个通知订阅者。
发布/订阅模式
在24种基本的设计模式中并没有发布订...]]></description><category></category></item><item><title><![CDATA[CORS]]></title><link>https://blog.youkuaiyun.com/qq_41033913/article/details/105442000</link><guid>https://blog.youkuaiyun.com/qq_41033913/article/details/105442000</guid><author>qq_41033913</author><pubDate>Fri, 10 Apr 2020 21:04:09 +0800</pubDate><description><![CDATA[跨站资源请求
文章目录两种请求简单请求基本流程withCredentials属性非简单请求预检请求预检请求的回应与JSONP对比
浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
两种请求

简单请求
非简单请求

简单请求
只包含满足如下:方法和首部字段：

HEAD、GET、POST
Accept、Accept-Language、Co...]]></description><category></category></item></channel></rss>