首页 文章 精选 留言 我的

精选列表

搜索[前端性能]，共10000篇文章
优秀的个人博客,低调大师

Prettier 1.19 发布，前端代码格式化工具

Prettier 1.19已经发布，主要更新内容如下： CLI 修复 1.19.0版本中 --stdin回归 // Prettier stable $ echo "test" | prettier --stdin --parser babel [error] regeneratorRuntime is not defined // Prettier master $ echo "test" | prettier --stdin --parser babel test; TypeScript 修复联合类型格式化为箭头函数返回类型 // Input export const getVehicleDescriptor = async ( vehicleId: string, ): Promise<Collections.Parts.PrintedCircuitBoardAssembly['attributes'] | undefined> => {} // Prettier stable export const getVehicleDescriptor = async ( vehicleId: string ): Promise<| Collections.Parts.PrintedCircuitBoardAssembly["attributes"] | undefined> => {}; // Prettier master export const getVehicleDescriptor = async ( vehicleId: string ): Promise< Collections.Parts.PrintedCircuitBoardAssembly["attributes"] | undefined > => {}; 请见发布说明。
2019-11-11
优秀的个人博客,低调大师

前端学习笔记（7）css选择器（一）

选择器分类 简单选择器：针对某一特征判断是否选中元素。 复合选择器：连续的简单选择器，根据元素特征判断是否选中单个元素。 复杂选择器：由“（空格）“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。 选择器类别：用逗号分隔的复杂选择器，表示“或”。 简单选择器 简单选择器分类： 类型选择器 全体选择器 id选择器 class选择器 属性选择器 伪类选择器 伪元素选择器 类型选择器 根据标签名来选中元素。 div{ } 全体选择器 “*”可以选中任意元素。 *{ } id选择器 “#”后面跟id名。 #myid{ } class选择器 “.”后面跟class名 c 一个元素可以拥有多个类。下例中“.a” “.b” “ .c”都可以选中div标签。 <div class="a b c"></div> .a{ } 属性选择器 第一种，[att]: 选中带有att属性的元素 <input type="text"/> [type]{ } 第二种，[att=val]: 选中att属性值为val的元素 <input type="text"/> [type=text]{ } 第三种，[att~=val]: 选中属性att的值中包含指定词汇的元素 <img src="" title="img1 img2" /> [type~=img1]{ } 第四种，[att|=val]: 选中属性att值以val开头的元素，val必须为整个单词 <p lang="en-us">Hello World!</p> [type|=en]{ } 第五种，[att^=val]: 选中属性att值以val开头的元素 <input type="text"/> [type^=te]{ } 第六种，[att$=val]: 选中属性att值以val结束的元素 <input type="text"/> [type^=xt]{ } 第七种，[att*=val]: 选中属性att值包含val的元素 <input type="text"/> [type*=ex]{ } 属性选择器中val可能包含特殊字符，所以可以使用单双引号包裹起来规避特殊字符，也可以使用反斜杠转义。 伪类选择器 伪类选择器是一系列由 CSS 规定好的选择器，它们以冒号开头。伪类选择器有普通型和函数型两种。 树结构关系伪类选择器 :root表示树的根元素，html文档中根元素为html标签。 :empty表示没有子节点的元素，拥有空白文本也不能被选中。 :nth-child和:nth-last-child，nth-child规则如下。nth-last-child为从后向前。 :first-child和:last-child分别表示第一个和最后一个元素。 :only-child表示唯一子元素 S:nth-of-type和S:nth-last-of-type表示只从S只选中。(of-type系列同理) <div> <p>1</p> <a>2</a> <p>3</p> <p>4</p> </div> div p:nth-child(1){ //选中 1 } div p:nth-child(2){ // 没有选中 } div p:nth-of-type(2){ // 选中3 } :first-of-type和:last-of-type <div> <p>1</p> <a>2</a> <p>3</p> <p>4</p> </div> div p:first-child{ //选中1 } div a:first-child{ //没有选中 } div a:first-of-type{ //选中2 } :only-of-type <div> <p>1</p> <a>2</a> </div> div p:only-child{ //没有选中 } div p:only-of-type{ //选中p } 链接与行为伪类选择器 :any-link 表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类。 :link 表示未访问过的链接， :visited 表示已经访问过的链接。 :hover 表示鼠标悬停在上的元素。 :active 表示用户正在激活这个元素，如用户按下按钮，鼠标还未抬起时，这个按钮就处于激活状态。 :focus 表示焦点落在这个元素之上。 :target 用于选中浏览器 URL 的 hash 部分所指示的元素。 逻辑伪类选择器 :not目前只支持简单选择器 <div> <p class="p1">1</p> <p>2</p> </div> div p:not(.p1){ //选中2 } 伪元素选择器 伪元素选择器选中的是不存在的元素。常用的伪元素选择器有以下几种。 first-line 选用元素的第一行 first-letter 选中元素的第一个字母 before after first-line 必须出现在最内层的块级元素之内。所以下例代码中第一行为蓝色。 <div> <p id=a>First paragraph</p> <p>Second paragraph</p> </div> div>p#a { color:green; } div::first-line { color:blue; } span标签为行级元素，所以伪元素在span之外，第一行为绿色。 <div> <span id=a>First paragraph</span> <span>Second paragraph</span> </div> div>span#a { color:green; } div::first-line { color:blue; } ::first-letter 的行为又有所不同，它的位置在所有标签之内。我们把前面的代码换成::first-letter，首字母为蓝色。 <div> <span id=a>First paragraph</span> <span>Second paragraph</span> </div> div>span#a { color:green; } div::first-letter { color:blue; } ::before 表示在元素内容之前插入一个虚拟的元素，::after 则表示在元素内容之后插入。这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效，我们看下例子： <p class="hi">hellow world!</p> p.hi::before { display: block; content: "hi! "; }
2019-10-07
优秀的个人博客,低调大师

前端学习笔记（8）css选择器（二）

选择器的组合 选择器列表是一个由逗号分隔的复杂选择器序列；复杂选择器则是用“空格”、“~”、“+”、“>”、“||”连接的复合选择器；复合选择器则是连写的简单选择器。选择器的连接方式可以理解为四则运算一样有优先级。 第一优先级：无连接符号，表示“且” 第二优先级：“空格”、“~”、“+”、“>”、“||” 第三优先级 ：“,”表示“或”复杂选择器规定了五种连接符号。 “空格”：后代，表示选中所有符合条件的后代节点， 例如“ .a .b ”表示选中所有具有 class 为 a 的后代节点中 class 为 b 的节点。 “>” ：子代，表示选中符合条件的子节点，例如“ .a>.b ”表示：选中所有“具有 class 为 a 的子节点中，class 为 b 的节点”。 “~”: 后继，表示选中所有符合条件的后继节点，后继节点即跟当前节点具有同一个父元素，并出现在它之后的节点，例如“ .a~.b ”表示选中所有具有 class 为 a 的后继中，class 为 b 的节点。 “+”：直接后继，表示选中符合条件的直接后继节点，直接后继节点即 nextSlibling。例如 “.a+.b ”表示选中所有具有 class 为 a 的下一个 class 为 b 的节点。 “||”：列选择器，表示选中对应列中符合条件的单元格。实际使用中“空格”、“>” 使用的比较常见。 选择器的优先级 id选择器的数目记为a； 伪类选择器、class选择器和属性选择器的数目记为b； 伪元素选择器和标签选择器的数目结尾c； “*”不影响优先级。 specificity = base * base * a + base * b + c 其中base是一个足够大的正整数。行内属性的优先级永远大于css规则。浏览器提供了“!important”关键字优先级高于行内属性，不推荐使用。不同属性选择器的优先级相同。例如下面一段代码中三个属性选择器的优先级是相同。 <input type="text"/> [type]{ } [type="text"]{ } [type^="t"]{ } 同一优先级的选择器遵循后面的覆盖前面的原则。
2019-10-07
优秀的个人博客,低调大师

前端学习笔记（9）css grid网格布局

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。 容器属性 1. display属性 指定一个容器采用网格布局 div { display: grid; } div { display: inline-grid; //设置为行内元素 } 注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 2. grid-template-columns 属性，grid-template-rows 属性 grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。 .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; } .container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); } //grid-template-columns: repeat(2, 100px 20px 80px); repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。repeat()重复某种模式也是可以的。 auto-fill auto-fit关键字 .container { display: grid; grid-template-columns(auto-fill,100px); grid-template-columns(auto-fit,100px); } 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。假设容器可以容纳n个单元格，但是只有m个项目时(n>m)，atuo-fill会生成n个单元格，auto-fit只会生成m个单元格。项目数多于容器单行可容纳单元格的情况下两个属性作用相同。 fr关键字 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。fr可以与绝对长度单位一起使用。 grid-template-columns: 1fr 2fr 3fr; grid-template-columns: 150px 1fr 2fr; //第一列的宽度为150像素，第二列的宽度是第三列的一半。 grid-template-columns: 1fr 1fr minmax(100px, 1fr); //表示列宽不小于100px，不大于1fr 网格线的名称 grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。网格布局允许同一根线有多个名字，比如[fifth-line row-5]。.container { display: grid; grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];} 3.row-gap 属性，column-gap 属性，gap 属性 row-gap属性设置行与行的间隔（行间距），column-gap属性设置列与列的间隔（列间距）。gap属性是column-gap和row-gap的合并简写形式。 grid-gap: <grid-row-gap> <grid-column-gap>; grid-gap：20px 20px; 4.grid-template-areas 属性 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。 .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; } //上面代码将9个单元格分成a、b、c三个区域。 grid-template-areas: 'a a a' 'b b b' 'c c c'; //如果某些区域不需要利用，则使用"点"（.）表示。 grid-template-areas: 'a . c' 'd . f' 'g . i'; 注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。 5.grid-auto-flow 默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。 grid-auto-flow: column; grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。 grid-auto-flow: row; grid-auto-flow: row dense; 6.justify-items 属性，align-items 属性，place-items 属性 justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。 .container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; } start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）。 place-items属性是align-items属性和justify-items属性的合并简写形式。如果省略第二个值，则浏览器认为与第一个值相等。 place-items: <align-items> <justify-items>; 7.justify-content 属性，align-content 属性，place-content 属性 justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。 .container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; } place-content属性是align-content属性和justify-content属性的合并简写形式。 place-content: <align-content> <justify-content> 8.grid-auto-columns 属性，grid-auto-rows 属性 有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。 grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。 grid-auto-rows: 200px; 9. grid-template和grid grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。 grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。 容器属性 1.grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性 用于指定项目位置 grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线 .item-1 { grid-column-start: 2; grid-column-end: 4; } .item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; } 这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。 .item-1 { grid-column-start: header-start; grid-column-end: header-end; } 这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。 .item-1 { grid-column-start: span 2; // 效果等同于上面（start、end同时存在时优先使用start） // grid-column-end: span 2; } 使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。 2. grid-column 属性，grid-row 属性 grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 .item-1 { grid-column: 1 / 3; grid-row: 1 / 2; } /* 等同于 */ .item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } 3. grid-area 属性 grid-area属性指定项目放在哪一个区域。 .container{ grid-template-areas: 'a b c' 'd e f' 'g h i'; } .item-1{ grid-area: e; } grid-area与grid-column、grid-row同时存在时后指定的生效。 .container{ grid-template-areas: 'a b c' 'd e f' 'g h i'; } .item-1{ grid-column: 1/2; grid-area: e; grid-row: 1/2; } grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。 .item { grid-area: <row-start> / <column-start> / <row-end> / <column-end>; } 4. justify-self 属性，align-self 属性，place-self 属性 参考 justify-items 属性，align-items 属性，place-items 属性，针对当前项目使用。
2019-10-07
优秀的个人博客,低调大师

前端学习笔记（4） - JavaScript宏观与微观任务

宏观和微观任务 在 ES3 和更早的版本中，JavaScript 本身还没有异步执行代码的能力，这也就意味着，宿主环境传递给 JavaScript 引擎一段代码，引擎就把代码直接顺次执行了，这个任务也就是宿主发起的任务。 但是，在 ES5 之后，JavaScript 引入了 Promise，这样，不需要浏览器的安排，JavaScript 引擎本身也可以发起任务了。 由于我们这里主要讲 JavaScript 语言，那么采纳 JSC 引擎的术语，我们把宿主发起的任务称为宏观任务，把 JavaScript 引擎发起的任务称为微观任务。 宏观任务的队列就相当于事件循环。在宏观任务中，JavaScript 的 Promise 还会产生异步代码，JavaScript 必须保证这些异步代码在一个宏观任务中完成，因此，每个宏观任务中又包含了一个微观任务队列。 有了宏观任务和微观任务机制，我们就可以实现 JavaScript 引擎级和宿主级的任务了，例如：Promise 永远在队列尾部添加微观任务。setTimeout 等宿主 API，则会添加宏观任务。 如何分析异步执行的顺序 首先我们分析有多少个宏任务； 在每个宏任务中，分析有多少个微任务； 根据调用次序，确定宏任务中的微任务执行次序； 根据宏任务的触发规则和调用次序，确定宏任务的执行次序； 确定整个顺序。 setTimeout(()=>{console.log('c')},0) let x = new Promise((resolve,reject)=>{ console.log('a') resolve() }).then(res=>{ console.log('b') setTimeout(()=>{console.log('d')},0) })
2019-08-13

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2026-04-11 大小: 211.28KB 下载: 56次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2026-09-24 大小: 189MB 下载: 9次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-08-21 大小: 1.42GB 下载: 6次
WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

时间: 2025-12-13 大小: 249.54MB 下载: 22次
热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册