- 博客(27)
- 收藏
- 关注
RSS订阅转载 Canvas、 SVG 和 WebGl三者之间的区别
可看作能在浏览器上运行的OpenGL,WebGL的HTML节点名称用的也是canvas,但是他的渲染则和canvas不同,他可以支持硬件加速,支持3D,可用于3D游戏的开发,目前很少有3D的HTML5游戏,现在你能看到很多酷炫的图形交互的3D图表,大多用WebGL来渲染的。Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。，是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；
2023-08-12 11:00:21
308
原创 Webpack的一些知识（二）
模块热替换是指在应用运行中，替换、添加、删除模块，而无需重新刷新整个页面主要靠webpack-dev-serve这个插件创建两个服务：提供静态资源的服务（express）和Socket服务express服务主要负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）Socket是一个长连接的服务能够实现建立后可以全双工的通信当服务器监听到对应的模块发生变化时，会生成.json文件和.js文件通过长连接，可以直接将这两个文件主动发送给客户端。
2023-05-04 22:41:50
111
原创 Vue和react的一些知识点
不避免提及的就是组件化，很久以前就有组件化的这么一个概念，像jsp、php那些就有组件化了，但是那些组件都是静态渲染的，想要更新，就只能通过js去操作DOM，这也是为什么早些年jqery那么火的原因。然后随着时代的发展，为了满足富客户端（页面功能越来越多），程序员不再需要太关注于DOM的操作，在之前的基础上进行了一些创新，MVVM数据驱动视图就出现了。生产消费者模式，用来解决多层级的组件之间通讯，用redux又小题大做的场景，如传入全局主题、语言等。Vue是声明式编程，通过数据声明。
2023-05-03 21:13:43
96
原创 React一些知识
主要用来指定dom节点渲染的位置，例如position：fixed需要渲染在最外层body，父级z-index太低。生产消费者模式，用来解决多层级的组件之间通讯，用redux又小题大做的场景，如传入全局主题、语言等。的变化，决定UI是否更新，当组件比较多时，使用这个方法能有效提高应用性能。时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用。DOM事件/setTimeout：同步更新，不合并state。来更新你的组件状态，旧的属性还是可以通过。没有实例，没有生命周期，没有state。
2023-04-27 18:09:57
47
原创 Vue生命周期
Vue实例初始化完成，完成响应式绑定，初始化data、props、methods、computed、watch五个选项，初始化provide依赖，调用钩子函数。：数据发生改变，且DOM更新完成（不要再updated中修改data，可能会导致死循环）：DOM渲染完成，组件创建完成，由”创建阶段“进入”运行阶段“，调用钩子函数。：创建一个空白的Vue实例，data和method尚未被初始化，不可使用。：开始编译模板，通过render函数生成Vdom，调用钩子函数。：组件注销之后调用钩子函数。
2023-04-25 19:28:13
29
原创 Webpack的一些基础内容
loader的执行顺序是从后往前的，比如说，下面代码就是先将识别一些浏览器兼容问题进行替换，然后将代码转换为css文件（因为框架中用的是js的 import './style/style1.css' 语法，是不识别css结尾文件的），然后再插入到head中的style标签中。将通过js语法导入的css文件识别为css文件（因为import语法是识别不了导入的文件类型的，它只知道导入的是一个模块）。然后再webpack.config.js中的规则中注册就行了。建postcss.config.js文件。
2023-04-24 13:18:20
35
原创 Webpack原理整理（一）模块化原理
演示项目样例介绍这次来介绍下webpack模块化的原理，这次以commonJS模块化为例，先来看看项目的目录结构是怎样的。我们再来看看主要的内容，项目的内容非常简单，在index.js中用commonJS模块引入的方法，引入了一个js文件夹下common.js导出的 mul 乘法函数。进行打包，查看模块化原理 我们进行npm run build打包（package.json）script中的build字段要改为web...
2022-04-09 16:47:21
1632
原创 CDN工作原理，淘宝的CDN是怎样做的？
先看个官方定义：内容分发网络（Content Delivery Network，简称CDN）是建立并覆盖在承载网之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。我们再来看看CDN的工作原理。假设通过CDN加速的域名为www.a.com，接入CDN网络，开始使用加速服务后，当终端用户（北京）发起HTTP请求时，处理流程如下：当终端用户（北京）向www.a.com下的指定资源发起请求时，首先向LDNS（本地DNS）发起域名解析请求。 LDNS检查缓存中是否有www.a.c..
2022-04-07 09:58:38
461
原创 圣杯布局和双飞翼布局原理，清除浮动原理
圣杯布局和双飞翼布局的好处 三栏布局，中间的内容栏最先加载和渲染。 两侧内容固定，中间内容随宽度自适应。<style> #container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; } ......
2022-03-06 16:04:38
208
原创 for...in for...of遍历对象的四种方式
首先最简单的ES 5的for in遍历对象let a={ a:100, b:200}for(let key in a) console.log(key,a[key])for+Object.keys()方法遍历对象let a={ a:100, b:200}for(let key of Object(a)) console.log(key,a[key])for of+Object.entries()方法返回一个给定对象自身可枚举属性的键
2022-03-04 09:05:03
4516
1
原创 原生JavaScript实现v-model双向绑定，响应式原理
在学习了响应式原理之后，我自己尝试用JavaScript原生实现了一下，发现对响应式原理和v-model的原理有了进一步的理解，要点就是通过事件和事件对象将用户输入的东西赋值给data，通过Object.defineproperty这个响应式的核心API去设置data的set和get，让更改的值能够反馈到视图上。废话不多说，上代码。<input id="input" type="text"><p id="text"></p ><script...
2022-03-03 10:12:12
493
原创 HTTP0.9/1.0/1.1/2.0/3.0的区别和发展历程
HTTP0.9 HTTP0.9是HTTP最早的版本，最开始的需求知识用来传输体积很小html文件，一个Get index.html就可以了，所以它有一下特点 只有一个请求行，没有请求头和请求体 服务器也没有返回头信息，只需要返回数据就可以了 以ASCII字符流进行传输 HTTP1.0随着时代的发展，简单的html网页已经无法满足人们的需求，所以HTTP升级了1.0版本，有以下特点： 为了支持多类型文件下载，需要有文件编码、类型等信息，...
2022-02-28 19:42:40
3530
原创 Ajax和axios实现原理（手撕代码）
Ajax实现原理很简单，就是封装XMLHttpRequest对象的操作，下面就以Get请求举例。function Ajax(url, fn) { // 实例化XMLHttpRequest对象 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { // readyState == 4说明请求已完成...
2022-02-23 19:05:52
343
原创 vue的子组件为什么就需要用data函数return一个对象
JavaScript中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。 我们在通过构造函数new vue()的时候传入对象中的data数据其实是vue实例对象上的属性，数据存在于内存当中，可以直接是对象，而对于创建子组件components则不能直接使用data定义对象，vue规定了必须使用函数，而不是对象。因为使用对象的话，每个子组件上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是...
2022-02-17 21:29:06
638
原创 JavaScript手撕深拷贝、instanceof的原理
JavaScript有哪些数据类型？typeof操作符能识别哪些数据类型？instanceof的原理，手撕JavaScript深拷贝。
2022-01-14 22:38:41
354
原创 JavaScript中的继承，ES6中class和extends的原理
我在上一篇博客中介绍了JavaScript中new操作的原理，那么就接下来就来探索下，ES6中引进的class和extends的原理吧。
2022-01-11 23:56:49
1581
原创 页面渲染原理，从输入url到页面展示流程
浏览器从url到页面展示到用户面前，到底发生了什么？这是一个很常见的前端面试问题，我结合自己的知识储备来谈一谈。首先，我认为该流程应该分为三部分，导航阶段、准备渲染阶段和渲染阶段。导航阶段首先浏览器进程开始工作，识别用户输入的url格式是否正确，如果不正确，就视为搜索内容调用浏览器默认的搜索引擎，如果是正确的，浏览器就构建请求行信息，例：GET /index.html HTTP1.1，然后去查询浏览器缓存。当浏览器发现请求的资源有缓存副本未过期时，拦截请...
2022-01-09 13:30:01
490
原创 都说JavaScript单线程？JavaScript真的是单线程？
在学习JavaScript的时候总会接触到一些书或者文章说因为JavaScript是单线程的就怎么怎么样，我就很好奇，能说一门语言是单线程的吗？我总结了下网上很多回答，结合自己的理解整理了下？。我们所说的JavaScript单线程指的是什么？首先，JavaScript是没有线程这个概念的，我们平时说的js单线程还是多线程只是相对于执行的环境来说的，指的是js运行在浏览器中是单线程的，或者是js引擎单线程地处理js代码，在同一时间只能做一件事。假设js运行在浏览器中有两...
2022-01-08 18:52:51
1780
原创 块级元素、行内元素、如何理解HTML语义化？
HTML的知识点相对较散，我挑了2个常见的总结下HTML的知识。块级元素display为block/table的元素，特点是不管内容多少都要独占一行，常见的有div、h1、table、ul、p等。内联元素display为inline/inline-block的元素，特点是不会换行，知道浏览器的边缘为止，常见的有span、img、input等。如何理解HTML语义化？1、让人更容易读懂代码，比方说一个页面全都是div，虽然通过...
2022-01-08 18:38:35
293
原创 BFC是什么？有什么应用场景？
什么是BFC？Block format context，块级格式化上下文。一块独立渲染区域，它有自己的一套渲染规则，内部元素的渲染不会影响边界以外的元素。有哪些渲染规则？块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。 对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。 BFC的区域不会与浮动元素重叠。
2022-01-07 17:46:41
441
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人