-
网站优化系列篇之01 — 网页字体可见性
在使用谷歌 PageSpeed Insights 网站测试工具时，诊断结果经常会有一项目： 确保文本在网页字体加载期间保持可见状态 利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。了解详情。 思考： 1. 为什么它会出现这样的问题对我们网站有什么影响呢？ 2. 那我们要怎么优化处理这个问题呢？ 原因： 字体通常是需要一段时间才能加载的大文件。为了解决这…- 482
- 0
-
JS异步加载的三种方式
一：同步加载 一般正常引用： <script src="http://nsdn.cn/script.js"></script> <script src="http://nsdn.cn/script.js"></script> 同步模式：又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才…- 425
- 0
-
jQuery 替换元素中class的方法
jquery替换class: 实现方法： ① 使用removeClass()删除旧的class ② 使用addClass()添加新的class ③ 使用attr 直接替换原class ④ 使用 toggleClass 有就移除，没有就添加 完整示例: <!DOCTYPE html> <html lang="en"> <head> <me…- 456
- 0
-
谷歌浏览器F12调试页面F5刷新报“未连接到互联网”
开发中遇到问题： 本地开发wordpress php项目，一开始进入页面正常显示，一按F5刷新页面就出现提示： 控制台警告：crbug/1173575, non-JS module files deprecated 解决方法： 测试方式：用其它浏览器来打开测试，结果表明其他浏览器F12正常，就谷歌问题。 终极方法：原因是谷歌浏览器网络设置的问题，之前在控制台，切换显示设备工具栏时，网络设置了离线状…- 633
- 0
-
常见 ASCII 字符参考表
前言 ASCII 码是由美国国家标准学会制定的标准的单字节字符编码方案，是基于拉丁字母的一套电脑编码系统，等同于国际标准 ISO/IEC 646，是目前最通用的单字节编码系统。本工具提供了完整的 128 个 ASCII 字符的对照表，分为可打印字符和控制字符，每个 ASCII 字符提供了对应的二进制、十进制、十六进制表示以及含义； ASCII 字符表 二进制 十进制 十六进制 字符 实体符号 实体…- 513
- 0
-
URL 常见转义字符参考
前言 在URL中，某些特殊字符会被转义成其它项，为了使这些特殊字符能正确表达，需用%加该字符的ASCII码在URL中显示。 参考表 序号 URL中出现的字符 将被转义成 1 (空格) %20 2 + %2B 3 & %26 4 = %3D 5 < %3C 6 > %3E 7 " %22 8 # %23 9 , %2C 10 % %25 11 { %7B 12 } %7…- 443
- 0
-
jQuery添加dom节点的方法
一、内部插入DOM： 完整示例1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>jQuery添加dom节点方法一 -青梅博客</title> <script src="https://cdn.bootcdn.ne…- 425
- 0
-
HTML 锚点三种实现方法
在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验。 下面介绍下锚点三种实现方法： 1. 在同一页面中 <a name="add"></a> 或者 <a id="add"></a> <a href="#add">跳转到add</a> （ps：用id…- 575
- 0
-
解决css引用字体跨域问题
解决方案就是将文字设置为 base64 编码 字体转base64编码网址：https://transfonter.org/ 具体步骤如下： 打开刚刚我们经过转换的解压出来的文件，找到stylesheet.css，复制 里面内容 @font-face { font-family: 'my-icon'; src: url(data:font/truetype;charset=utf…- 600
- 0
-
正则验证车牌号码规则
车牌正则验证 // 正则验证车牌,验证通过返回true,不通过返回false function isLicensePlate(str) { return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏…- 726
- 0
-
vite对比webpack的启动速度提升在哪里？
webpack 原理图 vite 原理图 webpack webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 vite vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。 优势： 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。 vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像w…- 725
- 0
-
Vite 和Webpack 的核心对比？
全方位对比vite和webpack 一. webpack原理 1. webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖） 3.webpack做的就是分析代码。转换代码，编译代码，输出代码 4.最终形成打包后的代码 2. webpack打包原理 1.先逐级递归识别依赖，构建依…- 677
- 0
-
水平垂直居中的六种方法
方法一: 绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） 图片展示： 代码如下： div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-…- 592
- 0
-
js去除字符串空格
使用js去除字符串内所带有空格，有以下三种方法： 1. replace正则匹配方法 去除字符串内所有的空格：str = str.replace(/\s*/g,""); 去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,""); 去除字符串内左侧的空格：str = str.replace(/^\s*/,"&quo…- 569
- 0
-
css3有哪些新增属性？(回顾)
一、css3新增边框属性 1、css3新增属性之border-color：为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0000ff; } 这里说一下题外话，需要注意："border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 …- 602
- 0
-
js同步和异步的区别是什么？
javascript是一门单线程语言，所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。如果一个任务耗时过长，那么后面的任务就必须一直等待下去，会拖延整个程序。 js的执行模式分为两种：同步 和 异步。 ① 同步模式: 就是后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的…- 686
- 0
-
js 继承的是什么？如何实现继承？
继承的含义： 继承是面向对象编程中的一个重要概念，通过继承可以使子类的实例使用在父类中定义的属性和方法。 JavaScript继承是一种允许我们在已有类的基础上创建新类的机制；它为子类提供了灵活性，可以重用父类的方法和变量。 一、 原型继承 function Animal(name = 'animal'){ this.name = name } Animal.prototype…- 556
- 0
-
CSS属性继承有哪些？（回顾）
CSS继承含义 CSS继承是指设置上级（父级）的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。 可以被继承的属性 字体系列属性： font-family:规定元素的字体系列。 font-weight:设置字体的粗细。 font-size:设置字体的尺寸。 font-style:设置字体的风格。 font-variant:设置小型大写字母的字体显示文本，所有的额小写字母都会转换成大写字母…- 550
- 0
-
JS中的八大数据类型
一. JS中有八种数据类型: 基本数据类型: Number, String, Boolean, Undefined, Null, Symbol, BigInt 引用数据类型 Object 注：红色为新增的基本数据类型。 二. typeof 操作符 由于js中的变量是松散类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是 typeof 关键字. typeof 123 //Numbe…- 609
- 0
-
js正则表达式语法
1.匹配特定数字： ^[1-9]d*$ //匹配正整数 ^-[1-9]d*$ //匹配负整数 ^-?[1-9]d*$ //匹配整数 ^[1-9]d*|0$ //匹配非负整数（正整数 + 0） ^-[1-9]d*|0$ //匹配非正整数（负整数 + 0） ^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数 ^-([1-9]d*.d*|0.d*[1-9]d*)$…- 552
- 0
-
JavaScript获取当前url路径
1、假设当前页完整地址是：https://www.nsdn.cn:8080/Home/Index?id=2&age=18 //获取当前窗口的Url var url = window.location.href; //结果：https://www.nsdn.cn:8080/Home/Index?id=2&age=18 //获取当前窗口的主机名 var host = window.lo…- 511
- 0
-
前端JS、CSS版本控制
前言 最近面试，问道js,css版本控制问题，一时间忘记，没答上来，下来查阅资料，整理一下。 问题 用户 首次 通过浏览器打开网页时都会对 JS、CSS 文件 进行缓存，以便在下次打开时可以直接从缓存中取出，而不用重复地向服务器 再次请求；当用户再次通过浏览器浏览某个网页，浏览器在加载网页中包含的各个资源（JS、css、图片）时，先会判断缓存中是否已经包含了此资源（当然这与Header中定义的Ca…- 598
- 0
-
echarts饼图鼠标移入时，悬停部分不放大突出 属性 ？
鼠标移入不放大 ： 在series里 设置 : hoverAnimation:false 注意： 如果内部饼图设置完仍然有放大 应该是饼图的 radius设置的过大 将比例缩小即可 代码部分： option = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: �…- 3.3k
- 0
-
CSS中hover出现不生效的几个原因 ？
在设置CSS的hover时，有时会发现hover不起作用， 总结一下原因： 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 1.在设置:hover前加空格： 比如: <style type="text/css">…- 1.8k
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×