<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[好记性不如烂键盘]]></title><description><![CDATA[用键盘记录生活、工作上的点滴]]></description><link>https://blog.youkuaiyun.com/SunKKkKK</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; SunKKkKK]]></copyright><item><title><![CDATA[前端高级进阶：网站的缓存控制策略最佳实践及注意事项]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/105902704</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/105902704</guid><author>SunKKkKK</author><pubDate>Sun, 03 May 2020 13:54:06 +0800</pubDate><description><![CDATA[对于一个网站来讲，性能关乎用户体验，你在更短的时间内打开网站，你将会留住更多的用户。如果你的页面十秒才能打开，那再好的用户交互也是徒然。

缓存控制是网站性能优化中至为常见及重要的一环，好的缓存控制，除了使网站在性能方面有所提升，在财务方面也有重要提升: 更好的缓存策略意味着更少的请求，更少的流量，更少的峰值带宽，从而节省一大笔服务器或者 CDN 的费用。
缓存控制策略就是 http cachin...]]></description><category></category></item><item><title><![CDATA[前端高级进阶：如何更好地优化打包资源]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/105902445</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/105902445</guid><author>SunKKkKK</author><pubDate>Sun, 03 May 2020 13:26:09 +0800</pubDate><description><![CDATA[在前端中但凡谈到打包，肯定要提及到 webpack，毕竟它现在已经是最为流行的打包工具。但 webpack 更多地是表现在 术 上，于是我决定写这篇文章，更多地讲解一些关于 道 的。
对于一个前端而言，生产环境的静态资源优化，它既是面试中的高频问题，同时也最容易成为平时工作中的 OKR/KPI。如果你经常致力于优化前端打包提及，必然会对一些数字极为敏感，比如：

lodash 和 react gz...]]></description><category></category></item><item><title><![CDATA[前端高级进阶：javascript 代码是如何被压缩的]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/105901853</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/105901853</guid><author>SunKKkKK</author><pubDate>Sun, 03 May 2020 12:26:09 +0800</pubDate><description><![CDATA[随着前端的发展，特别是 React，Vue 等构造单页应用的兴起，前端的能力得以很大提升，随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大，而毫无疑问 javascript 资源已是前端的主体资源，对于压缩它的体积至为重要。
为什么说更小的体积很重要呢：更小的体积对于用户体验来说意味着更快的加载速度以及更好的用户体验，这也能早就企业更大的利润。另外，更小的体积对于服务器来说也意味...]]></description><category></category></item><item><title><![CDATA[当前端基建任务落到你身上，该如何推动协作？]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/105897554</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/105897554</guid><author>SunKKkKK</author><pubDate>Sun, 03 May 2020 00:28:49 +0800</pubDate><description><![CDATA[前言
作为一名野生的前端开发，自打本猿入行起，就未经过什么系统的学习，待过的团队也是大大小小没个准儿：

要么大牛带队，但是后端大牛。
要么临时凑的团队，受制于从前，前端不自由。
要么从 0 到项目部署，都是为了敏捷而敏捷，颇不规范。

话虽如此，经过 4 年生涯摧残的废猿我，也是有自己的一番心得体会的。
1. 从DevOps流程看前端基建

很多专注于切图的萌新前端看到这张图是蒙圈的：
DevO...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS+JS - 原生JS实现加载进度条]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/103675556</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/103675556</guid><author>SunKKkKK</author><pubDate>Tue, 24 Dec 2019 00:43:26 +0800</pubDate><description><![CDATA[分享一个原生JS实现的动态加载进度条特效，效果如下：

实现的代码如下：
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;原生JS实现加载进度条&lt;/...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS -一个div实现不同的UI图标]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/102884534</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/102884534</guid><author>SunKKkKK</author><pubDate>Sun, 03 Nov 2019 17:47:36 +0800</pubDate><description><![CDATA[实现的效果

html部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta h...]]></description><category></category></item><item><title><![CDATA[用Ps去掉图片的水印]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/100056501</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/100056501</guid><author>SunKKkKK</author><pubDate>Sun, 06 Oct 2019 19:27:37 +0800</pubDate><description><![CDATA[导入想要修改的图片。
选择左上角的选框工具，选择自己想要用的选框工具。在这里我们选择【矩形选框工具】，鼠标左键单击选择。（注意：怎么方便怎么来。比如在有些图像上可能用圆形选框工具比较方便,就用圆形选框工具）

用选择的矩形工具把 想要去的 框选起来，形成如图所示。选中后会形成虚线，可以看到。

然后对着图片选中后会形成虚线，右点击鼠标，选择“填充”选项。出现填充选项内容框，我们选择使用“内容识别...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS+JS -3D翻转动画效果的名片]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/102245348</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/102245348</guid><author>SunKKkKK</author><pubDate>Sun, 06 Oct 2019 19:12:28 +0800</pubDate><description><![CDATA[实现的效果

项目需要的图片资源
html部分 + js部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
   &lt;meta charset="UTF-8" /&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" ...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS+JS - 登录注册界面]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/102240569</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/102240569</guid><author>SunKKkKK</author><pubDate>Sun, 06 Oct 2019 18:24:18 +0800</pubDate><description><![CDATA[实现的效果

项目需要的图片资源
html部分 + js部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
   &lt;meta charset="UTF-8" /&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" ...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS - 炫酷加载效果]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763211</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763211</guid><author>SunKKkKK</author><pubDate>Sat, 05 Oct 2019 23:04:22 +0800</pubDate><description><![CDATA[实现的效果

html部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta h...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS - 荧光边框]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763233</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763233</guid><author>SunKKkKK</author><pubDate>Sat, 05 Oct 2019 23:04:07 +0800</pubDate><description><![CDATA[实现的效果

html部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta h...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS - 左侧滑动进入]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763104</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763104</guid><author>SunKKkKK</author><pubDate>Sat, 05 Oct 2019 22:59:21 +0800</pubDate><description><![CDATA[实现的效果

html部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta h...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS - 图片悬浮效果]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763271</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763271</guid><author>SunKKkKK</author><pubDate>Sat, 05 Oct 2019 22:56:35 +0800</pubDate><description><![CDATA[实现的效果

html部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta h...]]></description><category></category></item><item><title><![CDATA[前端特效-HTML+CSS - 4种图标hover动画]]></title><link>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763287</link><guid>https://blog.youkuaiyun.com/SunKKkKK/article/details/89763287</guid><author>SunKKkKK</author><pubDate>Sat, 05 Oct 2019 22:53:08 +0800</pubDate><description><![CDATA[实现的效果

html部分
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta h...]]></description><category></category></item></channel></rss>