互联网眺望

发表于 更新于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

理解发现解决方案的过程比解决方案本身更有用

尽量减少代码重复

尽量减少改动时要编辑的地方

尺寸: 放大一个组件，你的CSS需要改动几处

当某些值相互依赖时，应该把它们的相互关系用代码表达出来。

作者推荐使用百分比或者em单位。比如：

1
2
font-size: 20px;
line-height: 1.5;

可以修改为：

1
2
font-size: 125%;
line-height: 1.5;

通过使用em，组件可达到按照字体大小缩放的目的。

在MDN Web Doc中，关于em的定义：

em：相对长度单位，在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width

另外一个类似的相对长度单位：rem：

在MDN Web Doc中，关于rem的定义：

rem：相对长度单位，根元素的字体大小

当然，其中不希望随着缩放变化的，可以使用绝对长度单位，如边框宽度border-width。

颜色: 暗色与亮色背景上，如何改动组件颜色？

只要把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体，这样就可以轻松化解这个难题。

半透明白色：rgba(255, 255, 255, 0.5)或hsla(0, 0%, 100%, 0.5)，

半透明黑色：rgba(0, 0, 0, 0.5)或hsla(0, 0%, 0%, 0.5)；

其中最后的透明度可根据实际进行调整。

分别在白色与黑色背景上设置半透颜色、半透投影效果如下图所示。

image.png

image.png

通过在原有组件上设置background: background-color, backgound-image,即可轻松通过覆盖background-color得到不同版本的按钮：

CSS中的变量 currentColor

currentColor会被解析为当前字体的颜色color的值，据《CSS揭秘》中说，该值为CSS 中有史以来的第一个变量。

相信你的眼睛，而不是数字

文中提到：视觉错误在任何形式的视觉设计中都普遍存在。设计是针对人的，而不是机器。

相关技巧包括：

  1. 垂直居中时，将物体从几何学中心点再稍微向上挪一点；
  2. 圆形的组件稍微放大一些，才会看起来与矩形的大小相同；
  3. 相对左右两侧内边距，稍微减少顶部与底部的内边距，使得其看起来相同。

关于响应式页面设计

思路是尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸。

何时应该使用媒体查询：

其他尝试都失败了；或者希望在较大或较小的视口下完全改变网站的设计。

避免媒体查询的几点建议：

我们摘录其中的几点：

  1. 使用百分比长度来取代固定长度：%，vw, vh, vmin, vmax。
  2. 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size: cover 这个属性都可以做到。
  3. 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定列的数量。
  4. 在使用多列文本时，指定column-width（列宽）而不是指定column-count（列数）.

合理使用简写

合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。

1
2
3
background: url(tr.png) no-repeat top right / 2em 2em,
 		   url(br.png) no-repeat bottom right / 2em 2em,
		   url(bl.png) no-repeat bottom left / 2em 2em;

可以通过 CSS 的“列表扩散规则”：如果只为某个属性提供一个值，那它就会扩散并应用到列表中的每一项，改写为以下代码：

1
2
3
4
5
background: url(tr.png) top right,
 		   url(br.png) bottom right,
 		   url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

关于预处理器

CSS预处理器：

  1. Stylus（http://stylus-lang.com/）
  2. Sass（http://sass.lang.com/）
  3. LESS（http://lesscss.org/）

它们在大型项目中可以让代码更加灵活。

文中提到，它们可能使得解析出的CSS文件的体积和复杂度失控；同时，这些预处理器也可能存在bug。

发表于 更新于 本文字数： 97 阅读时长 ≈ 1 分钟

1

作为一个半路出家的前端程序员，之前项目都是根据github上的开源项目硬改过来的，如vue-element-admin。改造过程需要删除很多无用页面、路由等等。

萌发了想自己手动创建一个基础项目的想法。

vue-cli安装

官网文档，不多废话

创建项目

1
vue create my-project

发表于 更新于 本文字数： 19 阅读时长 ≈ 1 分钟

问题起源于最近工作中遇到的一点儿烦心事，

发表于 更新于 本文字数： 901 阅读时长 ≈ 3 分钟

日更养成习惯，发不出来文章，难受！

读书须用意，一字值千金。

6月30日晚，听掘金关于写作的直播课，美女运营 @大茹 主讲，所得匪浅，发文总结。

自我审查单

以下是通过直播以及如何使用掘金社区总结的文章发布前的规范审查单（欢迎补充）：

  1. 该文属于知识（知识树，个人技巧）、经验（踩坑）、观点（不认同xxx）？

  2. 读者定位为哪些人？外行？初学者？经验丰富的工程师？学生？

  3. 该文解决了读者什么痛点？

    (1) 容易遗漏的知识点？

    (2) 能让读者升职加薪？迎娶白富美？进入大厂？

    (3) 能节省读者时间，提高效率的快捷工具？

    (4) 总结/汇总性质？

    (5) 该文填充了读者的信息差，观点不同/经验不同/维度不同？

    (6) … 后续慢慢补充吧

  4. 文章的边界在哪里？能否用一句话概述核心？讲什么，不讲什么，与读者预期是否一致？

    要做标题党，当然，并不是起那种语不惊人死不休的（具体参考各手机浏览器小文章），而是让大家通过标题，清晰的给文章划定界限。

    小册中讲，选题就是“定义问题”的过程，寻找你与读者之间的认知差别。换句话说，文章的所有内容都应围绕“帮助读者了解问题、解决问题”。

    每段文字对于读者理解文章有何帮助？如“想要理解XXX，需先知道它是如何发展至今的？”

    小册中列出的几种选题：

    • 技术细节型
    • 干货型：如介绍开源软件。
    • 翻译文章，如翻译英文的技术文章
    • 实践总结型
    • 行业见解，职业选择

  5. 文章开头是否能看出全文主旨、解决的问题、你的观点？

    好的开始是成功的一半。

    在网络上找到一些文章开头写法，虽然不尽是技术文章相关，但希望对自己，对读者有所启发：

    开门见山/提示中心/描写引入/设置悬念（反问、设问、疑问）/对比/故事导入/名人名句引入/背景介绍/倒叙/形象比喻式开头/抒发感情式开头/交代原因式开头/梦幻幻想式开头/心语诉说式开头/与读者交谈式开头

  6. 文章结构是横向平铺、纵向递进、总分、总分总？

    是否有清晰的层次？侧重点是什么？是如何从整体到局部，从局部到细节推进的？

    最好的技术文章当属论文。简单来说，论文的结构框架大致分为：文摘、引言、正文、结论、参考文献。

  7. 逻辑的衔接是否恰当，A是否能推导出B？

  8. 是否带有论据：数据（图、表）？案例？关键代码？

  9. 句子“口感”通顺吗？长句子是否便于理解？（短句比长句好）

  10. 文章排版是否优雅？易于查找，符合逻辑。

下面是小册中概述的原文：

有没有明确交代要讲什么问题的开头；

小标题间符不符合纵向或横向的关系；

内容是不是先整体再具体；

文章结构是否可以抽象和拓展。

总结

如果非要用几个关键字，概括这份审查单：内容具体，论据辅助，逻辑恰当，语句顺畅。

发表于 更新于 本文字数： 1.4k 阅读时长 ≈ 5 分钟

这是我参与更文挑战的第30天，活动详情查看： 更文挑战

以其所见者真，所知者深也。

——摘自《人间词话》王国维

今天也是更文挑战的最后一天，也是2021年上半年的最后一天！

从最开始的每天发布点“储粮”，到后来的每天写一篇，有时周五也会赶赶周末的文章。写作是一个逼着自己思考、整理和复盘的过程。

就这样倒逼着自己成长，做记录，总结，学新知识，毕竟有输入才能有输出。

学的新知识包括一些全新的概念，也包括一些编程技巧、算法技巧，前端性能提升等等。

更文总结

这个月的日更文章分类列表如下：

前端：

个人前端属于半路出家，很多知识都是业务驱动着去学。

  1. 慎用watch监听——记一次Vue页面卡顿排查 新知识

  2. 一次后台管理系统加载慢问题定位过程 新知识

  3. vue元素拖拽与序号编写协同修改排序

  4. 使用keep-alive保存滚动条的位置

  5. axio如何取消请求

  6. vue3特性学习 新知识

  7. 使用httpwatch测试网站性能 新知识

  8. 使用DynaTrace Ajax工具-以失败终 新知识

  9. 加速网站速度的建议之内容篇 新知识

  10. 加速网站速度的建议之服务器篇一 新知识

  11. 加速网站速度的建议之服务器篇二 新知识

  12. 加速网站速度的建议之Cookie篇 新知识

  13. 加速网站速度的建议之CSS篇 新知识

后端

Java：

  1. 如何优雅的在Java中使用枚举enum
  2. 如何在Java中使用lambda表达式
  3. 如何在Java中使用流stream
  4. 拥抱云原生——初探Quarkus 新知识
  5. JAVA - SimpleDateFormat 的线程不安全性
  6. 拥抱云原生——云原生概念与Quarkus基本使用 新知识
  7. 初识kubernetes 新知识
  8. 使用arthas trace命令查看代码各方法响应时间 新知识
  9. Java中的WaitGroup——CountDownLatch

Go：

  1. 使用Go-gin搭建一个简易的web服务 新知识

  2. 缓存击穿及解决方案｜周末学习 新知识

  3. Go缓存击穿方案-singleflight源码解读 新知识

  4. Go语言中的异常处理 新知识

Python：

  1. 使用Python下载服务器文件并实时查看下载进度｜周末学习
  2. 用python爬取网络图——简单便捷

测试

  1. 用Postman做接口测试

其中，还写了一篇年中总结：闲言碎语｜2021 年中总结，没什么阅读量和点赞数。

日更，文章质量自然说不上很高吧，在群里和一些文章也有很多对“每日更文”嗤之以鼻。但是起步总是要起步的，日拱一卒，开卷有益吧！

学习大佬

最近也在看阮一峰大佬的博客，其内容除技术之外，很大一部分与技术无关，包括社会、经济、阅读等，很大一部分来源是英文资料，其涉猎十分广泛。其博客至少是是每周一篇，偶尔有些其他短文，比如最近的Reddit热帖：程序员的酒后真言），他的文章内容拆分很值得学习。

他的每篇博客大多分为以下几个部分：

  1. 封面图
  2. 本周话题：如城市发展与病房床位的关系、培训班与大学求职成功率比较等等。
  3. 广告：不多数！羡慕！
  4. 科技动态：如：闯入俄罗斯村庄的北极熊，国内第一辆无线供电的有轨电车等等，其中有些是无关科技的。但大致上可以看到一些简略的前沿动态吧！
  5. 一些文章：汇总一些新闻、其他博客、文章，如亚洲象的十三个分布国、Linus 谈 mRNA 疫苗等等。
  6. 工具：大多数是一些新发布的软件或开源项目。
  7. 资源：包括在线书籍、电影、生活技能、游戏、搜索引擎、教程、一些资源汇总文章等等，如2021 苹果设计奖、家庭花园种植指南。
  8. 图片：或有艺术感，或反应一定的社会问题，或是社会热点，或是猎奇。
  9. 文摘：
  10. 言论：文摘、言论是博客中我最喜欢的部分，就好像我从大佬这拿到一扇门，门里又打开了很多其他的路和门。

从这些博文中，我们可以大致思考“大佬”的学习轨迹，比如大佬至少看了什么书籍，大佬获取资讯的网站有哪些，有哪些值得关注的开源项目、新软件，新的艺术动态等等。他的技术广度、知识深度值得成为一个榜样！

Flag

借鉴《从小工到专家》，最后立几个Flag吧：

希望2021年下半年乃至以后：

  1. 每年至少学习一种新语言
  2. 每季度阅读一本技术书籍
  3. 在网上上一门课程，目前看来我最需要的可能是写作课
  4. 与其他公司或大佬主动交流，保证线上交流，希望能进一步线下交流
  5. 寻找至少一个商务新闻或者期刊，保持追踪
  6. 锻炼身体，争取体重从120提高到130（目前个人比较瘦）

发表于 更新于 分类于 本文字数： 692 阅读时长 ≈ 3 分钟

这是我参与更文挑战的第29天，活动详情查看： 更文挑战

继Cookie篇后，继续学习如何加速网站。

CSS

将样式表放在顶部

把样式表放在head部分，可以实现页面的逐步渲染，使得浏览器能够尽快显示部分内容。如同进度条一般，能够提高用户体验。这也是HTML规范的一部分。

当样式表在底部时，部分浏览器，如IE，阻止页面渲染以避免其随着样式加载不得不重新绘制，因此，页面未加载完全时，用户只能看到一个空白的白色页面。

避免使用CSS-expression

什么是CSS-expression呢？

1
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

根据例子可以列举为CSS中嵌入了javascript。大多数翻译为”CSS表达式”，目前已被废弃的一种CSS属性，只在IE5~IE7支持，IE8就已经废弃。

CSS-expression被废弃的主要原因是，不仅在页面渲染和调整大小时被重新执行，在页面滚动时、鼠标移动时，其也会被执行，有严重的性能问题。

这一点了解一下即可，现在一般不会遇到这种情况。

使用<link>代替@import

IE中使用@import与在页面底部使用<link>相同，如本文第一条所言，应避免这种情况。

关于两者更多的区别：

以下内容参考了博客园的一篇博客：https://www.cnblogs.com/my--sunshine/p/6872224.html

  1. @import属于CSS规则，而<link>属于html标签。
  2. 加载顺序：<link>引入的 CSS 与页面同时加载；@import引入的 CSS 在页面加载完毕后才被加载。
  3. @import是 CSS2.1 +的语法，要求浏览器IE5+；link标签作为 HTML 元素，不存在兼容性问题。
  4. 可通过 JS 插入link标签来改变样式，而@import不支持。
  5. <link>引入的样式权重大于@import引入的样式。

避免过滤器

似乎也是一个古老的问题。

避免使用IE CSS过滤器：AlphaImageLoader。

了解了一下，这个过滤器是IE8之前版本的，用于设置背景图片的特效样式。

掘金首页CSS

我们通过Chrome查看源代码查看掘金首页的CSS情况。

如图所示：

image.png

发起其<Head>中存在link标签。未发现使用@import。

1
2
3
...
<link data-n-head="ssr" rel="stylesheet" href="https://b-gold-cdn.xitu.io/ionicons/2.0.1/css/ionicons.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://b-gold-cdn.xitu.io/asset/fw-icon/1.0.9/iconfont.css">
...

  1. 加速网站速度的建议之内容篇

  2. 加速网站速度的建议之服务器篇一

  3. 加速网站速度的建议之服务器篇二

  4. 加速网站速度的建议之Cookie篇

发表于 更新于 本文字数： 627 阅读时长 ≈ 2 分钟

这是我参与更文挑战的第28天，活动详情查看： 更文挑战

继续学习雅虎关于加速网站的Cookie、CSS等内容。

减小Cookie大小

Cookie与认证、个性化相关功能有关，几乎每次HTTP请求，都会传递Cookie，因此，应该保持Cookie的大小较小，减少网络负载，从而减少Cookie对响应时间的影响。

相关策略包括：

  1. 消除不必要的Cookie
  2. 降低Cookie大小
  3. 在适当的域名级别设置cookie，避免对子域名造成影响（这一点在下一小节中有具体例子）
  4. 设置适当的过期时间（文中说应该让Cookie尽快过期为好）

对静态组件使用无Cookie域名

如对静态图片的请求，Cookie毫无用途，因此对这些请求应该不使用Cookie。建议设置无Cookie的子域名链接所有的静态组件。

类似www.example.org是主网站，而静态资源可存放在域名static.example.org下。若在顶级域名example.org设置Cookie，则请求static.example.org时，也会发送Cookie信息，浪费资源。如果情况已经发生，则需要另外购买域名来指向静态资源。

另外，一些代理可能拒绝缓存带有Cookie的请求信息。

掘金的Cookie评估

我们针对雅虎所说的Cookie优化，查看一下掘金的情况：

通过Chrome，F12，查看Network的情况，掘金首页的域名与Cookie情况大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
https://juejin.cn/	   // 主站，favicon图片，有Cookie
b-gold-cdn.xitu.io     // css，根据域名判断应该是CDN，无Cookie
sf3-scmcdn2-tos.pstatp.com // svg、png、js, CDN， 无Cookie
sf3-ttcdn-tos.pstatp.com   // 图片，CDN,无Cookie
i.snssdk.com               // 似乎是第三方服务，部分有Cookie，部分无Cookie，snssdk.com会跳转至今日头条
abtestvm.bytedance.com     // 无Cookie
mcs.snssdk.com			  // 有Cookie
abtestvm.bytedance.com     // 无Cookie
api.juejin.cn			  // 有Cookie（Options请求无Cookie）
www.google-analytics.com   // 无Cookie，嵌入了Google分析工具
sf6-scmcdn-tos.pstatp.com  // js， CDN, 无Cookie
sf6-ttcdn-tos.pstatp.com   // 图片，CDN，无Cookie
p9-juejin.byteimg.com      // 图片, CDN，无Cookie
sf1-ttcdn-tos.pstatp.com   // 图片，CDN，无Cookie
p6-juejin.byteimg.com	   // 图片，CDN，无Cookie
p1-juejin.byteimg.com	   // 图片，CDN, 无Cookie
p3-juejin.byteimg.com	   // 图片，CDN, 无Cookie

参考之前的内容、服务器篇，掘金的首页配置，特别是针对“拆分组件到多个域名下”。掘金使用的CDN的数量也已经远远超过了4个。

  1. 加速网站速度的建议之内容篇
  2. 加速网站速度的建议之服务器篇一
  3. 加速网站速度的建议之服务器篇二

发表于 更新于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

这是我参与更文挑战的第25天，活动详情查看： 更文挑战

起源

继上次学习Httpwatch与DynaTrace Ajax工具之后，继续查找能帮助提升网站速度的建议或方法。

仍然是在书籍《精通软件性能测试与LoadRunner实战》中，其中提到了35条实用建议，另外提到了Yahoo Developer上的详细文档，方向覆盖Content，服务，Cookie，CSS，JavaScript，图片，移动端。

我们一一探讨与思量！

Content

最小化Http请求数目

这是优化过程中非常重要的一点，尤其是针对首次访问网站的用户，此时浏览器中无相关缓存，所有资源均需从网络加载。每次建立连接，都是需要耗费时间和网络资源。而且Http 1.0/1.1协议下，浏览器对每个域名同时只能建立6个连接，其他连接则需要排队与阻塞。页面显示的大部分时间都用于下载页面中的组件：图像、样式表、脚本、Flash 等，减少组件的数量反过来会减少呈现页面所需的 HTTP 请求数量，这是加快页面速度的关键。

相关的技术包括：

组合文件（通过将所有脚本组合到一个脚本中来减少 HTTP 请求数量的方法）；

CSS Sprites（减少图像请求数量的首选方法，您的背景图像组合成单个图像，并使用 CSSbackground-image和background-position属性来显示所需的图像片段）、

图像映射（将多个图像组合成一个图像，不推荐使用）

减少DNS解析时间

It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname.

一次DNS解析大约需要20-120毫秒。

DNS解析时间与网站资源上的域名数量有关，通过降低网站资源的域名数量，可以减少DNS解析时间。但另一方面，降低网站资源数量也会降低页面上并发下载的数量。建议将网站组件拆分为2~4个域名下。

避免重定向

重定向是通过HTTP状态码301,302实现的。

重定向会降低用户体验。重定向时，嵌入重定向的HTML文档下载完，才可能开始真正的页面下载。

一个非常常见的重定向是，URL尾部的\被遗漏。如http://xxxx/file，当其获取响应为301时，会重定向至http://xxxx/file/。

缓存Ajax

即缓存从后台服务器请求的数据。通过在Response中设置和添加Expires或Cache-Control。

延迟加载组件

这一点很好理解。熟悉<img>的知道，它有一个属性为loading，当设置为loading="lazy"时，只有当图片在视窗中出现时，图片才会实际加载，而不在视窗体内，图片实际不会加载。

预加载组件

通过预加载组件，你可以利用浏览器闲置的时间，请求你将来需要的组件（如图片、样式和脚本）。这样，当用户访问下一个页面时，你可以在缓存中已经有了大部分的组件，你的页面将为用户加载得更快。现在手机浏览器分页时，普遍有预加载下一页的功能。

减少DOM元素的数量

DOM元素多会使得在JavaScript中的DOM访问速度更慢。例如，当你想添加一个事件处理程序时，如果你在页面上循环浏览500或5000个DOM元素，就会有不同的效果。

在浏览器console中输入document.getElementsByTagName('*').length可以查看页面dom数量。

建议：检查类似页面的dom数量。

文中提到雅虎主页DOM数量小于700。

拆分组件到多个域名

拆分可以更大程度的实现并行下载。在“DNS解析”中我们有过介绍，确保使用的域名不超过2-4个。

最小化iframes的数量

<iframe>的优点包括：有助于处理缓慢的第三方内容，如广告；是一个安全的沙盒；可以并行的下载脚本；

<iframe>的缺点是：即使空白成本也很高；阻碍页面运行；非语义。

避免404错误

执行一个HTTP请求而得到一个无用响应浪费资源。

发表于 更新于 本文字数： 621 阅读时长 ≈ 2 分钟

这是我参与更文挑战的第24天，活动详情查看： 更文挑战

起源

在上一篇文章：使用httpwatch测试网站性能，我们使用httpwatch能够快捷的发现网页的加载速度情况，包括网站资源文件，网站后台接口请求速度，但有时仍然难以发现隐藏在js中的卡顿问题和渲染问题。

在阅读《精通软件性能测试与LoadRunner实战》一书中，发现了作者推荐的几款测试软件，其中包括HttpWatch，Page Speed，Dyna Trace，Yslow等。继Httpwatch后，我们来研究学习一下DynaTrace Ajax。

But，这个软件的官网原本是：ajax.dynatrace.com，但是现在已经打不开了，毕竟这个软件介绍上说是适用于IE, Chrome，但是好像和这个软件关系不大。从其他博客找到软件，试一下吧。

其实，这时候我大概觉得，这个软件大概率已经OUT了！

简介

利用DynaTrace Ajax，可分析页面渲染时间，DOM方法执行时间，甚至看到JS代码的解析时间。

Dyna Trace Ajax是一个详细的低层追踪工具，…显示所有请求和文件在网络中的传输时间，还会记录浏览器Render、CPU消耗、Javascript解析和运行情况等….

下载安装

下载可是费了些周章，一开始我只有一个想法，去官网下，去官网下，去官网下。

但是官网下载页面已经打不开了。

有去各个博客中的网盘上找，也失败了。

最后，只能从各个第三方下载站下载了，慌慌哒，别中毒啊！

最后下载安装包是：dynatrace-AJAX-edition-3.6.0.1053.msi。

image.png

使用

打开后就提示：软件免费，但是需要加入社区！想着输入地址，姓名，密码，Create New Account，但是Not Work，估计版本太老，后端注册相关的也已经没了，暂且试用吧！

image.png

仔细查看，这个页面需要填入IE浏览器执行目录与FireFox目录。OK，Go！

image.png

我们还是和httpwatch一样，先对掘金首页开启一拨测试。如下图所示，Run。

image.png

Not Working, 悲催啊！换几个版本试试吧！

总结

不能说被书坑了吧，今天查了一下书籍《精通软件性能测试与LoadRunner实战》的编写时间，出版时间是2013年，应该说不算太早吧，软件行业更新太快了！