性能优化之详解各种指标

2023-07-10
阅读 7 分钟
5.9k
上篇文章最后提到了我们可以通过performance的一些属性对性能做统计,我们会发现performance对象下有非常多的属性,远不止上篇文章提到的DOMContentLoaded与Load这两个事件。
封面图

使用CSS Paint API实现有趣的图像碎片效果

2023-07-06
阅读 6 分钟
4.4k
CSS Paint API是Houdini项目的一部分。它允许我们使用自己的功能扩展CSS,所以我们可以不再需要等待新功能的发布,完全可以自己实现想要的新功能,可以说CSS Paint API就是CSS的未来。Houdini是一组底层API,它暴露一部分CSS引擎给开发者介入浏览器渲染与布局的能力,从而能够扩展CSS。
封面图

性能优化之window.onload

2023-07-03
阅读 5 分钟
4.4k
最近在做一些性能优化相关的工作,相信大家在工作过程中也会遇到一些性能优化相关的场景,这对于前端开发者来讲是一项加分技能。为了我们的用户在使用我们的产品时能够有一个非常好的体验,我们需要对页面进行诊断优化。在行业中,我们的页面P90在两秒内算是达标,超过这个时间那么你就可能会流失部分用户。
封面图

【webpack系列】从基础配置到掌握进阶用法

2023-06-25
阅读 10 分钟
4.3k
本篇文章将介绍一些webpack的进阶用法,演示内容继承自上一篇文章的内容,所以没看过上一篇文章的建议先学习上一篇内容再阅读此篇内容,会更有利于此篇的学习~
封面图

【webpack系列】从核心概念到上手配置

2023-06-20
阅读 9 分钟
3.6k
作为前端开发者,相信大家或多或少都接触过webpack,现如今webpack已经渗透在了前端的各个方面,所以我们有必要来了解并学习webpack,webpack 是一种用于构建 JavaScript 应用程序的静态模块打包器,它能够以一种相对一致且开放的处理方式,加载应用中的所有资源文件(图片、CSS、视频、字体文件等),并将其合并打包成...
封面图

一文搞懂V8引擎的垃圾回收机制

2023-06-13
阅读 5 分钟
2.1k
我们平时在写代码的过程中,好像很少需要自己手动进行垃圾回收,那么V8是如何来减少内存占用,从而避免内存溢出而导致程序崩溃的情况的。为了更高效地回收垃圾,V8引入了两个垃圾回收器,它们分别针对不同场景进行工作。如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取...
封面图

V8是如何执行JavaScript代码的?

2023-06-12
阅读 3 分钟
4.1k
一般来讲,电脑是不能直接运行我们的javascript代码的,它需要一个翻译程序将人类能够理解的编程语言 JavaScript,翻译成机器能够理解的机器语言。目前市面上有很多种 JavaScript 引擎,诸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌开发的开源项目 V8 是当下使用最广泛的 JavaScript 虚拟机,全球有超过 25 亿台...
封面图

pnpm才是前端工程化项目的未来

2023-06-02
阅读 5 分钟
4.8k
相信小伙伴们都接触过npm/yarn,这两种包管理工具想必是大家工作中用的最多的包管理工具,npm作为node官方的包管理工具,它是随着node的诞生一起出现在大家的视野中,而yarn的出现则是为了解决npm带来的诸多问题,虽然yarn提高了依赖包的安装速度与使用体验,但它依旧没有解决npm的依赖重复安装等致命问题。pnpm的出现完...
封面图

了解CSS Module作用域隔离原理

2023-05-30
阅读 10 分钟
3.9k
我们知道,Javascript发展到现在出现了众多模块化规范,比如AMD、CMD、 Common JS、ESModule等,这些模块化规范能够让我们的JS实现作用域隔离。但CSS却并没有这么幸运,发展到现在却一直没有模块化规范,由于CSS是 根据选择器去全局匹配元素的,所以如果你在页面的两个不同的地方定义了一个相同的类名,先定义的样式就会...
封面图

如何提升项目的本地构建效率?

2023-05-29
阅读 5 分钟
899
最近写H5的项目比较多,该项目从年龄上看着还算比较年轻😂,整个架构应该是直接使用vue-cli基于vue2生成的,那底层打包工具自然也就是webpack,我们知道webpack有个通病,那就是随着项目的不断增大每次构建的时间也会随之越来越长。比如我们这个项目的单次冷启动就达到了惊人的1分20秒左右,每次跑完电脑风扇转的飞起,简...
封面图

从Babel开始认识AST抽象语法树

2023-05-19
阅读 7 分钟
1.1k
AST抽象语法树想必大家都有听过这个概念,但是不是只停留在听过这个层面呢。其实它对于编程来讲是一个非常重要的概念,当然也包括前端,在很多地方都能看见AST抽象语法树的影子,其中不乏有vue、react、babel、webpack、typeScript、eslint等。简单来说但凡需要编译的地方你基本都能发现AST的存在。
封面图

探索小程序底层架构原理

2023-01-03
阅读 8 分钟
6.8k
双线程架构在这之前,我们先来思考一个问题,小程序在架构上为什么会选择双线程?为什么是双线程?加载及渲染性能小程序的设计之初就是要求快速,这里的快指的是加载以及渲染。目前主流的渲染方式有以下3种:Web技术渲染Native技术渲染Hybrid技术渲染(同时使用了webview和原生来渲染)从小程序的定位来讲,它就不可能用...
封面图

两行CSS让页面提升了近7倍渲染性能!

2022-11-21
阅读 5 分钟
3.2k
对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者来说可谓是重中之重,其实你如果了解页面从加载到渲染完成的整个过程,就知道应该从哪方面下手了。
封面图

我用canvas带你看一场流星雨

2022-10-24
阅读 7 分钟
6k
最近总是梦见一些小时候的故事,印象最深刻的就是夏天坐在屋顶上,看着满天的繁星,一颗,两颗,三颗...不由自主地开始了数星星的过程。不经意间,一颗流星划过夜间,虽然只是转瞬即逝,但它似乎比夜空中的其它繁星更吸引着我。听老人说,看见流星的时候许愿,愿望是可以实现的,此时早已把数星星抛之脑后,开始期待着下...
封面图

为什么我写的z-index不生效?

2022-10-09
阅读 6 分钟
1.5k
前言相信大家在工作中都遇到过这样一些奇怪的问题:1.为什么我写的z-index没有生效?2.为什么z-index大的元素却没有盖住z-index小的元素?3.如何让父元素盖住子元素呢?以上这些问题都跟CSS层叠上下文有关,带着上面这些问题我们一起来了解一下什么是CSS层叠上下文,以及这些奇怪现象背后的原理!如果这篇文章有帮助到你...
封面图

H5如何实现唤起APP

2022-05-17
阅读 5 分钟
8.2k
写过hybrid的同学,想必都会遇到这样的需求,如果用户安装了自己的APP,就打开APP或跳转到APP内某个页面,如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互,为什么H5能够唤起APP并且跳转到对应的页面?
封面图

超全面总结Vue面试知识点,助力金三银四

2022-03-15
阅读 20 分钟
1.7k
本文会对Vue中一些常见的重要知识点以及框架原理进行整理汇总,意在帮助作者以及读者自测Vue的熟练度以及方便查询与复习。金三银四的到来,想必vue会是很多面试官的重点考核内容,希望小伙伴们读完本文,能够有一定自我提升,也希望这篇文章能够为大家的面试的保驾护航~
封面图

【面试必备】前端常见的排序算法

2022-03-11
阅读 8 分钟
1.6k
算法对于前端程序员来说可能并没有后端程序员应用的多,但我们也得掌握一些基本算法的思想,这无论是对我们找工作还是平时工作都有极大的帮助,现在越来越多的公司都会考察前端程序员的算法能力了,所以我们有必要去学习一下前端常见算法的基本思想。
封面图

2022年了你还不了解箭头函数与普通函数的区别吗?

2022-03-01
阅读 8 分钟
1.8k
箭头函数作为ES6中新加入的语法,以其简化了我们的代码和让开发人员摆脱了“飘忽不定”的this指向等特点,深受广大开发者的喜爱,同时也深受面试官的喜爱,箭头函数常因其不同于普通函数的特点出现在各大公司的面试题中,so,本文会对箭头函数与普通函数进行一些分析。
封面图

前端常见的安全问题及防范措施

2022-02-24
阅读 10 分钟
3.8k
随着互联网的高速发展,信息安全问题已经成为行业最为关注的焦点之一。总的来说安全是很复杂的一个领域,在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,还时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。这篇文章会介绍一些常见的安全问题及如何防范的内容,在当下其实安全问题越来越重要,...
封面图

为什么大厂前端监控都在用GIF做埋点?

2022-02-21
阅读 3 分钟
1.8k
什么是前端监控?它指的是通过一定的手段来获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,为产品优化指明方向,为用户提供更加精确、完善的服务。
封面图

JS定时器执行不可靠的原因及解决方案

2022-02-18
阅读 6 分钟
5.2k
在工作中应用定时器的场景非常多,但你会发现有时候定时器好像并没有按照我们的预期去执行,比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行。想要知道为什么会这样,我们首先需要了解Javascript计时器的工作原理。
封面图

从如何使用到如何实现一个Promise

2022-02-16
阅读 18 分钟
1.3k
这篇文章我们一起来学习如何使用Promise,以及如何实现一个自己的Promise,讲解非常清楚,全程一步一步往后实现,附带详细注释与原理讲解。
封面图

20道JavaScript经典面试题

2022-02-15
阅读 15 分钟
3k
该篇文章整理了一些前端经典面试题,附带详解,涉及到JavaScript多方面知识点,满满都是干货~建议收藏阅读前言如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取最新的文章~1.说一说JavaScript的数据类型以及存储方式JavaScript一共有8种数据类型其中有7种基本数据类型...
封面图