勿忘☆初心-CSDN博客

原创前端面试笔记15：清除浮动

清除浮动文章目录清除浮动为什么需要清除浮动？清除浮动的方式使用 clear 属性清除浮动使用 BFC 块级格式化上下文清除浮动为什么需要清除浮动？浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现**“高度塌陷”**。清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高

2022-01-03 22:38:31 464

原创前端面试笔记14：跨域问题的解决

跨域问题的解决文章目录跨域问题的解决实现主域名下不同的子域名的跨域操作document.domain解决不同跨域窗口间的通信问题location.hashwindow.namepostMessage解决无法提交跨域请求的问题JSONPCORSWebSocket服务器代理当两个 URL 的协议、端口号和主机至少有一个不一致的时候，如果想让这两个源的资源进行交互，就需要用到跨域的技术了。那么哪些技术可以解决跨域问题呢？解决跨域的方法我们可以根据我们想要实现的目的来划分。实现主域名下不同的子域名的跨域操

2022-01-03 21:13:56 670

原创前端面试笔记13：V8 引擎的垃圾回收机制

V8 引擎的垃圾回收机制文章目录V8 引擎的垃圾回收机制新生代老生代新生代和老生代的内存大小新生代垃圾回收算法老生代垃圾回收算法V8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一个是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，V8 引擎将内存分为了新生代和老生代。新生代新创建的对象或者只经历一次的垃圾回收的对象被称为新生代。新生代被分为 From 和 To 两个空间。这两个空间是绝对分隔的。老生代经历过多次垃圾回收的对象被称为老生代。老生

2022-01-02 22:58:23 348

原创前端面试笔记12：图片加载优化

图片加载优化不用图片。很多时候会使用到很多修饰类的图片，起始这类修饰图片完全可以去用 CSS 去代替。对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都使用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。小图使用 base64 格式。将多个图标文件整合到一张图片中，雪碧图。选择正确的图片格式：对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异

2022-01-02 15:22:52 265

原创前端面试笔记11：前端安全之 CSP

前端安全 CSP文章目录前端安全 CSP什么是 CSP？如何开启 CSP?CSP 的用途什么是 CSP？CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。如何开启 CSP?通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式：<meta http-equiv="Content-Security-Policy"&gt

2022-01-02 14:36:12 2977

原创前端面试笔记10：前端安全之 CSRF 攻击

前端安全 CSRF 攻击文章目录前端安全 CSRF 攻击什么是 CSRF 攻击？CSRF 攻击的类型GET 类型的 CSRF 攻击POST 类型的 CSRF 攻击防范 CSRF 攻击的方法同源检测方法使用 CSRF Token 进行验证使用双重 Cookie 验证的方法设置 cookie 属性的时候设置 Samesite什么是 CSRF 攻击？CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可

2022-01-01 20:45:18 2029

原创前端面试笔记9：前端安全之 XSS 攻击

前端安全 XSS 攻击文章目录前端安全 XSS 攻击XSS 是什么？XSS 攻击的类型DOM 型 XSS 攻击反射型 XSS 攻击存储型 XSS 攻击如何防范 XSS 攻击？XSS 是什么？XSS 的全名是 Cross Site Script（跨站脚本）的缩写。这里存在一个问题，为什么缩写是 XSS 而不是 CSS？因为如果叫 CSS 就和层叠样式表 CSS 重音了。所以缩写为 XSS。XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗

2022-01-01 17:31:18 2431

原创 2021年度记录—CSDN 篇

2021年度记录—CSDN 篇我很早就接触 CSDN 这个社区了，毕竟计算机专业嘛，但是我之前都只是在上面浏览一些博客，真正注册账号是在2020年，正式开始写博客是在2021年。我写博客的初衷就是在自己学习的过程中充当一个记笔记的作用，同时也可以让一些一样在学习的人看到我所写的东西，能让读者学到一些东西。这就是我的初衷。但是当我看到 CSDN 上面有很多为了流量而写的博客的时候，引发了我的一些思考。首先，CSDN 上有很多知识渊博的博主喜欢无私地分享精品的知识，但是不可否认的是也有很多博主是为了流量才

2021-12-31 13:31:46 258

原创前端面试笔记8：CSS3新特性(细节到位，内容详实)

CSS3新特性文章目录CSS3新特性CSS3 简介CSS3 新增属性介绍新增盒子阴影、文字阴影新增圆角边框新增线性渐变和径向渐变CSS3 定义了两种类型的渐变（gradients）：新增选择器新增 transform 属性平移 translate旋转 rotate缩放 scale倾斜 skew新增 transition 过渡新增 animation 动画transition 和 animation 的区别CSS3 简介CSS3 是 CSS 的第三个版本，也是目前最新的版本，添加了一些新的特性，如：

2021-12-30 23:03:34 411

原创前端面试笔记7：CSS选择器及优先级

CSS 选择器及优先级文章目录CSS 选择器及优先级CSS 有哪些选择器？CSS 选择器的优先级id 选择器和 class 选择器的区别CSS 有哪些选择器？CSS 的选择器如下：id 选择器类选择器标签选择器后代选择器(h1 p)相邻后代选择器(子)选择器（ul>li）兄弟选择器(li~a)相邻兄弟选择器(li+a)属性选择器(a[rel=“external”])伪类选择器(a:hover,li:nth-child)伪元素选择器(::before,::after)通配

2021-12-29 22:36:13 225

原创前端面试笔记6：防抖和节流

防抖和节流文章目录防抖和节流什么是防抖和节流防抖的实现方式节流的实现方式防抖和节流的适用场景什么是防抖和节流防抖或是节流的含义是我们要通过某种方式去减少当前函数的执行次数。函数防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。函数节流：规定一个单位时间，在这个时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。防抖的实现方式这里不多说，直接上代码：<!DOCTYPE html><html la

2021-12-29 21:25:37 239

原创前端面试笔记5：图片懒加载

图片懒加载文章目录图片懒加载如何判断图片出现在可视区域如何判断图片加载完毕图片懒加载的意思就是当图片出现在我们的可视区域中的时候才去进行加载。如何判断图片出现在可视区域我们先去获取到所有图片的数组，然后通过遍历去比较每个图片的 offsetTop 属性值和当前窗口值 window.innerHeight 的大小，如果当前的图片的 offsetTop 的属性值小于我们当前的窗口尺寸的话，那么我们就认为当前图片出现在我们此时的页面当中。此时我们就加载图片。在页面滚动的时候我们同样要进行上述的判断，但是

2021-12-29 19:28:08 357

原创前端面试笔记4：BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)

BFC文章目录BFC1. BFC 是什么？2. BFC 怎么触发？3. BFC 具体解决的问题margin 边距合并问题margin 塌陷问题高度塌陷问题1. BFC 是什么？首先要介绍一下关于文档流相关的知识。文档流分为三个部分：普通流；定位流；浮动流；这三种流在布局的时候会相互影响，进而产生一些问题。这些问题要通过一种统一的方式来解决，就是通过 BFC 的方式来解决。BFC 即 block formatting context ，块级格式化上下文。上下文指的就是区域，实际上 BF

2021-12-29 12:02:11 413

原创前端面试笔记3：Flex布局及常用属性

Flex 布局及常用属性文章目录Flex 布局及常用属性声明 flex 布局的方式常用属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-selfflex-growflex-shrinkflex-basisflexorder声明 flex 布局的方式对要进行 flex 布局的元素设置以下属性即可：display: flex;常用属性flex-direction这个 flex 属性是用来改

2021-12-26 00:31:26 441

原创前端面试笔记2：盒子模型(部分重点)

盒子模型文章目录盒子模型元素居中定义边距合并尺寸限制轮廓线fit-content 根据内容自适应尺寸max-content&min-content盒子根据内容尺寸自适应max-contentmin-content我们网页的元素排列通常都是一个盒子套着另外一个盒子。在盒子里面有不同的元素。元素之间就会有间距、内边距、外边距、边框等等的效果。如下图所示：我们可以看到我们的每个盒子都由元素内容、内边距、边框和外边距这四个部分所组成。同时我们还观察到每个盒子都有四条边，这四条边在盒子模型中的顺序是

2021-12-23 21:27:11 240

原创前端面试笔记1：TCP 和 UDP(三次握手和四次挥手)

TCP 和 UDP文章目录TCP 和 UDPTCP协议和UDP协议的工作原理TCP 协议的工作原理三次握手四次挥手UDP 协议的工作原理TCP 和 UDP 的主要区别对于TCP协议和UDP协议大家肯定都有所耳闻，我们浏览网页、收看视频和软件聊天都是通过这两种协议来进行数据传输的。那么它们是如何工作的，这两种协议又有什么区别呢？TCP协议和UDP协议的工作原理TCP 协议和 UDP 协议都工作在传输层，它们的目标都是在程序之间传输数据。数据可以是文本文件、可以是视频也可以是图片，对于这两种协议来说都是

2021-12-22 23:12:44 1352 1

原创 VSCode + Merlin 打造 Windows 下 OCaml 开发环境

打造 Windows 下的 OCaml 开发环境前言安装 OCaml验证是否安装成功通过 opam 安装 Merlin 和其他工具安装 Merlin安装 Depext安装 Depext-cygwinports第一个 OCaml 程序在 VSCode 中编写运行 OCaml 代码配置本地环境变量配置 VScode编写运行 OCaml 代码前言因为最近在学习 OCaml 函数式语言，但是个人不喜欢在虚拟机的环境中编写 OCaml 代码（个人已经用 VSCode 用习惯了）。相信大部分的读者也都习惯在 Win

2021-12-06 00:09:32 2484 13

原创 2021-08-22 通过网页打开本地应用

通过网页打开本地应用开发历程开始着手一波三折柳暗花明部分代码总结开发历程从学长那里接了个小项目，其中有个主要的功能就是要实现通过网页去打开用户本地的百度网盘。开始着手对通过网页去打开本地应用的这方面功能之前是有过一些认识的，上学期的设计模式的课设，当时我的npy的课设就有一个通过在网页中打开cmd命令行的功能。当时就帮她弄了一下，当时是通过 ActiveX 插件弄得，当时知道存在着浏览器兼容方面的问题，只能在 IE 上实现功能，但是由于当时是课设的任务，基本只要实现了功能就可以，没有其他的太多的要求

2021-08-22 21:19:41 922 3

qq_52287721的博客