- 博客(7)
- 收藏
- 关注
原创 [Webpack] Code Splitting
Code Splitting【代码拆分】,是Webpack里一种优化前端应用性能的技术,通过将应用程序的代码按需拆分成多个较小的块,以提高初始加载速度并降低资源消耗。这是一道非常抽象的面试题,因为Webpack就代表了Code splitting,你用了Webpack就离不开代码拆分。
2023-11-02 14:35:26
79
原创 关键渲染路径
关键渲染路径(Critical Rendering Path)是指浏览器在处理和呈现网页时所经过的一系列步骤,这些步骤直接影响网页加载和渲染的速度浏览器从服务器获取HTML文档,并对其进行解析,构建DOM树(Document Object Model),表示网页的结构。浏览器解析外部CSS文件或内嵌样式,构建CSSOM(CSS Object Model),用于计算元素的样式和布局。浏览器将DOM树和CSSOM合并成为渲染树(Render Tree),渲染树只包含需要显示的元素,排除了不可见的元素。
2023-11-01 10:08:02
84
原创 Webpack打包流程 最简单最详细!
很多同学就知道webpack能打包,但具体打包是为了什么呢?稀里糊涂的就看完了webpack的教程,开始新的项目的时候,配置却无从下手。
2023-10-31 10:20:52
159
原创 Javascript中new的过程
需要注意的是,通过new运算符创建的对象实例与构造函数之间存在一个连接。实例可以访问构造函数原型上定义的属性和方法,而构造函数也可以通过原型链访问到实例共享的属性和方法。JavaScript new对象的四个过程实例浅析_javascript技巧_脚本之家。
2023-10-30 14:15:10
317
原创 【Promise】3道题轻松上手Promise执行顺序
首先我们先创建了一个变量promise来接收promise对象注意:在创建Promise的时候,回调函数里的代码是同步立即执行的。所以先输出1紧接着碰到了resolve,这里将promise的状态改为了完成,并且后续可以使用.then方法接收reslove中的参数输出2这时遇到.then方法,我们将其加入微任务队列,不执行。输出4这时候作用域中已经没有宏任务了,我们检查微任务队列,输出3结果:1243。
2023-10-24 12:17:34
125
原创 SVG简单绘制总结
<svg class="svg1" width='400px' height='400px' fill="#ccc"> <!-- rect画矩形 --> <rect x="20" y="20" rx="10" ry="10" width="100" height="100"></rect> <!-- cx是圆心x位置 cy是圆心的y位置 --> <circle cx="150" cy="..
2022-02-24 15:48:59
2810
原创 【三栏布局】
两侧固定宽度,中间以一个响应式或者自适应进行布局,例如CSDN和淘宝都是通过这种方式来进行布局。1.利用浮动+margin2.利用flex布局(常用)(父盒子设置display:flex,给中间的盒子设置flex为1)3.利用圣杯布局DOM结构(一个大的最外层盒子 MAIN盒子 左盒子 右盒子)先全部设置左浮动 给左右盒子设置宽度 给大的盒子设置外边距 外边距等于宽度 给MAIN盒子宽度设置为100% 再让左盒子的左外边距-100% positon:relative left:-200p..
2021-12-19 09:49:14
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人