<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://qzyzz.github.io/en/</id>
    <title>知非</title>
    <updated>2023-06-07T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://qzyzz.github.io/en/"/>
    <subtitle>知非 Blog</subtitle>
    <icon>https://qzyzz.github.io/en/img/logo.png</icon>
    <rights>Copyright © 2023 qzy Built with Docusaurus.</rights>
    <entry>
        <title type="html"><![CDATA[CSS :is() 伪类选择器使用指南]]></title>
        <id>css-is-pseudo-class-selector</id>
        <link href="https://qzyzz.github.io/en/css-is-pseudo-class-selector"/>
        <updated>2023-06-07T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[css :is() 伪类选择器还是一个正在逐步规范化的新特性，所以在使用上也需要注意一下变动，总之，它可以让我们减少编写重复选择器的次数，实现像 SASS/Less 等 CSS 预处理编译器类似的嵌套语法。]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[vue3基础]]></title>
        <id>vue3-basics</id>
        <link href="https://qzyzz.github.io/en/vue3-basics"/>
        <updated>2023-05-23T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[请输入描述]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[第一篇博客]]></title>
        <id>first-blog</id>
        <link href="https://qzyzz.github.io/en/first-blog"/>
        <updated>2023-05-20T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[第一篇博客]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[Web性能优化：使用图片懒加载推迟屏幕外图片的加载]]></title>
        <id>web-performance-optimization-image-lazy-loading</id>
        <link href="https://qzyzz.github.io/en/web-performance-optimization-image-lazy-loading"/>
        <updated>2023-03-23T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[在使用 chrome 的 lighthouse 对网站进行测速之后，发现有一条优化提示：推迟屏幕外的图片加载。之前有看到过要实现这样的效果需要使用 lazy loading，图片懒加载，但是需要使用 js 的方式来实现，由于本人十分懒惰，不想用太复杂的代码，于是在网上搜索了一番，发现 `<img>`  标签原生支持懒加载。]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[Web 性能优化：使用 CSS font-display 控制字体加载和替换]]></title>
        <id>css-font-display-intro</id>
        <link href="https://qzyzz.github.io/en/css-font-display-intro"/>
        <updated>2023-03-09T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[在编写网站的时候，或多或少都会用到一些网络上的字体，CSS 3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变 CSS 中的 `font-display` 属性，就可以避免这个问题。]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[整理了5个JavaScript怪异行为及其原因]]></title>
        <id>5-javascript-tricky-problems</id>
        <link href="https://qzyzz.github.io/en/5-javascript-tricky-problems"/>
        <updated>2022-12-13T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[JavaScript 早期的规范不统一，也没有严格的标准，再加上它的语法灵活多样，有些看起来就不正确的代码却能正常执行，一些看起来符合逻辑的代码，运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG，更重要的是，很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[这就是 TypeScript]]></title>
        <id>typescript-intro</id>
        <link href="https://qzyzz.github.io/en/typescript-intro"/>
        <updated>2022-06-09T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[TypeScript 是 JavaScript 的，带有类型的超集，并且可以编译为 JavaScript 脚本，这篇幅文章将带你认识一下 TypeScript]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[前后端通信之 HTTP 协议简介]]></title>
        <id>http-protocol</id>
        <link href="https://qzyzz.github.io/en/http-protocol"/>
        <updated>2022-05-10T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[HTTP 协议包括客户端和服务端两个实体，客户端发送请求给服务端，服务端返回响应给客户端。在 HTTP 中，数据称为资源，可以是 html 文档、图片、也可以是普通文本。资源是通过 URL 进行定位的。]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[CSS Flexbox 布局最容易理解完全教程]]></title>
        <id>css-flex-box-layout</id>
        <link href="https://qzyzz.github.io/en/css-flex-box-layout"/>
        <updated>2022-04-05T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[CSS flexbox 布局十分强大，它可以对元素进行水平和垂直方向上的对齐，也支持自由缩放，方便响应式布局的开发。这个文章就教你认识 flex-box 布局，看完之后你也能熟练的运用它！]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[CSS 选择器优先级特异性权重详解]]></title>
        <id>css-selector-specificity</id>
        <link href="https://qzyzz.github.io/en/css-selector-specificity"/>
        <updated>2022-04-04T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[在写 CSS 的时候你一定遇到过有些样式明明写对了，也选择了正确的 html 元素去应用这些样式，可是就是不生效，这是为什么呢？因为在选择同一个 HTML 元素的时候，不同的选择器有不同的优先级，优先级低的选择器的样式会被优先级高的覆盖。]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[React Props 教程 - 制作一个按钮]]></title>
        <id>learn-react-props-buttons</id>
        <link href="https://qzyzz.github.io/en/learn-react-props-buttons"/>
        <updated>2022-03-15T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Rect Props 是编写可复用组件的核心，可以利用 Prop 让组件接收不同的参数，然后根据这些参数作出不同的表现，如形状、颜色等。]]></summary>
    </entry>
</feed>