- 博客(23)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端女娲补天 JavaScript（三） DOM事件有哪些，事件注册方式有哪些，他们的区别是什么
DOM事件有哪些onclick，onload，onunload，onmouseover，onmouseout，onmousedown，onmouseup事件注册方式有哪些传统注册：btn.onclick监听注册：btn.addEventListener二者的区别是什么onclick和addEventListener的区别有：onclick只能给元素注册一个事件，如果存在多个，后面的事件会覆盖前面的事件。而addEventListener可以给元素注册多个事件。addEventListene
2022-05-29 21:46:45
139
原创 前端女娲补天 JavaScript（三） JavaScript的运行过程
JavaScript的运行过程执行过程中用到的内容执行上下文栈 ECS execution context stackjs执行的调用栈，当js代码执行时，这段代码会入栈，执行完成会出栈全局执行上下文 GEC global execution contextjs运行时创建的执行上下文函数执行上下文 FEC functional execution context在函数执行时创建的执行上下文，包含函数的AO对象、作用域链、绑定的this全局对象 GO global objectjs引擎在代码执
2022-05-29 21:42:06
144
原创 前端女娲补天 JavaScript（二） JavaScript和Java的区别
JavaScript和Java初学者很容易认为Java ≈ JavaScript，总觉得其中有着千丝万缕的联系。其实JavaScript一开始叫做Mocha，在其诞生之初Java大火，为了蹭Java的热度，网景公司就将Mocha改为了JavaScript，后来也就使用至今了。二者区别java是强类型语言，js是弱类型语言 弱类型：声明时不需要定义类型，在执行时才确定。java是动态类型语言，js是静态类型语言 java需要编译器编译，而js不需要，可以由解释器直接解释执行。（也就是编译一行，执行一
2022-05-29 21:37:54
1874
原创 前端女娲补天 JavaScript（一） 什么是Promise，还有其他什么异步解决方案
什么是Promise异步的最早解决方案是回调，如setTimeout。但回调函数嵌套很容易造成回调地狱的问题，于是ES6中推出了Promise，通过then方法链式调用解决了回调地狱。Promise有三种状态，pending，fulfilled，rejected，一旦状态发生改变，就不会再变。虽然Promise是用来解决异步问题，但是Promise内部的执行器是同步执行的。Promise原型链上的方法：Promise.prototype.catchPromise.prototype.thenPr
2022-05-29 21:29:46
124
原创 前端女娲补天 CSS（十一） 什么是BFC
什么是BFCBFC（Block Formatting Context），块级格式化上下文。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。可以用以下方式开启BFC：overflow: hiddendisplay: inline-blockposition: absoluteposition: fixedBFC可以解决的问题margin外边距重叠问题父元素塌陷...
2022-05-29 21:27:46
65
原创 前端女娲补天 CSS（十） position有哪些属性
position有哪些属性static（默认）：元素出现在正常的文档流中 没有left top等 没有z-indexabsolute：完全脱离文档流 相对最近一个有定位的父元素偏移，直到document块元素 在未设置宽度时撑开宽度relative：不脱离文档流（保留原来位置，不会占用新位置）fixed：基于浏览器窗口固定定位 可用来做一些导航栏 也可以做回到页面开头的按钮sticky：在视口内relative，视口外fixed可以做一些头部或者搜索框导航栏之类的（父元素overflow:hi
2022-05-29 21:25:58
67
原创 前端女娲补天 CSS（九） 隐藏元素的方式
隐藏元素的方式display：none（不会渲染，不会响应）visibility：hidden（占据空间，不会响应绑定事件）opacity：0（占据空间，会响应绑定事件）position：absolute（移到可视区外，野路子哈哈哈）z-index：负值transform：scale(0,0)（占据空间，不会响应绑定事件）...
2022-05-29 21:24:42
58
原创 前端女娲补天 CSS（八） css过渡，变换和动画有哪些属性
过渡transition（复合属性），参数有：property：参与过渡的属性，none | all | property（元素名）duration：过渡时间timing-function：过渡动画类型, ease（默认 0-慢-快-慢） | linear（匀速） | ease-in（慢-快） | ease-out（快-慢） | ease-in-out（慢-快-慢）delay：延迟时间变换transform（复合属性）2drotate（2d旋转）：单位度数deg，正顺时针，负逆时针tra
2022-05-29 21:22:37
63
原创 前端女娲补天 CSS（七） 什么是DOM树，什么是CSS树，什么是渲染树
什么是BOM树DOM是什么？DOM是文档对象模型，是一个树形结构，根节点是Document,用于存储文档中的节点对象。可以通过DOM访问HTML元素的内容与联系，也可对其进行修改。什么是CSS树CSS树，又称CSSOM（CSS Object Model）是一个树形的文档结构，以树存储了各个选择器的映射以及相关样式属性，根节点是html。什么是渲染树构造DOM树，CSSOM树的时候也在同步构造渲染树（Render Tree），渲染树由DOM和CSSOM结合而成，通过DOM中的可视节点构造，并同时包
2022-05-29 21:19:15
696
原创 前端女娲补天 CSS（六） 什么是重排，什么是重绘，怎么减少重排重绘
什么是重排在影响了元素的几何信息后(元素的位置和大小)，可能会同时影响其他元素的几何信息，浏览器需要重新计算各元素在的几何属性，相关的渲染树会被废弃并重构，这个过程叫做重排。什么是重绘在渲染树重构或某一元素样式改变时发生。将渲染树的各个节点渲染为屏幕上的实际像素。重排一定触发重绘，重绘不一定触发重排。怎么减少重排重绘样式集中改变，使用class统一改变style或者使用cssText。什么是cssText？cssText可以在JS的DOM操作中修改元素的style样式，写法是：doc
2022-05-29 21:14:03
162
原创 前端女娲补天 CSS（五） 什么是雪碧图
什么是雪碧图雪碧图（sprites）将网页中能够用到的一些图片整合到一张图片中，再使用背景图片属性定位需要的图片内容。这个是虚假的雪碧图雪碧图用到的属性width，height（容器宽度）background-imagebackground-repeat（设置为no-repeat）background-position（left，top的像素或百分比定位）进行背景定位background-size（x，y像素或比例大小）一般是长宽等比例缩放进行设置雪碧图的优点减少图片http请求，只
2022-05-28 22:56:14
172
原创 前端女娲补天 CSS（四）伪类有哪些，伪元素有哪些
伪类有哪些伪类定义状态。a标签的伪类： :link :hover :active :focus :visitedUI元素伪类（用于form元素）： :enabled（可选中状态） :disabled（不可选中状态） :checked（选中状态）结构伪类： :nth-child(n) :nth-last-child(n) 倒数第n个 :first-child :last-child伪元素有哪些伪元素是不存在于DOM中的虚拟元素。有::after ::before ::first-letter
2022-05-28 22:51:44
87
原创 前端女娲补天 CSS（三） 有哪些flex属性
有哪些flex属性父元素flex-direction：flex排列方向与顺序，值有row（横向 默认）| row-reverse | column（纵向） |column-reverseflex-wrap: 项目是否换行，值有nowrap（不换行 默认）| wrap | wrap-reverse（第一排紧贴底部）flex-flow: flex-direction和flex-wrap的集合，默认值row nowrapjustify-content（横轴排列）: flex-start
2022-05-28 22:47:26
61
原创 前端女娲补天 CSS（二） 怎么判断元素是否在可视区，offsetWidth和style.width的区别，元素有哪些宽高属性
怎么判断元素在可视区内要让元素出现在可视区内，就要让它的位置在浏览器导航栏下面，浏览器下边界上面。换句话说，元素的上边界必须低于视口上边界，元素的下边界必须高于视口的下边界。那么判断的条件就是：当前元素距离视口上边界高度getBoundingClientRect().top <= 视口高度screen.availHeight - 元素自身高度 offsetHight&&当前元素距离视口上边界高度getBoundingClientRect().top >= 0简言之，
2022-05-28 22:43:10
646
原创 前端女娲补天 CSS（一） 什么是CSS盒模型
什么是CSS盒模型css的元素都可以被看成是一个盒子，这就叫盒模型。一般情况下盒模型由margin border padding content组成。盒模型的两种类型盒模型分为标准盒模型和IE盒模型两种。标准盒模型（默认）的width和height是content的宽高而IE盒模型的width和height是content + padding + border的宽高box-sizingbox-sizing是指盒模型的类型标准盒模型box-sizing:content-boxIE盒模型b
2022-05-28 22:28:38
98
原创 前端女娲补天 HTML（二）什么是懒加载，什么是预加载
什么是懒加载懒加载可以将页面上的图片src设置为空，真实路径放在data-original属性中，在图片进入可视区域后再将src设置为data-original的值。具体实现在DOM中获取所有懒加载图片元素。window添加onscroll监听，遍历通知所有待加载图片，如果图片在视口内（图片离视口上边界距离image.getBoundingClientRect().top，TODO：判断元素在视口内文章链接 ）则将data-original中的路径赋给src。懒加载的优点提升用户体验，加快首屏渲
2022-05-28 22:15:44
397
原创 前端女娲补天 HTML（一） 什么是语义化标签
什么是语义化标签什么是语义化标签？如header，nav，ul li 这样的标签就是语义化标签，语义化标签们信奉着一句话：什么样的标签做什么样的事。语义化标签的优点让人更容易读懂（增加代码可读性）。让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。在没有 CSS样式下，页面也能呈现出很好地内容结构、代码结构。常见的语义化标签header标签：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框
2022-05-28 21:59:06
95
原创 前端女娲补天 前端（二） 什么是前端工程化
什么是前端工程化以下仅是一家之言，如有指点，敬请斧正。刚接触计算机行业的时候，我的想法和大部分人一样，都认为前端就是做UI设计的，比起程序员，可能更像一个设计师。这句话放在二十年前甚至三十年前也许是对的，在那时前端不太算一个真正独立出来的方向，很大一部分页面也都只是由HTML和CSS静态编写出来的。但是随着互联网和移动设备的普及，前端不再能够被用“小体量”来形容了。为了完善用户体验，前端页面的互动性越来越强，HTML5的页面上已经足以搭载媒体，游戏，可视化页面等高交互性的媒介。这样一日复一日，原生的J
2022-05-28 21:44:00
74
原创 前端女娲补天 前端（一） 前端性能的优化方式
前端性能的优化方式前端页面性能对用户体验非常重要。从小的讲，如果你花了好几个月辛辛苦苦做了一个精美的个人网站，满眼泡泡地等待用户去访问，结果别人用户家连的网是天翼3G，连打开网站都花了好几秒钟，等了十秒图片都没刷出来，pia一下就把网站给你关了，你气不气？从大的讲，淘宝、拼多多和京东这样的电商网站，用户日活上亿，特别是遇到6.18和双十一这些挤爆服务器的日子，要是你的平台卡了，用户就把钱花到其他平台去了，你老板气不气？总而言之，前端性能优化十分重要，有下面一些方法可以优化前端性能。http合理设
2022-05-28 21:33:29
87
原创 前端系列前记
为什么要写前端系列的文章前段时间面试的时候，面试官问我有没有在博客上面发布一些东西。我说没有。我很久以前是有写几篇前端博客的想法的。但局限于当时的个人技术，这个想法很快就化为一纸空谈。其实写文章是一件比较淘神费心的事情，要花时间去了解所写主题的各种相关知识，还要把这些知识用自己的语言汇总成一篇成文，属实不是那么容易。但是春招来了。为了弥补我那残破不堪的基础，我还是用word文档和txt文档在本地准备了不少前端的基础知识，随手起了个《基础知识女娲补天》这样的名字，意在像女娲用三万六千五百块五色石补天
2022-05-28 20:51:27
53
原创 CSS 浮动的作用以及高度塌陷的解决方案BFC
CSS float浮动的作用以及高度塌陷的解决方法目录CSS float浮动的作用以及高度塌陷的解决方法前言一、float浮动是什么？二、浮动属性的使用1.使用方法2.读入数据总结前言浮动属性是css样式中非常重要的属性，网页的导航条和左右导航栏等都靠浮动属性来完成。同时，浮动属性的浮动特性在一些布局中十分重要。一、float浮动是什么？浮动是什么？在正常div布局中，每个div块元素都占据完整的一行，因此下一个div元素会出现在上一个div元素的下一行，整个布局是由上到下依次排列的。
2021-03-20 21:50:21
305
9
原创 Morris遍历算法 树的中序遍历
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码
2020-11-03 23:27:58
303
2
原创 强化学习 五子棋算法
强化学习 五子棋算法蒙特卡洛树搜索 MCTS蒙特卡洛树搜索详解功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入本文会以AI五子棋展开，讲解一些强化学习中博弈方向的算法。全文只涉及算法讲解，不会展现代码。蒙特卡洛树搜索 MCTS
2020-10-01 09:26:07
6622
4
空空如也
c语言用for循环给二维数组赋值，请问哪里错了
2019-09-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人