Blog
Blog copied to clipboard
coconilu
:octocat: 前端工程师的思维宫殿
## 浏览器与V8引擎 1. - [x] [网页生命周期与浏览器渲染过程](https://github.com/coconilu/Blog/issues/169) 2. - [x] [借助devtools了解V8引擎运行过程](https://github.com/coconilu/Blog/issues/165) 3. - [x] [V8引擎的特性](https://github.com/coconilu/Blog/issues/166) ## 网络与安全 1. - [x] [HTTP协议栈](https://github.com/coconilu/Blog/issues/168) 2. - [x] [网络安全](https://github.com/coconilu/Blog/issues/170) ## 动效与交互 1. - [x] [通过Volocity.js源码看JS如何顺滑操作动画](https://github.com/coconilu/Blog/issues/172)...
## 介绍 > Protocol buffers are Google's language-neutral, platform-neutral, extensible mechanism for serializing structured data – think XML, but smaller, faster, and simpler. Protocol buffers（简称：protobuf）是googol的语言中立，平台无关，可扩展的序列化数据格式，就像XML，但是比它更小，更快，更简单。 protobuf在数据交换频繁的场景下非常适用。一些大厂，比如腾讯、阿里内部都有孵化类似序列化数据格式。 对比一下XML和JSON，就可以知道protobuf为何这么受欢迎。XML和JSON本质上都是字符串，XML可以用任何字符编码格式，但是JSON规定必须使用utf-8。对于字符串来说，utf-8已经尽量把字符串压缩到尽可能短的二进制了。但是protobuf可以做得更好，它使用了特殊的编码方式和字节偏移量来把一个数据对象压缩到极致，下面会重点介绍怎么办到的。 不仅如此，对于XML和JSON，需要把二进制流转换成字符串，然后进行复杂的词法分析才能还原到原本的数据对象，而protobuf使用特殊的编码格式就可以把对象数据序列化和反序列，不仅体积更小，编码速度也很快（cpu占用更少）。唯一的缺点就是需要额外定义`.proto`文件，但是这个"缺点"可以被另一个需求覆盖，就是前后端在合作的时候，只需要通过`.proto`文件就可以确定交互的字段，可以省去很多沟通成本。 这篇文章围绕proto2，也会给出proto2和proto3的区别，末尾会捎上参考的文章。 ##...
# 性能优化 在互联网，速度是关键。很多案例已经证明： * 网站越快，用户的黏性越高 * 网站越快，用户忠诚度越高 * 网站越快，用户转化率越高 在前端领域，性能优化有两个主要目的： 1. 加载要快，包括静态资源下载速度、服务器响应动态资源的速度 2. 响应要顺畅，用户的操作要即时响应，并且给予提示 ## 优化网络请求 目前，一个普通的Web应用大约就有1MB，有100个左右的资源分散在15台不同的主机上。优化网络请求势在必行。 ### 延迟和带宽 对于网络请求，有两个指标指示请求的质量：延迟和带宽。 > 延迟，分组从信息源发送到目的地所需的时间 > 带宽，逻辑或物理通信路径最大的吞吐量 客户端到服务器的总延迟时间包括： 1. 传播延迟，消息从发送端到接收端需要的时间，是信号传播距离和速度的函数，影响延迟的主要元素 2. 传输延迟，把消息中的所有比特转移到链路中所需的时间，是消息长度和链路速度的函数 3....
## 访问一个网页并观察它的生命周期 浏览网页是最普通不过的操作。 当我们输入URL并点击回车，或者点击某个跳转链接，浏览器是怎么导航到目标网页的呢？ 随便打开一个网页，然后在控制台里输入： ```JAVASCRIPT performance.timing ``` > `performance.timing`并不是标准，现在推荐使用`performance.getEntriesByType("navigation")`，这两个接口相差不大，后面的主要是相对开始导航时间戳。 你将会看到一个对象，它的key列表如下： ``` navigationStart，开始导航 unloadEventStart，开始卸载上一个页面 unloadEventEnd，完成卸载上一个页面 redirectStart，开始重定向 redirectEnd，结束重定向 fetchStart，请求开始 domainLookupStart，域名解析开始 domainLookupEnd，域名解析结束 connectStart，开始建立连接 connectEnd，完成建立连接 secureConnectionStart，开始建立安全连接 requestStart，请求发出 responseStart，接收到响应 responseEnd，接收全部响应 domLoading，当前网页DOM结构开始解析时，Document.readyState属性变为“loading” domInteractive，HTML加载和解析完成，DOM树构建完成（可交互），开始加载内嵌资源，Document.readyState属性变为“interactive” domContentLoadedEventStart，注册的（DOMContentLoaded）事件处理器开始执行，此时DOM树和CSSOM树构建完成（渲染树构建完成） domContentLoadedEventEnd，所有事件处理器执行完毕...
## 顺滑的动画 在网页开发圈子里有一种误解，那就是认为CSS动画是网络中唯一可以实现高性能动画的方法。因为CSS可以借助硬件加速把动画直接交给GPU处理。 事实上，基于JavaScript的动画与基于CSS的动画一样快。之所以JS动画会卡顿，或许是因为你使用定时器（setTimeout、setInterval）去处理动画了，但这不是JS的错，而是你的使用方法错了。 基于JS的动画有如下的优点： 1. 动画中止 2. 动画反转 3. 动画管理 > CSS非常适合实现悬停状态的动画效果（例如：当鼠标位于链接上方时，链接变成蓝色）这类的微互动，这也是通常情况下基本的网页所包含的动画。 ## Velocity.js核心原理 Velocity.js是一个著名的动画库。这是个轻量级的库，但是功能却异常丰富。 GitHub地址奉上：[https://github.com/julianshapiro/velocity](https://github.com/julianshapiro/velocity) 为了研究JS是如何优雅处理动画的，我们通过一段动画效果，观察火焰图去解析： [动画效果演示链接在这](https://codepen.io/coconilu/pen/eYJWQpN)。 核心JS是： ```JavaScript document.querySelector("#v").velocity( { opacity: 0.5, left: 1000, }, { duration: ...
## 安全问题的本质 安全问题的本质是信任的问题。数据从高等级的信任域流向低等级的信任域，是不需要经过安全检查的；数据从低等级的信任域流向高等级的信任域，则需要经过信任边界的安全检查。 比如火车站、飞机场都会有一个必要的程序：安全检查。机场会扫描乘客的行旅箱，检查乘客身上是否携带了打火机、可燃液体等危险物品，目的主要是过滤掉有害的、危险的东西。但是当我们从候机厅出来，是不需要做检查的。 ## 安全方案的原则 ### 1. Secure By Default 原则 “Secure By Default”原则，也可以归纳为白名单、黑名单的思想。 如果更多地使用白名单，那么系统就会变得更安全。因为黑名单需要防范很多未知的情况，而我们不一定能考虑周全。 比如，如果网站只提供Web服务，那么正确的做法是只允许网站服务器的80和443端口对外提供服务。又比如，在网站的生产环境服务器上，应该限制随意安装软件，而需要制定统一的软件版本规范，这个规范的制定，最好是选择白名单的思想来实现。 还有一个最小权限原则，要求系统只授予主体必要的权限，而不要过渡授权，这样能有效地减少系统、网络、应用、数据库出错的机会。 比如，在Linux系统中，一种良好的操作习惯就是使用普通账号登录，在执行需要root权限的操作时，再通过sudo命令完成。 ### 2. 纵深防御原则 纵深防御（Defense in Depth）原则包含两层含义： 首先，要在各个不同层面、不同方面实施安全方案，避免出现疏漏，不同安全方案之间需要相互配合，构成一个整体；其次，要在正确的地方做正确的事情。 第一层含义不是同一个安全方案要做两遍或多边，而是要从不同的层面、不同的角度对系统做出整体的解决方案。 第二城含义，要把防御方案放到最适合的地方去解决。比如XSS防御技术里，不应该粗暴地把尖括号过滤掉，而是在瓶装HTML时处理特殊字符。 ### 3....
## HTTP历史 HTTP协议应该是目前世界上使用最广泛的网络协议了。蒂姆·伯纳斯·李(Tim Berners Lee)1989年提交一个提案，里面描述了了对万维网（World Wide Web）最初的设想，用以满足信息交换的需求。到了1990年10月，Tim完成了万维网三大基础技术的设计：命名方案（URI），通信协议（HTTP）和用来表示信息的标记语言（HTML）。 > 互联网、因特网、万维网的区别： > **互联网**是线路、协议以及通过TCP/IP协议实现数据电子传输的硬件和软件的集合体。 > **Internet（因特网）** 是一个专有名词，指当前全球最大的、开放的、由众多网络互连而成的特定计算机网络（采用tcp/ip）协议族。 因特网是最大的互联网。Internet提供的主要服务有万维网(WWW)、文件传输（FTP)、电子邮件E-mail、远程登录（Telnet）等。 > **万维网**则存在于互联网之上。它是无数个网络站点和网页的集合，构成了因特网主要的部分。它实际上是多媒体的集合，是由超级连接连接而成的。 HTTP协议的版本大致经历了0.9、1.0、1.1、2.0，还有未来的3.0。 ### 1. HTTP 0.9 请求只有一行；没有请求头，没有响应头； 仅能返回超文本（HTML）； 每次请求之后都会关闭。 ### 2. HTTP 1.0 有请求头和响应头；...