前端开发
hzxOnlineOk
这个作者很懒,什么都没留下…
展开
-
【重排重绘】从输入url到浏览器展示页面发生了什么?
如果在本机上无法完成域名的解析,那么系统只能请求本地域名解析服务系统进行解析,本地域名系统一般都是本地区的域名服务器,比如你连接的校园网,那么域名解析系统就在你的校园机房里,如果你连接的是电信、移动或者联通的网络,那么本地域名解析服务器就在本地区,由各自的运营商来提供服务。第二次握手:服务器收到syn包,必须确认客户端的SYN(ack=j+1),同时自己也发送一个SYN包(seq=k),即SYN+ACK包,此时服务器进入SYN_RECV状态。原创 2023-02-17 11:17:45 · 492 阅读 · 0 评论 -
【前端优化】gzip压缩配置
当客户端请求到服务端的时候,服务器解析请求头,如果客户端支持gzip压缩,响应时对请求的资源进行压缩并返回给客户端,浏览器按照自己的方式解析,在http响应头,我们可以看到content-encoding:gzip,这是指服务端使用了gzip的压缩方式。前端压缩的方式很多,依赖java的有ant工具,前端自己打包压缩的有grunt,gulp,webpack,这些压缩也很重要,基本上能压缩50%以上,下面我们对压缩文件来个对比,如图所示,这是未压缩的。建议设置成大于1k的字节数,小于1k可能会越压越大。...转载 2022-08-29 11:49:48 · 2577 阅读 · 0 评论 -
前端 新工作入职前需处理的事项 入职新手包 入职注意事项
2)git(非tortoiseGit)及设置gitssh用户名、邮箱、windows密码凭证(防止每次Push弹出输入账号密码,自动设置会导致无法证常读取git用户账号密码问题,需要手动修改)、npm镜像源地址。(12)内部软件下载ftp或者公共目录或内网网址。(1)码云地址及仓库权限赋予(代码仓库)(7)需求产品平台(如神兵,招银WPS)(9)日常板(跟进汇报每日工作)(11)上线容器管理平台(大禹)(6)UI平台(如蓝湖、摹客)(5)vscode及插件下载。(8)bug平台(精益之星)......原创 2022-08-02 11:01:10 · 208 阅读 · 0 评论 -
记录解决老项目内存溢出处理方案
在环境变量中,新增NODE_OPTIONS,并设置如下值:方案二使用第三方插件帮我们设置:从项目的根位置运行:在package.json中添加:并运行:操作完以上步骤之后,可能会报错 在项目的的下面找到所有的文件,在ENDLOCAL语句的上边一行,修改改为 , 去掉双引号。这边的文件可能有200多个,一般项目是屏蔽搜索node_modules目录下的文件的,因此,我们需要全局搜索时,点击右侧的暂时不屏蔽被忽略的内容或者写一个脚本修改:............原创 2022-06-17 10:00:10 · 1782 阅读 · 0 评论 -
手写防抖与节流
概念介绍防抖:高频输入时,定时器时间间隔内将只执行一次函数,如果后续再次输入触发函数,将会重置这个定时间隔时间,并且延后触发例如:间隔为500ms,在第350ms的瞬间再次触发,那么最后打印防抖成功的时间大概是350ms+500ms=850ms节流:高频输入时,定时器时间间隔内将只执行一次函数,如果后续再次输入触发函数,将不会重置这个定时间隔时间, 会依照每个时间间隔执行一次,例如:间隔为500ms,在4秒内连续输入20个字符,触发20次函数,将只打印4s=4000ms,4000ms/.原创 2021-07-05 10:13:53 · 235 阅读 · 0 评论 -
Js获取屏幕宽度、高度 移动端H5适配
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeig转载 2021-04-22 15:06:06 · 3999 阅读 · 0 评论 -
阿里系 imgcook(图片厨师) 一键将设计稿(PSD等类型文件)生成指定类型(Vue React Flutter js 微信小程序 支付宝小程序等)代码(JS+CSS)
推荐一款工具,阿里系 imgcook(图片厨师) 一键将设计稿(PSD等类型文件)生成指定类型(Vue React Flutter js 微信小程序 支付宝小程序等)代码(JS+CSS)官网:https://imgcook.taobao.org/页面:https://imgcook.taobao.org/editor#/?id=59545...原创 2020-11-25 17:29:41 · 1369 阅读 · 0 评论 -
http的请求体body的几种数据格式
转自:https://blog.csdn.net/qq_41063141/article/details/1015059561、multipart/form-data以表单形式提交,主要是上传文件用它,在http中格式为2、application/x-www-from-urlencoded以键值对的数据格式提交,当action为post时,浏览器将form数据封装到httpbody中,然后发送server。这个格式不能提交文件...转载 2020-07-21 20:59:34 · 2764 阅读 · 0 评论 -
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景,需要让图片自适应容器的大小。1、img标签的方式我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。<div class='div1'> <img src="./peiqi.png" alt=""></div>.div1 { width:500px...转载 2020-04-22 12:19:40 · 297 阅读 · 0 评论 -
react 项目package.json更改启动端口
我使用的是roadhog来启动前段react服务,日常中我们经常会需要启动多个项目,端口会经常冲突,为了方便开发,这边我们要修改启动端口:将scripts中的start命令“roadhog server” 变更为 “set PORT=9000 && roadhog server”{ "private": true, "scripts": { "start"...原创 2020-03-23 12:04:51 · 3048 阅读 · 0 评论 -
js中的默认传参是怎样的
如下图,我们调用了方法a并传递了2个参数对象进去,但是方法a并没有声明形参,然而我们仍然可以通过arguments获取到我们传递的参数:原创 2020-01-21 16:56:52 · 649 阅读 · 0 评论 -
ES6 Object.is(param1, param2) 的使用
定义:方法判断两个值是否是相同的值。语法:Object.is(param1, param2)param1和param2可以是任何类型的值,不局限在对象object返回值:判断引用地址以及值是否都相同,返回boolean类型 true|falseObject.is('foo', 'foo'); // trueObject.is(window, window); // ...原创 2019-12-27 16:23:25 · 608 阅读 · 0 评论 -
引入一个js写的function函数报错 404 找不到wx_share.js这个资源的原因
先说结论:我们在打包(本地、开发、测试、生产打包)时,document.ejs入口文件引入的路径不会被webpack打包工具解析,而打包会使得文件结构会发生变化,从而导致相对文件路径引用地址出错!(如果是./在当前目录下一般不会错,因为打包后就是在同一个文件夹下,具体看你是否改动过打包文件结构了,默认是没问题的)过程:我用umi.js写了一个react 移动端h5页面,做微信分享...原创 2019-12-26 16:02:28 · 569 阅读 · 0 评论 -
移动端QQ浏览器默认发送2次img src请求图片资源 导致图片验证码与短信验证码接口所需参数不匹配
前阵子我碰到了个需求,实现开户功能开户需要手机号、图形验证码、短信验证码如下图:而图形验证码通过img标签的src属性去请求获取服务器图形验证码图片的用户如果想要点击获取验证码,就需要提供手机号、图形验证码对应的验证码字符串问题来了,测试提了个bug,第一次点击获取验证码后端总是报错!移动端的其他浏览器都很正常,不会出现这个情况,只有qq浏览器会发生这个情况,经过排查,...原创 2019-12-20 19:32:31 · 1260 阅读 · 0 评论 -
SourceTree/git解决pre-commit hook failed的问题
一、 git commit -m 'xxx' 出现问题今天在上传项目的时候在commit阶段遇到一个问题,无论是在Sourcetree上传还是用命令git commit -m 'xxx'都报了一下错误:husky > npm run -s precommit (node v8.12.0)husky > pre-commit hook failed (add --no-ver...转载 2019-12-18 13:51:07 · 850 阅读 · 0 评论 -
es10 es9 es8 es7 es6
ES10ES10仍然只是一个草案,但是可以先来了解一下~ES9对象的 rest/spread 属性rest 属性跟数组及函数中的 rest 运算符用法很类似,是用 ... 将剩余的属性放入一个对象中。Promise.prototype.finally()不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数。...转载 2019-12-16 17:13:27 · 182 阅读 · 0 评论 -
移动端项目中 @2x 图 和 @3x 图 的解决方案
设计师经常会提供给我们如:bg@2x.png、bg@3x.png这样的同样图片不同比例的图给前端我们知道,对于不同的移动设备而已,他们的dpr(devicePixelRatio)可能是1、2、3也可能带小数如果dpr与图片的比例相差太大,会造成图片失真(因为不同dpr在同样css像素下能展示的像素点不同)那么,在移动端,我们如何处理2x图和3x图呢?有以下2种写法:1、less...原创 2019-12-16 14:54:17 · 1436 阅读 · 0 评论 -
一步步从零开始用 Webpack 搭建一个大型项目(深度长文,万字教学)
开篇很多人都或多或少使用过 webpack,但是很少有人能够系统的学习 webpack 配置,遇到错误的时候就会一脸懵,不知道从哪查起?性能优化时也不知道能做什么,网上的优化教程是不是符合自己的项目?等一系列问题!本文从最基础配置一步步到一个完善的大型项目的过程。让你对 webpack 再也不会畏惧,让它真正成为你的得力助手!本文从下面几个课题来实现 课题 1:初探 webpac...转载 2019-12-12 13:16:29 · 557 阅读 · 0 评论 -
rem移动端适配时 pc端也要能够正常显示
rem移动端适配下可能会出现这种情况,即,由于移动端h5我们通过js设置了html的font-size会根据dpr(设备像素比)大小而自适应变化,但是pc端的font-size固定是12px这时就可能会出现pc端由于整个项目都是由rem作为单位的,移动端html的font-size都很大,在100px左右,而pc则是12px下面贴上移动端适配代码,此段代码放在index.html中:...原创 2019-12-12 09:58:37 · 789 阅读 · 0 评论 -
移动端h5软键盘压缩空间 按钮上移覆盖输入框怎么处理
正常情况下未输入时:输入时:我们发现了,ios机子上可以自动往上挪移,而android不行,因此,我们需要对android做兼容。怎样做才能让按钮不覆盖手机验证码输入框呢?我们可以为整个容器设置一个min-height最低高度,当软键盘出现占用空间时,当最小高度足够容纳除软键盘之外的所有页面元素时,按钮自然不会再上移覆盖掉输入框了,而是会出现滚动。.flex...原创 2019-12-12 09:15:50 · 992 阅读 · 0 评论 -
关于rem的计算的坑
如下图所示,我们需要做一个分割线,这是一个移动端h5的页面,需要做rem适配,分割线样式如下:.split_line { display: inline-block; width: 0.02rem; height: 0.4rem; margin-right: 0.16rem; background: #ebebeb;}宽度为0.02rem时,会出现时隐时现的情况!...原创 2019-12-10 11:00:49 · 237 阅读 · 0 评论 -
移动端rem适配 自我实践总结
通过js代码以及设备dpr,动态的改变html标签的font-size值,使得rem可以自适应改变大小。只需要在<head>标签里加上:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no...原创 2019-12-10 08:34:15 · 141 阅读 · 0 评论 -
react动态添加样式:style和className className不会被覆盖
react开发过程中,经常会需要动态向元素内添加样式style或className,那么应该如何动态添加呢???一、react向元素内,动态添加style例如:有一个DIV元素, 需要动态添加一个 display:block | none样式, 那么:<div style={{display: (index===this.state.currentIndex) ? "bloc...转载 2019-12-09 18:09:46 · 2083 阅读 · 0 评论 -
前端进阶:如何编写更优质的 JS 代码
以下文章来源于WecTeam,作者马雪琴WecTeam维C团(WecTeam)是京东社交电商部一群热爱技术、乐于分享的前端工程师自发成立的一个前端技术团队,希望通过技术实践总结、新技术探秘、Bug深度分析、优质英文资料引入、开源项目等方式,参与和推动前端技术的发展,为公司及行业带来价值! 原文地址:https://alligator.io/js/v8-engine/[1] ...转载 2019-11-23 22:19:48 · 268 阅读 · 0 评论 -
深度系统梳理前端性能优化
以下文章来源于政采云前端团队,作者ZooTeam政采云前端团队ZooTeam 带你一起探索前端开发的乐趣!前端相关技术沉淀、工程化建设、团队及职业成长分享,你想要的,我都有~???? 想要了解更多不掺水的原创,请戳上方蓝色字体:政采云前端团队关注我们吧~本文首发于政采云前端团队博客:为你重新系统梳理下, Web 体验优化中和图有关的那些事(万字长文)https://www....转载 2019-11-23 22:17:03 · 492 阅读 · 0 评论 -
高级进阶:深度揭秘 Promise 注册微任务和宏任务的执行过程
以下文章来源于WecTeam,作者深山蚂蚁WecTeam维C团(WecTeam)是京东社交电商部一群热爱技术、乐于分享的前端工程师自发成立的一个前端技术团队,希望通过技术实践总结、新技术探秘、Bug深度分析、优质英文资料引入、开源项目等方式,参与和推动前端技术的发展,为公司及行业带来价值!本文主要内容如下:•五段代码深入剖析 Promise 的注册微任务和代码执行过程•分析 ...转载 2019-11-23 21:42:15 · 348 阅读 · 0 评论 -
在工作中成长的几点经验,不再三年时间一年经验
经常看到有人在面试前夕说不知道这几年做了什么,感觉没什么好说的。这种状态其实并不好,很容易出现几年时间活干下来,除了把自己打造为一个 API 熟练工之外,很可能其他什么都不会。今天就来分享几点拙见,希望能帮助大家在平时工作中提升功力。遇到问题多问一个为什么写代码嘛,问题肯定时常遇到。网上一搜,复制粘贴问题解决。但是为什么能解决呢,这就不知道了。这种场景大家肯定遇到过。推荐大家下...转载 2019-11-23 21:37:10 · 222 阅读 · 0 评论 -
Array.prototype.slice.call() 讲解
在很多时候经常看到Array.prototype.slice.call()方法,比如Array.prototype.slice.call(arguments),下面讲一下其原理:1、基本讲解 1.在js里Array是一个类 slice是此类里的一个方法 ,那么使用此方法应该Array.prototype.slice这么去用 slice从字面上的意思很容易理解就是截取(当然你不是英肓的...转载 2019-11-21 17:01:55 · 177 阅读 · 0 评论 -
前端面试时,必须要懂的一些知识
一、理解vue2.0、vue3.0双向数据绑定的原理,并且写出demovue2.0Object.defineProperty作为观察者<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head>...原创 2019-11-21 11:30:57 · 129 阅读 · 0 评论 -
JSON.stringify 你不知道的用法
JSON.stringify()这个 API 想必大家都用过,可以帮助我们将数据解析成字符串类型,如下是个例子:const obj = { name: 'foo', level: 'low', age: '100', money: 'empty'}JSON.stringify(obj)// "{"name":"foo","level":"low","age":"100...转载 2019-11-20 10:08:25 · 217 阅读 · 0 评论 -
前端实现在线预览pdf、word、xls、ppt等文件
1、前端实现pdf文件在线预览功能方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览<a href="文档地址"></a>方式二、通过jquery插件jquery.media.js实现这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型...转载 2019-11-19 16:15:58 · 2229 阅读 · 0 评论 -
前端将node服务放到服务器上使用pm2托管启动服务
首先,我们需要先把项目文件压缩并且拷贝到服务器上 (ps: 上传到服务器的文件夹是需要压缩的)ls // 查看当前目录cd vue_demo // 进入某个文件夹下ls // 再次查看,发现有node_modules、package.json 文件夹和文件tar -cvf node_modules.tar node_modules/ // 这里使用tar压缩软件,需安装;意思...原创 2019-10-31 15:39:14 · 600 阅读 · 0 评论 -
关于sourcetree git flow的整体流程
关于sourcetree git flow的整体流程:1.新建功能,会默认检出develop分支的代码,新建出一个在feature下的新分支,例如feature/test2.完成功能会默认合并到develop分支并且删除feature下的功能分支test3.如果要提测,选择建立一个新的发布版本,在release下,取名为1.0.1(即打上tag标签),提测时告知仓库地址+分支名rele...原创 2019-10-25 09:04:12 · 219 阅读 · 0 评论 -
umi 框架 引入的 antd 库样式没有生效
今天,想做一下umi的简单案例,熟悉一下umi框架当我下载了umi框架并且npm安装antd包,使用Form表单时,发现antd组件样式不生效,why?由于对umi不够了解,排查了config,还自己写了.babelrc,发现都不其效果最后,我仔细的看了一下.umirc文件,发现了如下配置项:// ref: https://umijs.org/config/expor...原创 2019-10-15 16:54:04 · 7090 阅读 · 2 评论 -
如何写好.babelrc?Babel的presets和plugins配置解析
什么是BabelThe compiler for writing next generation JavaScript.官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器。作为前端开发,由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年。Babel就因此而生,它可以让你放心使用大部分的JavaS...转载 2019-10-15 15:33:44 · 253 阅读 · 0 评论 -
字符编码笔记:ASCII,Unicode 和 UTF-8
转载自阮一峰博客笔记今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料。这个问题比我想象的复杂,午饭后一直看到晚上9点,才算初步搞清楚。下面就是我的笔记,主要用来整理自己的思路。我尽量写得通俗易懂,希望能对其他朋友有用。毕竟,字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点字符编码的知识。一、ASCII 码我们知道,计算机内部,...转载 2019-10-14 16:37:15 · 186 阅读 · 0 评论 -
React 知识点简介
写个文章,方便自己下次遗忘需要在层层嵌套的文件夹中寻找。。。几个重要概念理解模块与组件模块:理解: 向外提供特定(局部)功能的js程序, 一般就是一个js文件为什么: js代码更多更复杂作用: 复用js, 简化js的编写, 提高js运行效率组件:理解: 用来实现特定功能效果的代码集合(html/css/js)为什么: 一个界面原创 2017-09-28 14:51:49 · 545 阅读 · 0 评论 -
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 【Webpack错误】
当你在使用webpack过程中,碰到了如下错误:Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'分析原因:由于插件引入了,但是没有下载插件,如下:const path = require('path');const HtmlWebpackPlugin = require('html-we原创 2017-10-18 19:34:45 · 1918 阅读 · 0 评论 -
vue 刷新网页后vuex的state数据丢失的原因及解决办法
用vue写pc端项目,用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。2. 解决思路一种是state里的数据全部是通过请求来触发action或mutation来改变一种是将state里的数据保...转载 2019-02-22 11:58:21 · 2259 阅读 · 0 评论 -
antd 批量修改 FORM表单 却始终只获取到最后一个表单属性值
今天在前人的基础上搞一个批量修改,用的antd,由于前人是封装的单个Form表单,我在外部增加了个map循环遍历出多个表单,出现了个问题:无论选中哪些修改项,最后取值准备作为修改接口的json字段时,总是只能获取到最后一个表单的内容,Why?是闭包吗? 最后捣鼓了一下午,发现,NO,其实是因为我把数据存在了一个对象a里,后来我在map循环里,每次push一个a对象,而正确的做法是直接push m...原创 2019-03-01 23:29:47 · 1165 阅读 · 0 评论