- 博客(593)
- 资源 (3)
- 问答 (1)
- 收藏
- 关注
RSS订阅转载 浏览器原理及渲染引擎解析网页的过程、JavaScript 引擎解析 JavaScript 代码的过程
浏览器：是安装在电脑里面的一个软件，能够将页面内容渲染出来呈现给用户查看，并让用户与网页进行交互。服务器其实就是性能比较高的计算机，这些计算机 24 小时不断电、 不关机。开发者在本地开发出 HTML 网页文件、CSS 样式文件、JS 脚本程序等，然后上传给服务器进行存储和共享，用户就可以访问到这些资源了。例如；
2024-05-23 11:33:22
4
转载 JS性能优化策略
JS 是一门弱类型语言，拥有独特的原型链机制，在宿主中的拥有一套 DOM、BOM 操作接口，增加其性能控制的复杂性。JavaScript 主要应用场景依然围绕浏览器展开，所以，它在浏览器中的行为表现依然重要。本篇将从笔者的实践经验出发，分别从加载解析、语法优化、DOM 操作等各方面归纳总结优秀的 JS 代码性能优化策略。与此同时，关注如何编写更优雅干净的 JS 代码。
2024-05-23 10:02:52
6
原创 Webpack5高级优化：5、优化代码运行性能
但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新了。当我们修改 math.js 文件再重新打包的时候，因为 contenthash 原因，math.js 文件 hash 值发生了变化（这是正常的）。所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。所有文件 hash 值是独享且不同的。
2024-05-19 10:35:56
554
原创 Webpack5高级优化：4、减少代码体积
如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！你可以将这些辅助代码作为一个独立模块，来避免重复引入。默认情况下会被添加到每一个需要它的文件中。我们可以对图片进行压缩，减少图片体积。
2024-05-19 10:19:25
228
原创 Webpack5高级优化：3、提升打包构建速度
所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。我们目前打包的内容都很少，所以因为启动进程开销原因，使用多进程打包实际上会显著的让我们打包时间变得很长。开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。我们启动进程的数量就是我们 CPU 的核数。
2024-05-19 10:11:47
594
原创 Webpack5高级优化：2、提升开发体验
它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。
2024-05-19 10:03:48
218
原创 Webpack5高级优化：1、介绍
所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~主要介绍 Webpack 高级配置。
2024-05-19 10:00:39
65
原创 React中高阶组件
高阶组件：高阶组件就是一个接收一个组件并返回另外一个新组件的函数。普通组件：MyComponent.tsx。高阶组件：Hoc.tsc。使用：App.tsx。
2024-05-15 23:20:49
89
原创 html特殊字符的html，js，css写法汇总
⇠箭头类符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ ⇠ \u21E0 \21E0 ⇢ ⇢ \u21E2 \21E2 ⇡ ⇡ \u21E1 \21E1 ⇣ ⇣ \u21E3 \21E3 ↞ ↞ \u219
2024-05-14 20:53:11
904
原创 css伪元素::before和::after用法详解
CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。::before和::after下特有的content，用于在css渲染中向元素头部或尾部添加内容。这些添加不会出现在实际DOM结构中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用::before或::after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。上面所列特殊字符的html，js和css的写法是不同的，具体可查看html特殊字符的html，js，css写法汇总。
2024-05-14 20:49:13
797
原创 css布局方式总结
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
2024-05-14 14:30:19
735
原创 解决TS报错：Property ‘style‘ does not exist on type ‘Element‘
在使用queryselector获取一个dom元素，编译时却报错说Property 'style' does not exist on type 'Element'。原因：这是typescript的类型检查导致的，需要在querySelector方法前面加个类型断言。
2024-05-12 21:24:16
177
原创 create-react-app完整配置别名alias方法
在使用 create-react-app 创建的项目中配置路径别名，可以使用 react-app-rewired 这个库来覆盖 create-react-app 的默认配置。这样，@components/SomeComponent 就会被解析为 src/components/SomeComponent 文件。在项目根目录中创建一个 config-overrides.js 文件，用于自定义配置。
2024-05-09 21:40:44
293
原创 React常用组件分享
React Awesome SliderReact Slider Carousel Component - react-awesome-slider
2024-05-06 22:15:42
425
原创 centos7中检查内存方法
htop是top的一个增强版，提供了更友好的界面和更多的功能。如果你安装了htop，你也可以使用它来查看内存使用情况。根据你的需求，你可以选择最适合你的方法。在top界面中，你可以看到内存使用的相关统计信息，如%Mem行会显示内存的使用百分比。在CentOS 7中，你可以使用多种方法来检查内存使用情况。你也可以直接查看/proc/meminfo文件来获取详细的内存使用信息。top命令提供了一个实时的系统监控界面，包括内存使用情况。free命令是最常用的查看内存使用情况的工具之一。1. 使用free命令。
2024-04-22 15:22:05
327
原创 Kubernetes JSONpath如何使用？
你可以使用 JSONPath 表达式来组合多个字段，并自定义输出格式。这条命令将返回 Pod 名称和 IP 地址，它们之间用制表符（\t）分隔，每个 Pod 的信息占一行。
2024-04-21 11:00:27
381
原创 在不能升级版本的情况下，解决k8s证书到期且续约只有1年的问题
Not Before 指证书有效开始时间，Not After 指证书有效截至时间，如果 Not After 小于当前时间，说明证书已经过期，且没有自动轮换，需要手动干预解决。5.执行以下命令，所有master节点使用更新后的 admin.conf 替换 /root/.kube/config 文件，出现提示时，输入 y 后回车；6.master节点执行以下命令，查看 k8s 组件证书更新情况，RESIDUAL TIME 为 y 则标识证书已更新，且有效期10年；
2024-04-18 22:49:13
524
原创 k8s实践总结
这是最直接的方法。你可以通过kubectl命令行工具删除Pod，然后Kubernetes将基于其对应的Deployment、ReplicaSet或其他控制器自动重新创建它。确保你知道Pod所属的Deployment或其他控制器，因为这将触发控制器重新创建Pod。如果你只删除了Pod而没有对应的控制器来重新创建它，那么Pod将不会自动恢复。
2024-04-15 23:18:37
1448
1
原创 Centos7环境下安装MySQL8详细教程
将里面的命令都删除掉，然后添加以下命令，保存并退出(如果有一定经验，可以在里面添加一些其他的配置)创建用户(-s /bin/false参数指定mysql用户仅拥有所有权，而没有登录权限)此时不要担心，重新给mysql安装目录赋予一下权限后，再次执行。我们切换到usr/local/目录下查看mysql是否存在。按照习惯，我们将文件移动到/usr/local目录下。进入mysql.server服务目录下并启动服务。安装mysql，并记住初始化随机密码。执行后，输入我们初始化时记录下的。
2024-04-02 22:04:12
2035
原创 CentOS7 磁盘相关的命令及磁盘重新调整分配
在CentOS 7中，umount是一个常用的命令，用于卸载文件系统。以下是一些常用的umount命令：其中，/dev/sdXN是你想要卸载的分区。例如，/dev/sda1。umount -a这将卸载当前用户有权限访问的所有挂载点。使用-f选项可以强制卸载文件系统，即使有文件正在使用。使用-l选项可以懒卸载文件系统，即使有文件正在使用，它会在所有文件都关闭后自动卸载。-v选项会输出卸载操作的详细信息，有助于调试。使用-q选项可以在文件系统不存在时安静退出，不会报错。
2024-03-31 16:05:36
1036
原创 CentOS 7查看磁盘空间
以上三种方法都可以查看CentOS的硬盘大小，对于服务器管理来说非常有用。在使用这些命令时，需要注意用户权限和输出格式，以便更好地实现服务器管理。
2024-03-31 15:07:55
1011
原创 k8s排错指南
查看node状态→查看pod状态→查看service流量是否路由到pod→查看ingress配置是否正确→查看kubelet系统日志。
2024-03-12 16:14:17
684
原创 Ubuntu上安装任意版本nodejs方法
在Ubuntu中安装指定版本的Node.js，可以使用Node Version Manager (NVM)。以下是安装步骤：首先，安装NVM。这个命令会下载并运行NVM的安装脚本。使用NVM安装指定版本的Node.js。node -v这个命令应该会显示你刚刚安装的Node.js版本号。
2024-03-08 16:46:28
841
原创 玩转k8s：kubectl命令中的简写
certificatesigningrequests (缩写 csr)persistentvolumeclaims (缩写 pvc)poddisruptionbudgets (缩写 pdb)networkpolicies (缩写 netpol)persistentvolumes (缩写 pv)limitranges (缩写 limits)statefulsets (缩写 sts)configmaps (缩写 cm)daemonsets (缩写 ds)ingresses (缩写 ing)
2024-02-20 15:20:16
456
1
原创 玩转k8s：yaml介绍
详解k8s中的port：●portport 是 k8s 集群内部访问service的端口，即通过 clusterIP: port 可以从 Pod 所在的 Node 上访问到 service●nodePortnodePort 是外部访问 k8s 集群中 service 的端口，通过 nodeIP: nodePort 可以从外部访问到某个 service。
2024-01-24 22:28:28
719
原创 Webpack5高级优化：5、优化代码运行性能
打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。
2024-01-20 22:35:37
970
原创 Webpack5高级优化：4、减少代码体积
如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！默认情况下会被添加到每一个需要它的文件中。这样将整个库都打包进来，体积就太大了。我们可以对图片进行压缩，减少图片体积。并且使所有辅助代码从这里引用。
2024-01-20 22:33:51
399
原创 Webpack5高级优化：3、提升打包构建速度
开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。
2024-01-20 22:25:14
624
原创 Webpack5高级优化：2、提升开发体验
所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。
2024-01-20 22:18:05
619
原创 Webpack5原理：2、Plugin 原理
钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子）。开发插件，离不开这些钩子。
2024-01-20 21:50:25
1121
将Google Analytics(分析)添加到Android 应用实例
2018-03-25
用百度WebUploader文件上传插件上传文件时能在前端对文件进行加密后再上传吗？
2019-10-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人