前端杂项
文章平均质量分 56
张兴华(MarsXH.Chang)
行动是治愈恐惧的良药,犹豫拖延将不断滋生恐惧!
展开
-
Hiper:一款令人愉悦的性能分析工具
如上图,是hiper工具的测试结果,从中我们可以看到DNS查询耗时、TCP连接耗时、第一个Byte到达浏览器的用时、页面下载耗时、DOM Ready之后又继续下载资源的耗时、白屏时间、DOM Ready 耗时、页面加载总耗时。这段用法示例,我直接拷贝的文档说明,具体的可以看下文档,。当我们项目打开速度慢时,这个工具可以帮助我们快速定位出到底在哪一步影响的页面加载的速度。平时我们查看性能的方式,是在performance和network中看数据,记录下几个关键的性能指标,然后刷新几次再看这些性能指标。原创 2023-03-30 15:59:27 · 393 阅读 · 0 评论 -
webpack5升级踩坑(process、Buffer is not defined)
执行提示@types/node 版本和ts版本问题,https://www.npmjs.com/package/@types/node?activeTab=versions 可查看版本对应的ts版本。原创 2023-03-30 15:55:46 · 1057 阅读 · 0 评论 -
前端面试手写题汇总大全(含答案)-- 持续更新
前端面试手写题汇总大全(含答案)-- 持续更新原创 2022-12-19 16:29:15 · 3962 阅读 · 1 评论 -
Webpack 原理总结归纳面试
Webpack 是一个 模块打包器,可以分析各个模块的依赖关系,最终打包成静态文件(js、css、jpg)。三大阶段:初始化:启动构建,读取与合并配置参数,加载plugin,实例化Compiler编译:从Entry出发,针对每个Module串行调用对应的Loader去翻译文件中的内容,再找到该Module依赖的Module,递归的进行编译处理输出:将编译后的Module组合成Chunk,将Chunk转换成文件,输出到文件系统中细节:Webpack CLI 通过 yargs模块解析 CLI原创 2022-03-11 16:00:41 · 1671 阅读 · 0 评论 -
企业 npm 私库 Verdaccio(5.x) 设置 Https 访问
搭建方案:引入官方 npm 包搭建:建立项目,写入 package.json 文件以引入官方 npm 包:{ "name": "npm", "version": "1.0.0", "scripts": { "dev": "verdaccio --listen 4873 --config ./config-dev.yaml", "server": "cross-env VERDACCIO_PUBLIC_URL=https://npmtest.test.cn verdacc原创 2021-08-28 10:26:44 · 1342 阅读 · 0 评论 -
Vue 中使用 Websocket Demo
首先需要后端提供类似于如下的 websocket path:// ws://{host}/{path}// eg:private websocketPath: string = 'ws://t.bsapi.xxx.com/xxx-service/webSocket/user1';然后在组件中创建 websocket:全局就在 App.vue 中即可<script lang="ts">import { Component, Vue } from 'vue-property-de原创 2021-07-05 16:09:27 · 661 阅读 · 0 评论 -
TS 报错 Could not find a declaration file for module
有的npm包使用原生js没问题,换ts后某些包会报“Could not find a declaration file for module”的错误。有以下两种方式解决1、下载 @type/报错包(部分包开发者可能没有上传自己的.d.ts代码到npm分支,这时会报错说找不到这个包,别急看下一步)2、最直接简单有效的解决方法:项目根目录下新建shims-vue.d.ts文件//declare声明宣告, 声明一个ambient module(即:没有内部实现的 module声明) declare .原创 2021-07-05 16:04:51 · 19164 阅读 · 1 评论 -
i18n 中如何传递参数
首先在 i18n 对应语言文件中配置可传参数:src/locales/lang/en/component/table.tsexport default { index: 'Index', total: 'total of {total}',};然后页面中引入 i18n,并使用import { useI18n } from '/@/hooks/web/useI18n';const { t } = useI18n();t('component.table.total', { .原创 2021-05-15 17:07:36 · 3666 阅读 · 0 评论 -
MAC M1 芯片在 yarn install 时报错:The CPU architecture “arm64“
新公司新电脑,最强 M1 芯片 MAC,兴高采烈装环境:nvm、node、yarn…然鹅,yarn install 装包时给了我重头一击…背景首先我用下面命令安装了 nvm:curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.38.0/install.sh | bash然后用 nvm 安装了 node,然后用下面命令安装了 yarncurl -o- -L https://yarnpkg.com/install.sh |.原创 2021-04-15 14:31:23 · 2693 阅读 · 0 评论 -
全栈运维之 Docker 部署前后端
前期提要:本文案例中使用到的设备Windows 8 笔电一台阿里云 ECS 服务器一台本文案例中使用到的工具VS CodeMongoDB Compass本文案例中项目技术栈FrontEnd: Vue + NuxtBackEnd: Node + ExpressDataBase: Mongo1. 项目配置首先要有一个项目,本例中项目技术栈见 “前情提...原创 2020-03-25 15:31:44 · 818 阅读 · 0 评论 -
Hello World ! 节日快乐!
节日快乐!世界你好,Hello WorldJavapublic class HelloWorld{ public static void main(String[] args) { System.out.println("Hello World"); }}Python# 2.0print "Hello World"# 3.0p...原创 2019-10-24 13:38:21 · 372 阅读 · 0 评论 -
前端面试题汇总大全(含答案)-- 持续更新
汇总了一些前端常见的面试题。一、HTML 篇1. 简述一下你对 HTML 语义化的理解?用正确的标签做正确的事情。html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO;使阅读源代码的人对网站更容易将网站...原创 2019-08-07 14:10:29 · 177558 阅读 · 26 评论 -
Firefox前端控制台报错 let is a reserved identifier
今天有一台机器登录不了web系统,调试发现控制台报错`let is a reserved identifier`原因是机器上的Firefox 版本为2015年的 38.0版,不支持ES2015规范中的 let 关键字,所以尝试安装了最新版的 Firefox(67.0版),最后得以解决。...原创 2019-06-11 14:35:17 · 2506 阅读 · 2 评论 -
键盘码整理
keycode 8 = BackSpace BackSpacekeycode 9 = Tab Tabkeycode 12 = Clearkeycode 13 = Enterkeycode 16 = Shift_Lkeycode 17 = Control_Lkeycode 18 = Alt_Lkeycode 19 = Pausekeycode 20 = Caps_Lockkeyc...原创 2019-05-22 10:32:53 · 356 阅读 · 0 评论 -
前端常见跨域解决方案(全)
前端常见跨域解决方案(全)什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: 、什么是同源策略?同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受...转载 2018-10-31 10:28:20 · 453 阅读 · 0 评论 -
Nw.js入门文档
图片太多,带图片的文档可以去我的csdn下载找到。目录技术介绍 4技术介绍 41 开发环境搭建及开发工具 51.1开发环境搭建 51.2 开发工具介绍 72 项目结构及配置文件 82.1 项目目录结构 82.2 配置文件 93 生成exe及跨平台打包 143.1 Hello Word 143.2 生成exe文件 153.3 跨平台打包 174 常...原创 2018-10-31 10:28:43 · 6141 阅读 · 2 评论 -
npm设置和取消代理的方法
设置代理npm config set proxy=http://127.0.0.1:8087npm config set registry=http://registry.npmjs.org关于https 经过上面设置使用了http开头的源,因此不需要设https_proxy了,否则还要增加一句:npm config set https-proxy http://server:po...原创 2018-07-17 16:47:38 · 1496 阅读 · 0 评论 -
安利-在线图片优化器
最近在项目上,有些图片实在太大,导致加载缓慢,于是想到进行无损图片压缩,然后找到了连个很好的在线图片优化器,基本都是无损的喔,而且平均压缩率都能达到50%以上。第一个:Optimizilla 这个在线图像优化器使用最佳优化和压缩算法来达到最小尺寸的JPEG和PNG图像,同时保证最佳质量/尺...原创 2018-04-26 11:49:01 · 1109 阅读 · 0 评论