![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 83
Sahadev_
挨踢程序员-糖炒栗子
展开
-
【历史文档】小程序启动速度优化实践
这篇文章是2018年3月写的,本身只是做了简单的内部分享。近期被人问题这段经历,发现忘得一干二净,于是再拿出来回顾回顾。前言:前端应用的启动速度一向是移动终端的优化重点,因为这是面向用户进入的大门。良好的启动速度无异于会带来良好的用户体验。本篇文章主要介绍每日优鲜主商城小程序的启动速度优化方法。启动时间消耗概览小程序的启动时间主要分为以下几个阶段:微信客户端比对版本差异,下载并加载代码。小程序本身的初始设置,业务逻辑请求处理。页面的渲染。所以,小程序从点击启动到渲染完成主要会经历以上.原创 2021-09-03 14:22:39 · 680 阅读 · 0 评论 -
小程序调试技术详解(基于小猴小程序)
本篇文章主要围绕小猴小程序调试技术第三版进行展开。在上一篇导读文章中提到,小猴小程序的调试部分从无到有一共经历了3个版本。本篇文章会详细描述面向开发者的调试功能是如何实现的。文章将会描述以下部分:调试实现的基本通信关系结构。如何实现完整的DOM审查能力。如何实现Console。如何实现Source以及断点调试。如何实现对网络记录的审查。如何实现基于页面的数据审查。基本通信关系结构概述上图完整的表达了实现小程序调试技术各关键部分之间的关系。主要分为以下几个关键角色:调试面板:.原创 2021-08-22 21:59:01 · 8023 阅读 · 2 评论 -
小程序调试技术导读
最近公司内在自研小程序,而我负责其中的调试部分,主要面向于开发者工具。本篇文章是导读文章。调试能力从0到1一共经历了4个版本,接下来的文章将会以这4个版本为主线分别进行介绍。初始版上图为调试还不存在时的一个通信关系图。在彼时已经实现了逻辑代码与渲染代码的运行隔离,其中逻辑代码是运行在一个vm中的。渲染层通过Electron提供的IPC能力与electron进行通信。electron持有vm的引用,在收到渲染层的请求后,Electron会直接交给vm执行。vm中运行的代码会通过vm的C原创 2021-08-04 18:49:05 · 2624 阅读 · 4 评论 -
如何开发小程序开发者工具?
最近集团内部在自研小程序,我负责小程序开发者工具的调试部分。经过一段时间的探索,摸索出不少经过实际检验的可行手段。接下来将会用几篇文章总结一下思路。文章的内容主要会分为以下几部分:如何建立逻辑层运行时容器(两种方案利弊)?如何嵌入调试审查面板?如何启动断点调试能力?如何审查小程序DOM?如何实现逻辑层与渲染层的通信?如何实现渲染层与Chrome扩展的通信?先放几张图出来:小程序审查图:渲染层用的是Vue的能力,所以审查也是基于Vue-devtools做的。Vue-devtools原创 2021-06-24 19:25:49 · 398 阅读 · 6 评论 -
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG。它也是一种LowCode解决方案。通过它可以快速完成Vue组件的代码骨架搭建,通过减少不必要的重复工作从而带来开发效率的提升。体验地址:https://lc.100tal.com/出现的背景做前端久了就难免会发现有一些工作其实是繁复的,它们有一些共同的特点:频率高非常基础花费时间而有一部分工作是可以通过技术手段解决的,例如在写Vue时会发现:class的名称需原创 2021-01-07 20:02:31 · 6328 阅读 · 6 评论 -
script标签的async、defer属性傻傻分不清楚?来一次说清楚
Normal ExecutionBefore looking into the effect of the two attributes, we must first look at what occurs in their absence. By default, as mentioned above, JavaScript files will interrupt the parsing of the HTML document in order for them to be fetched (if原创 2020-12-28 15:38:58 · 407 阅读 · 0 评论 -
前端如何做极致的首屏渲染速度优化
这里说的极致是技术上可以达到最优的性能。首先为了降低白屏时间,可以加一个loading效果。但拿vue项目来说,尤其是以vue-cli创建的项目来说,能做到极致并不容易。默认vue-cli会在生成的文件头部增加很多的link,而这些link会阻碍后面脚本的处理,等这些脚本处理完才会有dom的生成以及动画的执行。所以,我们的极致目标就是让loading动画尽可能的早。为了看出优化前优化后的效果差异,一切在浏览器的3G慢速情况下验证。未完待续。。。...原创 2020-12-24 21:31:16 · 2553 阅读 · 3 评论 -
浏览器对Html的解析过程
Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the JavaScript engine inside browsers.The browser parses HTML into a DOM tree. HTML parsing involves tokenization and tree co原创 2020-12-14 14:54:10 · 305 阅读 · 0 评论 -
前端开发者的福音!通过拖拽就可生成Vue代码的平台来了!
Vue组件代码生成平台Vue组件代码生成平台是一款面向Vue开发者的拖拽式组件代码生成工具。通过它可以快速搭建Vue组件的代码骨架结构。开发者可在此基础上进行二次开发。目前该平台非常适合快速搭建一个常见的数据查询组件,仅需要拖三个组件进来即可完成,例如:界面及操作介绍主界面主要分为三块区域:组件库区域,组件库区域主要用于选择组件元素。组件操作预览区域,该区域主要编辑组件元素的位置与属性。实时代码生成区域,当组件元素被拖入到预览区域时,该区域会实时生成对应的代码。一个简单组件在熟悉了原创 2020-11-12 10:13:21 · 8221 阅读 · 0 评论 -
我在小程序工程化方面的一些实践
我在小程序工程化方面的一些实践早期做小程序时,还是原始时代,项目结构混乱,各种冗余代码,每次迭代时由于高昂的维护成本,极为头疼。遂在一次次的更迭中完成了基础组件的初版,极为酸爽。从此之后在当时的情况下只需要关注于业务,对于通用的该封装分装,该分层分层,该解耦解耦,也出了一款独立于业务之外的基础组件。洋洋自得。后来入职新公司,遇到的问题也是同样的,在工作之余计划将此前抽象的基础组件集成进来,发现...原创 2020-03-04 20:20:36 · 619 阅读 · 0 评论 -
随机/线性颜色生成器(RandomColorGenerator)
最近在实现https://javascript30.com/的课程,其中有一门课程要求利用Canvas实现一个效果,我发现这个效果其中的颜色是线性生成的。结合我之前已经写过一个随机颜色生成器,就想将这个随机颜色生成器写出来,作为一个工具使用,虽然实际应用场景不大,就当练练手了。本示例中使用了大量的Generator,在写的过程发现ES6所提供的Generator在这个场景中非常适用。可以参考学习...原创 2020-02-25 21:39:14 · 8980 阅读 · 0 评论 -
整理一波国外前端学习网站
国内的普通开发者对于掌握一门新的技术不知道从哪里下手,看哪些书。为了获得相关知识会关注各种公众号、购买各种视频课程来学习,但由于这些内容本身有碎片化的特点,效果往往不太理想。以至于付出了大量的时间到最后不能够形成系统化的知识。我同样也遇到过类似的问题,不是说公众号与视频课程不好,这些也有自身的优势,但是往往都是别人经过实践沉淀下来的,我们读过之后往往仅限于了解而已。如果要掌握还需要大量的实践、探...原创 2020-02-14 16:58:50 · 8335 阅读 · 3 评论 -
前端应用开发架构图谱
个人整理的前端架构图谱,之后会根据这个图谱不断的完善内容。希望这个图谱可以对开发同学的知识脉络有个梳理的作用。项目创建脚手架IDE脚手架IDE或社区提供的脚手架业务型脚手架根据业务特点通过Node写的工具,用于降低高频手写操作通用组件Element UIEchartIView项目分层组件错误数据采集业务代码与运行时框架隔离安全性兼容...原创 2020-02-11 17:52:50 · 8236 阅读 · 4 评论