阿镇@吃橙子-CSDN博客

原创 React Native 内嵌h5页面(基于vue)的实现方案调研

React Native 是目前流行的跨平台移动应用开发框架之一。通过采用不同的方法进行混合移动应用开发，它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native 已经成为一种流行的移动开发技术，它提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架。在做原生开发时，一般我们会有一些加载H5网页的需求，

2022-03-02 21:49:02 5477

原创教你写一个脚手架，并发布npm包

掘金链接脚手架的搭建作为公司的基建工作，有非常重要的作用。日常的脚手架像 vue-cli、angular-cli等都是通过简单的初始化命令完成了整体框架的快速构建。我们有必要系统性的了解并掌握脚手架的搭建相关知识。文章涉及到脚手架源码链接：https://github.com/llz1990/llzscc_cli (请帮忙star一下)文章最后提交的npm源：https://www.npmjs.com/package/llzscc_cli基于vue-cli了解脚手架的简单应用脚手架就是在启动的

2022-01-24 11:10:48 42778 2

原创你真的了解前端内存管理吗？

掘金链接往往我们意识里觉得内存管理是后端的事情，单并非如此，前端也需要关注内存使用情况。前端为什么也需要关注内存呢？一方面防止内存占用过大导致页面卡顿，甚至没有响应；另一方面Node.js使用V8引擎，内存管理对于服务端至关重要，因为服务端的持久性，内存更容易积累造成内存溢出。js 垃圾回收机制js是通过垃圾回收机制来自动管理内存的，这种方式有自己的利弊：好处：大幅简化程序中都内存管理代码，减轻开发者的负担；同时减少长时间运转造成的内存泄漏问题坏处：开发者无法掌控内存管理，我们无法强迫其进行垃圾

2022-01-23 09:07:24 42830

原创华为云官网性能优化实践

掘金链接对于web性能的优化分析，我们应该从两个大的方面来着手讨论，即：加载优化和渲染优化，当然我们还有其他更多的优化手段，那么在华为云，我们是怎么做性能优化的呢？加载优化如上图所示是一个完整网络请求的耗时分析过程：Queuing：等待可用连接，优先级、连接数、分配磁盘缓存Stalled/Blocking：请求等待发送所用的时间DNS Lookup：DNS查询所用时间Initial Connection / Connecting：建立连接所用时间，TCP握手/重试和协商SSL的时间Re

2022-01-23 09:05:42 42706

原创你真的了解前端模块化吗？

掘金链接模块化的思想是把逻辑分块、各自封装，相互独立，同时自行决定引入执行那些外部模块以及暴露自身的那些模块。基于此我们可以将前端模块划分为几大类，如上图所示。这个基本的思想是所有的 JavaScript 模块系统的基础。模块化的好处：避免命名冲突(减少命名空间污染)更好的分离, 按需加载更高复用性高可维护性js 常见模块1. IIFE 模式：匿名函数自调用（闭包）特点：主要应用在浏览器端，利用闭包的原理创造一个独有的函数作用域来保存私有变量，达到模块化的效果。实现立即执行，不需

2022-01-23 09:03:42 42646

原创基于华为云自定义模板的图片操作演示（框选、拖拽）

掘金链接华为云自定义模板识别是服务于AI领域的流程控制系统，我们一起了解下其中一个模块的界面化操作实例。如下图，针对图片的高精度识别，我们需要处理图片的样式以便获得更好的模型训练数据和高精度识别结果。我们针对三个场景来实现图片处理需求：在初始化模板的时候，可视化区域内加载图片并呈现出来：1. 图片的拖拽移动 /** * 拖拽图片： * @param e * @returns */ public dragImage(e) { e.stopPropagation

2022-01-23 09:02:08 42993

原创你真的会degguger吗？—— 最实用的Chrome 开发者工具使用总结

掘金链接Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。当你打开chrome 开发者工具（打开方式： 1.在Chrome菜单中选择更多工具 > 开发者工具；2. F12；3. 页面上元素右击选择‘检查’）的时候，你会看到：1. 设备模式使用 Device Mode 可以大致了解您的页面在移动设备上呈现的外观和效果。2. 元素面板使用Chrome DevTools的Elements面板检查和实时编辑页面的 HTML

2022-01-23 08:59:59 42825

原创浏览器原理和实践——基于华为云conosle性能

掘金链接1. Chrome 浏览器的进程机制1.1 为什么选择chrome 浏览器？因为 Chrome、微软的 Edge 以及国内的大部分主流浏览器，都是基于Chromium 二次开发而来Chrome 是 Google 的官方发行版，特性和 Chromium 基本一样，只存在一些产品层面差异Chrome 是目前世界上使用率最高的浏览器，所以 Chrome 最具代表性1.2 Chrome 打开一个页面需要启动多少个进程？网络进程 — 网络请求相关浏览器进程 — 浏览器主进程（协调、主控）

2022-01-23 08:15:37 42447

原创前端图片渲染性能优化与实践 — 图片懒加载

前言对于图片量比较大的点上首页APP等，在打开商品展示页面的时候需要再加大量图片，在这种场景下如果直接全量加载，必然会造成页面性能消耗过大，白屏或者卡顿，用户体验非常糟糕，用户真的需要我们显示所有图片一起展示吗？其实并不是，用户看到的只是浏览器可视区域的内容。所以从这个情况我们可以做一些优化，只显示用户可视区域内的图片，当用户触发滚动的瞬间再去请求显示给用户图片懒加载的实现：给所有需要展示的 img 标签添加自定义属性： data-src ，同时不要设置 src 属性，data-src的值为图片

2022-01-23 08:08:02 43467

原创最常见前端手写代码及方法实现

1. 手写 new 操作符function myNew(fn, ...args) { let obj = {}; obj.__proto__ = fn.prototype; let res = fn.call(obj, ...args); if (res && (typeof res === "object" || typeof res === "function")) { return res; } return obj;

2022-01-23 08:03:42 44663 1

原创前端低代码调研与总结

近些年来，低代码的概念逐渐流行了起来，而低代码产品也越来越多的出现在我们的身边。低代码可以叫做可视化搭建，或者叫效能工具等等。像国外的Mendix，国内的宜搭、苍穹、简道云、amis等等。基于这种新型的开发方式，图形化的拖拉拽配置界面，并兼容了自定义的组件、代码扩展，确实在B端后台管理类网站建设中很大程度上的提升了效率。低代码平台能够高效且便捷，成本又低。就应用领域来讲已经很广泛了，例如营销领域，各种页面生产工具，非冰，乐高，宜搭，鲁班。还有电商类的公司都会给商家提供一个类似店铺装修的工具，小程序生产工具

2022-01-21 15:08:33 46866 2

原创基于vue2 + koa 2.0的前后端登录权限和路由权限控制实践

前后台交互过程中，涉及到用户登陆权限和前端路由模块是比较复杂的模块，这里需要我们理清楚整个过程，才能把整个工程架构搭起来。其实在我之前的一篇文章（https://juejin.cn/post/6983287769426559007）中也大体讨论过这个过程。现在我通过具体的前后端项目实例来进行梳理，目的是为了一次性弄清整个过程。本文主要是基于实例项目来讲解整个登录权限和前端路由控制权限是如何做的。1. 实现前后端登录认证本文中的前后端登陆验证是通过 token 认证机制来实现的，基于Koa 2.0的后台

2022-01-21 14:25:25 43966

llz0725的博客