![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 66
yggjdle
前端工程师在职
展开
-
详解获取url各个部分的方法
window.location.protocol:获取或设置 URL 的协议部分(例如,http:、https:)。window.location.hash:获取或设置 URL 的片段标识符部分(以 # 开头的锚点部分)。window.location.hostname:获取或设置 URL 的主机名部分(不包括端口号)。window.location.host:获取或设置 URL 的主机部分(包括域名和端口号)。window.location.port:获取或设置 URL 的端口号部分。原创 2023-12-02 14:26:03 · 901 阅读 · 0 评论 -
移动端h5页面自适应
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。在做h5项目的时候,不同的手机型号和屏幕的大小,有时候会产生不同的效果,但是也不能为了每一个手机重新写一个代码,所以在编写整个项目之前,可以做一些处理,让页面可以根据不同的型号进行屏幕的自适应。方法一:meta viewport。方法三:@media。原创 2023-01-30 15:09:30 · 2716 阅读 · 0 评论 -
前端灰度发布(定义 优点 原理 方式)
1. 什么是灰度发布?灰度发布,又被称之为金丝雀发布,是指某次新发布功能特性和旧功能特性之间能够以平滑过渡的方式呈现给用户,就像金丝雀的羽毛一样多种颜色平滑渐变。举个例子,某个已上线处于运行中的系统需要一次新的功能迭代,但是由于功能变动较大,所以发布需要考虑用户的使用反馈以及代码可能存在一些未知的异常,这时候则需要将新的功能逐步地一批一批的推送给用户。在这个逐步放量的过程中,可以根据用户接受度(用户投诉多不多)和观察本次功能是否存在上线前未发现的异常,来决定是否继续发布推送新功能,如果新功能反馈较差原创 2023-01-30 14:16:36 · 1167 阅读 · 0 评论 -
怎样禁止app端h5缩放(ios 安卓都适用)
在app端嵌入h5页面的时候,原生的select组件在选择时会自动缩放页面,在选中之后不会复原,为了解决这个问题,我就禁止了h5的缩放原创 2022-12-07 19:42:44 · 600 阅读 · 0 评论 -
详解CSS层叠上下文(解析z-index不生效的原因)
(1) html中的根元素本身就是层叠上下文,成为根层叠上下文(2)position属性为非static值并设置z-index属性为具体数值(3)一些CSS3属性也能产生层叠上下文原创 2022-12-07 17:44:36 · 1177 阅读 · 0 评论 -
前端开发中的优化方法总结(持续更新中)
工作了一段时间之后,发现不是完成一个功能能用就可以的,还需要考虑用户体验的问题。下面我会总结一些开发中常用的优化方法 还有一些比较好的文章,欢迎补充。这篇文章是从比较宏观的维度进行一个分析,可以浏览一下前端如何提升To B产品用户体验原创 2022-12-07 17:31:40 · 234 阅读 · 0 评论 -
前端开发中的缓存问题
比如说前端更新了代码,单独的h5页面还好,如果说是vue或者react项目打包出来新的js css文件,更新上线之后,有的用户可能存在缓存,还是之前的页面,就会存在白屏找不到之前页面的情况,说动清除缓存之后就可以。有时候浏览器或者手机app会将网页或者app中的数据进行缓存,可以很大程度上做到优化,比如说网络比较卡的时候,如果有缓存的数据,就可以优化用户的体验。但是缓存也会带来一些问题。原创 2022-10-18 16:38:43 · 892 阅读 · 0 评论 -
不要小看get post的区别
而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。GET请求在url中传递的参数是有长度限制的(在HTTP协议中并没有对URL的长度进行限制,限制是特定的浏览器以及服务器对他的限制,不同浏览器限制的长度不同。),POST对长度没有限制。GET请求比POST请求更不安全,因为参数直接暴露在URL中,所以,GET请求不能用来传递敏感信息。GET请求参数会完整的保留在浏览器的历史记录中,POST请求的参数不会保留。原创 2022-10-18 14:51:51 · 855 阅读 · 0 评论 -
ios的时间问题(出现nan 但是安卓正常显示)
对于00:00:00和24:00:00这两个时间临界值, ios会转成NAN。时间格式为YYYY/MM,在iOS 用new Date转化之后也会变成NAN。将日期补全后可以成功。原创 2022-10-17 14:37:49 · 329 阅读 · 0 评论 -
Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)
JS各种时间类型的转换原创 2022-08-31 11:57:29 · 40323 阅读 · 1 评论 -
vue3练习 el-table和echarts联动 完成数据的增删改查
vue3练习原创 2022-08-08 17:18:25 · 663 阅读 · 0 评论 -
前端面试JS自检(一)数据类型 先看问题 自己自述一遍 不会再看答案 )
推荐大家的使用本篇文章的方式:先看问题自己会不会,如果会的话,要自己说一遍,组织好语言。一. 数据类型1. JS数据类型的种类总共7钟。Undefined 未定义表示变量不含有任何值,是未定义的状态。NULL 空Boolean 布尔值Number 数字String 字符串Object 对象分三个子类型 object、array、functionSymbol 符号 (es6新加)类型:分为两种,基本数据类型(number boolean str.原创 2022-06-14 21:37:31 · 135 阅读 · 0 评论 -
前端面试CSS自检(下)页面布局、定位与浮动和场景应用(先看问题 自己自述一遍 不会再看答案 )
CSS面试原创 2022-06-09 16:40:50 · 282 阅读 · 0 评论 -
前端面试CSS自检(上)CSS基础(先看问题 自己自述一遍 不会再看答案 )
推荐大家的使用本篇文章的方式:先看问题自己会不会,如果会的话,要自己说一遍,组织好语言。原创 2022-06-02 09:22:44 · 331 阅读 · 0 评论 -
前端面试html自检(先看问题 自己自述一遍 不会再看答案 )
推荐大家的使用本篇文章的方式,先看问题自己会不会,如果会的话,要自己说一遍,组织好语言。原创 2022-05-26 22:03:37 · 663 阅读 · 0 评论 -
前端图片格式详解
图片格式:jpg(jpeg)支持的颜色比较丰富,不支持透明效果,不支持动图一般用来显示照片gif支持的颜色比较少,支持简单透明。支持动图颜色单一的图片,动图png支持的颜色丰富,支持复杂透明,不支持动图颜色丰富,复杂透明图片,专为网页而生webp是谷歌推出的专门用来表示网页中图片的一种格式具备其他图片格式的所有优点,而且文件还特别的小缺点:兼容性不好base64将图片使用base64,这样可以将图片转换为字符,通过字符的形式来引入图片一般都是一些需要和网页原创 2022-04-01 10:49:39 · 301 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(十一)常用指令 v-model v-text v-html等的总结
常用指令总结原创 2021-12-10 09:17:01 · 694 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(十)Vue如何监测数据改变
Vue如何监测数据变化原创 2021-12-08 19:04:12 · 348 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(九)条件渲染(v-show v-if)列表渲染(v-for)
本节内容:条件渲染列表渲染.原创 2021-12-07 10:39:53 · 250 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(八)class style绑定
在编写网页的过长中,为了美化界面,样式是不可缺少的,所以怎样将class和style进行绑定也是必须的。使用v-bind就可以将class和style进行绑定。有多种方式可以进行绑定。对于class来说,有三种写法:class=“xxx” xxx可以是字符串、对象、数组。1)字符串写法适用于:类名不确定,要动态获取。2)对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。3)数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。对于style样式来说,有两种写法:1)原创 2021-12-05 22:09:43 · 306 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(七)计算属性和侦听属性
本节内容:计算属性侦听属性二者的对比原创 2021-12-05 13:38:51 · 430 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(五)数据代理
本节内容:Object.defineProperty()1. Object.defineProperty()2. Vue数据代理原理原创 2021-12-02 12:46:48 · 472 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(四)el和data的两种写法
el和data的两种写法,以及注意事项原创 2021-11-29 23:11:28 · 688 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(三)模板语法 + 数据绑定
本节内容: 1. 插值语法 2. 指令语法 3. 数据绑定原创 2021-11-29 17:19:37 · 229 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(二)第一个Vue的简单案例
本节内容: 1. 关于图标 2. 创建Vue实例 3. Vue开发者工具的使用原创 2021-11-29 08:37:06 · 458 阅读 · 0 评论 -
Vue2 + Vue3学习笔记(一)Vue学习开始的准备工作
本节内容:1. Vue是什么2. Vue的特点3. 学习Vue前,需要掌握的JS基础知识4. 搭建Vue开始环境原创 2021-11-28 12:43:55 · 377 阅读 · 0 评论 -
怎样拥有一个专属于自己的网站?
总体流程:1. 服务器的准备 2. 购买域名(先准备好服务器,再进行域名的购买) 3. 备案(大陆地区)4. 搭建网站原创 2021-11-28 09:24:15 · 311 阅读 · 0 评论 -
Js原型 原型链和new一个对象发生的事情(前端面试经典题目)
本文内容:1.原型与原型链的基本概念2.new原创 2021-11-02 12:19:43 · 449 阅读 · 0 评论 -
Webpack入门实操
本文内容:Webpack的应用Webpack的安装项目实例1. Webpack的应用Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。2. Webpack的安装首先要保证本地的环境支持node.js。安装webpacknpm install webpack -gnpm i -g webpack-cl.原创 2021-10-31 15:58:32 · 118 阅读 · 0 评论 -
Js遍历方式总结(数组、对象、字符串)和迭代器详解
一. 数组的遍历方法一: 普通for循环方法二:foreach循环arr.forEach(function(e){ });数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱。方法三:forin循环for(j in arr) { }在众多的循环遍历方式中,它的效率是最低方法四:map循环arr.map(function(n){ });实际效率还比不上foreach方法五:forof遍历for(let value of arr)原创 2021-10-27 22:07:19 · 3100 阅读 · 0 评论 -
JS 变量声明和数据类型的总结及需要注意的细节
在本篇文章中,将阅读到的内容声明变量的常用命令数据类型的概述以及判断的方法null,undefined 和布尔值数值字符串对象函数数组symbol原创 2021-10-26 13:53:36 · 537 阅读 · 0 评论 -
XML JSON AJAX Fetch Axios的详解
本文内容JSON是什么XML是什么XML 与 JSON的优缺点AJAX是什么以及操作Fetch是什么以及操作Axios是什么以及操作AJAX vs Fetch vs Axios原创 2021-10-21 08:03:08 · 265 阅读 · 0 评论 -
链表算法分类(列出了典型的题型用于练习理解)
本文中,将阅读到的内容:1. 链表的分类和使用场景2. 对链表的操作(增删改查反转)3. 双指针在链表中的运用原创 2021-10-19 15:43:53 · 92 阅读 · 0 评论 -
前端性能优化之图片优化和懒加载
本文内容:图片优化图片懒加载懒加载 vs 预加载在网页中,一般最需要加载时间的就是图片,所以对图片进行一系列的优化或者处理是提高前端性能的方法之一。1. 图片优化不用图片。很多时候会使用到很多修饰类图片,其实这类修饰图片完全可以用 CSS 去代替。对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。小图使用 base64 格式将多个图标文件整合到一张图片中(雪碧图)选择正确的图片格式.原创 2021-10-18 12:52:52 · 415 阅读 · 0 评论 -
回流与重绘 以及 如何避免发生从而达到前端性能优化的目的
本文内容:回流重绘如何避免回流和重绘1. 回流当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程就称为回流。下面这些操作会导致回流:● 页面的首次渲染● 浏览器的窗口大小发生变化● 元素的内容发生变化● 元素的尺寸或者位置发生变化● 元素的字体大小发生变化● 激活CSS伪类● 查询某些属性或者调用某些方法● 添加或者删除可见的DOM元素在触发回流(重排)的时候,由于浏览器渲染页面是基于流式布局的,所以当触发回流时,会导致周围.原创 2021-10-18 12:52:41 · 144 阅读 · 0 评论 -
浏览器组成(浏览器内核 shell等的解释)
浏览器的组成原创 2021-10-18 09:18:40 · 746 阅读 · 0 评论 -
浏览器产生乱码的原因
产生乱码的原因:● 网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码,反之也会出现乱码;● html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码;● 浏览器不能自动检测网页编码,造成网页乱码。解决办法:● 使用软件编辑HTML网页内容;● 如果网页设置编码是gbk,而数据库储存数据编码格式是UTF-8,此时需要程序查询数据库数据显示数据前进程序转码;● 如果浏览器浏览时候出现网页乱码,在浏览器中找到转换编码的菜原创 2021-10-18 09:13:17 · 3264 阅读 · 0 评论 -
前端同源策略 跨域请求问题详解
在本文中,将阅读到的内容有同源策略JSONPCORS1. 同源策略本小节内容1.1 同源策略1.2 同源策略存在的意义和目的1.1 同源策略浏览器的安全策略当中有一个重要的策略叫做同源策略。它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。首先要明白同源的定义是什么?如果两个URL的**协议(protocol)、域名(domain)和端口(port)**都相同的话,这两个URL就是同源的。与 URL.原创 2021-10-17 23:08:05 · 2529 阅读 · 0 评论 -
JS const声明的变量值是否可以改变(面试问题)
在学习es6的时候,我们会注意到两个新的命令let和const用于声明变量。const命令的定义是这样的:const声明一个只读的常量。一旦声明,常量的值就不能改变。const一旦声明变量,就必须立即初始化,不能留到以后赋值。const只在块级作用域内有效。存在暂时性死区,没有变量提升,不可重复声明。const PI = 3.1415;PI // 3.1415PI = 3;// TypeError: Assignment to constant variable.在以上代码中,如原创 2021-10-11 22:48:22 · 4555 阅读 · 0 评论 -
关于Js事件的一切(事件冒泡 事件捕获 事件循环 事件代理 事件监听等)
在本文中将阅读到的内容有: 1. 什么是事件 2. 事件监听 3. 事件冒泡 事件捕获 4. 事件对象 5. 事件代理(委托) 6.事件发布订阅原创 2021-10-11 18:54:09 · 525 阅读 · 0 评论