前端南玖

摘要： ## 前言 最近写H5的项目比较多，该项目从年龄上看着还算比较年轻😂，整个架构应该是直接使用vue-cli基于vue2生成的，那底层打包工具自然也就是webpack，我们知道webpack有个通病，那就是随着项目的不断增大每次构建的时间也会随之越来越长。比如我们这个项目的单次冷启动就达到了惊人的1 阅读全文

摘要： CSS Module出现的背景 我们知道，Javascript发展到现在出现了众多模块化规范，比如AMD、CMD、 Common JS、ESModule等，这些模块化规范能够让我们的JS实现作用域隔离。但CSS却并没有这么幸运，发展到现在却一直没有模块化规范，由于CSS是 根据选择器去全局匹配元素的 阅读全文

摘要： 前言 说起媒体查询想必大家最先想到的都是CSS中@media，没错，这是我们最常用的媒体查询方法，主要用来为我们的网站做适配处理。 比如： h1 { font-size: 2rem; color: green; } @media (min-width: 600px) { h1 { font-size 阅读全文

摘要： 前言 URL对于我们开发人员来讲，应该是非常熟悉了。在对URL进行参数拼接时，我们一般都会直接进行字符串拼接或使用模版字符串，因为这样非常方便，但是我们这样其实会在不知不觉中以不安全的方式编写 URL。 比如，我们通常会这样写： const url = `https://www.baidu.com 阅读全文

摘要： 前言 AST抽象语法树想必大家都有听过这个概念，但是不是只停留在听过这个层面呢。其实它对于编程来讲是一个非常重要的概念，当然也包括前端，在很多地方都能看见AST抽象语法树的影子，其中不乏有vue、react、babel、webpack、typeScript、eslint等。简单来说但凡需要编译的地方 阅读全文

摘要： 双线程架构 在这之前，我们先来思考一个问题，小程序在架构上为什么会选择双线程？ 为什么是双线程？ 加载及渲染性能 小程序的设计之初就是要求快速，这里的快指的是加载以及渲染。 目前主流的渲染方式有以下3种： Web技术渲染 Native技术渲染 Hybrid技术渲染（同时使用了webview和原生来渲 阅读全文

摘要： 前言 相信大家对JSON.stringify并不陌生，通常在很多场景下都会用到这个API，最常见的就是HTTP请求中的数据传输， 因为HTTP 协议是一个文本协议，传输的格式都是字符串，但我们在代码中常常操作的是 JSON 格式的数据，所以我们需要在返回响应数据前将 JSON 数据序列化为字符串。但 阅读全文

摘要： 前言 随着CSS的不断发展，一些很酷且有用的属性要么完全被忽视，要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性，这些属性你可能听说过，也可能没听说过，但了解之后你会觉得它们是如此的实用。 如果这篇文章有帮助到你，❤️关注+点赞❤️鼓 阅读全文

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

摘要： 前言 一些布局上的完全加载前后的变化很容易解决：为动态元素预先分配正确的空间，在图像上使用宽度和高度属性，并优先考虑 HTML 文档中的可见元素。但是，导致布局偏移的还有一个难以解决的问题：无样式文本 (FOUT) 的闪烁。 这篇文章我们将探索令人惊讶的复杂文本渲染世界，以及一些解决无样式文本闪烁的 阅读全文

摘要： 前言 大家在工作中想必都是通过自动化部署来进行前端项目的部署的，也就是我们在开发完某个需求时，我们只需要将代码推送到某个分支，然后就能自动完成部署，我们一般不用关心项目是如何build以及如何deploy的，这就极大得提高了我们的开发效率。 在没有自动化部署的情况下，前端项目的部署流程一般是这样的： 阅读全文

摘要： 前言 在早期如果想要对某一些样式进行动态计算，绝大多数的做法都是使用JavaScript来进行，当时的CSS在面对这种场景显得有点无能为力。但是，当CSS3中新增了calc函数时，面对这种场景，JavaScript不再是我们的第一选择，我们只用 CSS 就可以进行相当复杂的计算了。在使用calc的过 阅读全文

摘要： 前言 今天分享一个炫酷的碎片式切图效果，这个其实在自己的之前的博客上有实现过，本人觉得这个效果还是挺炫酷的，这次还是用我们的canvas来实现，代码量不多，但有些地方还是需要花点时间去理解的，需要点数学几何理解能力，老规矩，我们还是先看效果再来看实现步骤。 如果这篇文章有帮助到你，❤️关注+点赞❤️ 阅读全文

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

摘要： 前言 相信大家在工作中都遇到过这样一些奇怪的问题： 1.为什么我写的z-index没有生效？ 2.为什么z-index大的元素却没有盖住z-index小的元素？ 3.如何让父元素盖住子元素呢？ 以上这些问题都跟CSS层叠上下文有关，带着上面这些问题我们一起来了解一下什么是CSS层叠上下文，以及这些奇 阅读全文