前端
文章平均质量分 68
Mr_linjw
这个作者很懒,什么都没留下…
展开
-
浅谈vite之import.meta
import.meta原创 2024-08-06 16:20:10 · 1186 阅读 · 0 评论 -
clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
网页可见区域高:document.body.clientHeight网页正文全文高:document.body.scrollHeight网页可见区域高(包括边线的高):document.body.offsetHeight网页被卷去的高:document.body.scrollTop屏幕分辨率高:window.screen.height每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度转载 2022-03-04 09:50:00 · 233 阅读 · 0 评论 -
Promise.any()、Promise.all()、Promise.race()
共同点:1:接收promise数组参数2:所有promise都会执行不同点:Promise.any();有一个子实例成功就算成功,全部子实例失败才算失败;Promise.all();全部子实例的成功才算成功,一个子实例失败就算失败;Promise.race();rece是赛跑机制,看最先的promise子实例是成功还是失败,返回最先执行完的promise...原创 2021-09-14 11:09:10 · 399 阅读 · 2 评论 -
HTML干货云集
H5的新特性有哪些用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、searchHtml5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。结构性元素主要负责w...原创 2021-03-10 11:11:30 · 203 阅读 · 0 评论 -
webpack配置整理
通过定义配置文件进行复杂操作,文件名webpack.config.js一个配置文件的基本结构:entry,入口定义入口文件,默认文件./src/index.jsoutput,输出定义出口文件,默认文件./dist/main.jsresolve,解析路径映射,省略后缀名等module,模块定义不同loader,让webpack能够处理非JavaScript模块plugins,插件扩展webpack功能devServer,开发服务器用于配置webpack-dev-server选项原创 2021-03-09 16:18:02 · 176 阅读 · 0 评论 -
前端性能优化-图片懒加载(防抖、节流)
懒加载使用场景在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失。但是我们仔细想一下,用户真的需要我们显示所有图片一起展示吗?其实并不是,用户看到的只是浏览器可视区域的内容。所以从这个情况我们可以做一些优化,只显示用户可视区域内的图片,当用户触发滚动的瞬间再去请求显示给用户。懒加载的思路img 标签有自定义属性 data-src 首屏展示可视区域内的图片 src 值 替换为 data-src原创 2021-03-09 14:23:01 · 1317 阅读 · 1 评论 -
前端命名规范
项目命名全部采用小写方式, 以连字符'-'分隔。 例:my-project-name目录命名参照项目命名规则; 有复数结构时,要采用复数命名法。 例:scripts, styles, images, data-modelsJS文件命名参照项目命名规则。 例:account-model.jsCSS, SCSS, less文件命名参照项目命名规则。 例:retina-sprites.scssHTML文件命名参照项目命名规则。 例:error-report.html组件命名原创 2021-03-08 11:13:14 · 246 阅读 · 0 评论 -
JS防抖与节流(闭包)
日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为debounce(防抖)和throttle(节流)函数防抖当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。function debounce(fn, wait) {原创 2021-03-02 17:18:02 · 255 阅读 · 0 评论 -
JS-设计模式
单例模式:(只允许存在一个实例的模式)单例模式是javascript中最常用的模式,它是将自己的代码放在一个命名空间下,这样的好处是可以减少使用全局变量,在多人协同开发时也能避免命名冲突等问题。这样的好处是维护起来非常方便,如下例:var m = { name: 'dog', action: function() { console.log(this.name); }};m.action();//调用工厂模式:工厂模式是我们最常用的实例化对象模.原创 2021-03-02 17:05:20 · 114 阅读 · 0 评论 -
ES6 使用小计
一、letES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。为什么需要块级作用域?ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景,内层变量可能会覆盖外层变量。var tmp = new Date();function f() { console.log(tmp); if (false) { var tmp = 'hello world'; }}f();原创 2021-02-22 17:03:35 · 150 阅读 · 0 评论 -
JS深拷贝
一、首先看一下乞丐版的深拷贝吧!JSON.stringify()以及JSON.parse() var obj1 = { a: 1, b: 2, c: 3}var objString = JSON.stringify(obj1);var obj2 = JSON.parse(objString);obj2.a = 5;console.log(obj1.a); // 1console.log(obj2.a); // 5可以看到没有发生引用问题,修改obj2的数据,并原创 2021-02-22 11:02:32 · 1529 阅读 · 0 评论 -
JS定义const常量对象
ES6中新增const关键字,用于声明创建一个只读引用。但其只是规定变量的标识符不能重新分配,例如声明变量是引用类型,则不可变的只是变量绑定的指针(JS不存在这个概念,指变量的值是栈中存放的内存地址,访问时会自动寻址找到堆中存放的对象),而对象的属性可以任意改变。 const o = { a: 1 } const a = [2, 3, 4] o.b = 2 // 可扩展 o.c = 4 delete o.c // 可删除..原创 2021-02-22 10:54:03 · 1547 阅读 · 0 评论 -
页面渲染html的过程
浏览器渲染页面的一般过程:1.浏览器解析html源码,然后创建一个 DOM树。并行请求 css/image/js在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement,对应的是html标签。2.浏览器解析CSS代码,计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置 < 用户设置 < 外链样式 < 内联样原创 2021-01-22 15:28:46 · 445 阅读 · 1 评论 -
npm升级package如何对应的更新package.json中的版本号
直接用npm update 方法更新,但是更新后发现package.json中对应的版本号并没有改变,于是查阅了一些资料和文章,借助npm-check-updates工具可以很方便的将package.json中的依赖包版本号更新为最新版本,下面介绍下该工具的使用,1:安装npm install npm-check-updates -gnpm install npm-check-g...原创 2020-03-12 11:47:13 · 2347 阅读 · 0 评论 -
vue前端缓存问题解决方案
问题描述大家用vue脚手架搭建前端工程时,常被缓存问题所困扰,具体的表现就是,当程序版本升级时,用户因为缓存访问的还是老的页面,然后很多同学很暴力的直接在index.html中加入了这几行代码:<meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache">...转载 2019-10-30 09:36:44 · 14552 阅读 · 2 评论 -
实用资源库和工具
JavaScript 库Particles.js - 一个用于在网页上创建漂亮的浮动粒子的 JS 库;地址:http://vincentgarreau.com/particles.js/Three.js - 用于在网页上创建 3D 物体与空间的 JS 库;地址:https://threejs.org/Fullpage.js转载 2018-01-22 17:40:21 · 1715 阅读 · 1 评论 -
HTML5新特性之语义化布局标签,摆脱传统div布局
前言曾几何时,前端的页面布局一直采用div,但是div本身并没有实际的意义,它只是定义了一个区域,而且这个区域是做什么的浏览器并不知道,不利于页面的SEO优化。因此HTML5中新增的语义化标签就很好的解决了这个问题,当然它还有其他一些好处,接下来我们就一起来看看吧。HTML5语义化标签的优点即使在没有CSS的支持下,浏览器依然能呈现出良好的内容结构。有利于S转载 2018-01-22 17:41:06 · 3721 阅读 · 0 评论 -
移动web开发问题和优化小结
目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大家有遇到什么别的坑,转载 2018-01-22 17:42:04 · 294 阅读 · 0 评论 -
详细解说——webpack增量打包多页应用
一,webpack打包存在的问题webpack的打包顺序:1,找到入口文件2,根据入口文件,找出具有依赖关系的文件js/css3,最后,把css/js全部打包成一个js包好的,打包完成,打包了整个世界,那么问题来了:产品说:按钮颜色不对,给我改成#ccc技术:好的,这就改。然后就有了如下流程:1,找到了entry -> js -> componet ->原创 2018-01-25 09:35:23 · 4027 阅读 · 1 评论 -
移动H5开发小计
1、border-radius Android上圆角不圆问题安卓部分低版本系统,不支持百分比(50%)的写法,把圆角改成比宽高远远要大的一个值就好了,并且快高度最好使用px,要不rem出现奇数可能也会导致不圆.div{ background-color: #f1464a; width:4px; height:4px; border-radius:...原创 2018-12-06 17:43:55 · 186 阅读 · 0 评论 -
前端面试最全知识点
一.html & js & css1.AMD和CMD是什么?它们的区别有哪些?AMD和CMD是二种模块定义规范。现在都使用模块化编程,AMD,异步模块定义;CMD,通用模块定义。AMD依赖前置,CMD依赖就近。CMD的API职责单一,没有全局require,AMD的一个API可以多用。2.web开发常见的漏洞。XSS(跨站脚本攻击):其原理是攻击者向有XSS漏洞...转载 2018-12-06 17:49:16 · 521 阅读 · 0 评论 -
微信IOS6.7.4版本在输入框弹出键盘后,页面没恢复
ios中,键盘的弹起,页面会往上挪动,使输入框展示在页面中间,键盘隐藏页面会下挪恢复原状在6.7.4版本中,不会回挪,这将导致有相对定位(fixed,absolute:相对于浏览器窗体)的节点发生位移,导致节点点击事件偏移而无法选中解决方案:输入框失去焦点(即键盘隐藏时),手动调整页面,document.activeElement.scrollIntoViewIfNeeded(true)...原创 2018-12-17 16:07:08 · 3784 阅读 · 1 评论 -
关于http转换https跳的坑
绝望啊.....https里所有请求都需要https,包括1:head头部所有script、style链接都需要https2:所有ajax请求都需要https,使用http会发生跨域请求原创 2019-04-09 09:58:24 · 1231 阅读 · 0 评论 -
Link 标签的预加载机制
rel 预处理类link预处理类link标签就是允许我们控制浏览器,提前针对一些资源去做这些操作,以提高性能列举link类型:dns-prefetch 型link提前对一个域名做dns查询,这样的link里面的href实际上只有域名有意义 preconnect型link 提前对一个服务器建立tcp链接 prefetch型link提前取href指定的url的内容 preload型lin...原创 2019-07-11 11:31:49 · 1395 阅读 · 0 评论 -
web前端布局css常用初始化,收藏起来开箱即用!
/* 禁用iPhone中Safari的字号自动调整 */*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;转载 2018-01-22 17:38:53 · 423 阅读 · 0 评论