系统架构图是为了抽象地表示软件系统的整体轮廓和各个组件之间的相互关系和约束边界，以及软件系统的物理部署和软件系统的演进方向的整体视图。一图胜千言。要让干系人理解、遵循架构决策，就需要把架构信息传递出去。架构图就是一个很好的载体。

虽然 HTTP/2.0 解决了队头阻塞问题，但是每个 HTTP 连接都是由 TCP 进行连接建立和传输的，TCP 协议在处理包时有严格的顺序要求。这也就是说，当某个包切分的 stream 由于某些原因丢失后，服务器不会处理其他 stream，而会优先等待客户端发送丢失的 stream 。

跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为 XSS。恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。

本文亲测总结使用 docker 方式部署日志检测系统，filebeat 从监控生成日志，然后将日志输出到 logstash 中，logstash 对数据进行清洗格式化，包括建立索引，存入到 elasticsearch 中。kibana 负责从 es 读取数据进行处理。

本文介绍一个非常好用的Linux防止暴力攻击的工具。DenyHosts 是 Python 语言写的一个程序，它会分析 sshd 的日志文件，当发现重复的攻击时就会记录 IP 到/etc/hosts.deny 文件，从而达到自动屏 IP 的功能。

本文总结了JS开发中常用到的48种小方法，总有一个是你用到的，先收藏起来，后边慢慢查看。检测数据是不是除了 symbol 外的原始数据。isPrimitive：检测数据是不是原始数据。isObject：判断是否引用类型。isObjectLike：检查 value 是否为类对象。getRawType：获取数据类型。isPlainObject：判断数据是否 Object 类型的数据。isArray：判断数据是不是数组类型的数据。isRegExp：判断数据是不是正则对象。isDate：判断数据是不是时间对象。

前端页面埋点上报是重要功能，这里主要介绍常用的4中方法，1. 同步 XMLHttpRequest，2. img.src，3.navigator.sendBeacon 4.fetch keepalive 文章对这四种方法的进行了优缺点对比。

本文主要带你了解webpack代码分模块打包方法，代码懒加载方法，代码懒加载方法用的太多也会变慢的预加载方法等在工作中常遇到的打包问题。懒加载能加快网页的加载速度，如果你把详情页、弹窗等页面全部打包到一个 js 文件中，用户如果只是访问首页，只需要首页的代码，不需要其他页面的代码，加入多余的代码只会使加载时间变长，所以我们可以对路由进行懒加载，只有当用户访问到对应路由的时候，再去加载对应模块。

我们的软件系统往往是要面向持续性的迭代的，在开发之初很难把所有需要支持的功能都想清楚，有时候还需要借助社区的力量去持续生产新的功能点，或者优化已有的功能。这就需要我们的软件系统具备一定的可扩展性。插件模式就是我们常常选用的方法。事实上，现存的大量软件系统或工具都是使用插件方式来实现可扩展性的。比如大家最熟悉的小可爱——VSCode，其插件拥有量已经超越了他的前辈 Atom，发布到市场中的数量目前是 24894 个。

在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。