《现代前端技术解析》读书笔记

这本书并没有讲太多的深层次的技术，讲的都是一些原理与思路，非常适合想要从宏观上了解前端的读者。本笔记按照里面的章节记录一些书中有意思的部分。

《现代前端技术解析》

Web前端技术基础

前端开发模式的演变：静态黄页、服务器组装动态网页数据、后端为主的MVC、前后端分离、纯前端MV*为主与中间层直出、前端Virtual DOM与MNV*前后端同构。

浏览器的组成部分：用户界面、网络、JavaScript引擎、渲染引擎、UI后端、JavaScript解释器和持久化数据存储。

渲染引擎工作流程：解析HTML构建DOM树、构建渲染树、渲染树布局阶段、绘制渲染树。

页面生成后，如果页面元素位置发生变化，就要从布局阶段开始重新渲染，这个过程叫做重排。如果页面元素只是显示样式改变而布局不变，那么页面内容改变将从绘制阶段开始，也成为页面的重绘。重排通常会导致页面元素几何大小位置发生变化且伴随着重新渲染的巨大代价，因为我们要尽量减少重排。

CSS权重：!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 继承的样式

浏览器所支持的缓存方式：HTTP文件缓存、LocalStorage、SessionStorage、indexDB、Web SQL、Cookie、cacheStorage、Application Cache。

Chrome浏览器HTTP缓存资源位置：DevTools > Application > Frames

HTTP文件缓存判断流程，这一部分比较重要，单独成章，请看这里。

sessionStorage关闭浏览器会自动清空。

Cookie一般会通过HTTP请求发送到服务端，通常认为最大长度限制是4KB，可以分为Session Cookie和持久型Cookie。其中Session Cookie保存在内存中，浏览器关闭会消失；持久型Cookie保存在硬盘中。

调试node:

1 2	npm install -g node-inspector node-debugger index.js

然后使用node-inspector命令会给出一个url，浏览器访问这个url就可以调试了。

前端与协议

通常一个完整的HTTP报文由头部、空行、正文三部分组成。空行用于区分报文头部和报文正文，由一个回车符和一个换行符组成。

HTTP1.1标准发布与1999年，相对于1.0增加了协议扩展切换、缓存、部分文件传输优化、长连接、消息传递、host头域、错误提示等一些重要的增强特性。

HTTP1.1长连接机制是通过请求头中的keep-alive头信息来控制的。默认是包含此信息的。1.0如果添加的话如果服务器支持的情况下会返回一个keep-alive表示文件请求可以复用之前的请求。

协议扩展切换指的是HTTP1.1协议支持在请求头信息中添加Upgrade头并让客户端通过头部标识令服务器知道它能够支持其他备用通讯协议的一种机制。如WebSocket连接时浏览器会在头信息中添加Connection:Upgrade和Upgrade:websocket告诉浏览器，后面要进行协议切换为WebSocket协议，如果浏览器支持的话则在响应头中返回上面2个头信息，并返回101的响应码。

部分文件传输优化说的是HTTP1.1不仅可以传输文本，也可以传输二进制数据，如FormData。

HTTP2.0的特性：

完全采用二进制格式来传输数据。
使用TCP多路复用的方式来降低网络请求连接时建立与关闭的开销。
支持传输流的优先级和流量控制机制，所以不需要再把CSS放在HTML顶部，JavaScript放在HTML底部，HTTP2.0自动就会做这些事情。
支持服务端推送。
强制使用SSL协议，所以肯定是HTTPS协议。

常见的网络攻击手段：XSS、SQL注入、CSRF（cross-site Request Forgery,跨站点请求伪造）。

XSS可以通过转义HTML标签来解决，SQL注入可以使用预处理来解决，CSRF可以通过添加Token来解决（相对的）。

DNS劫持，攻击者劫持了DNS，使得域名转化为IP的过程，指向了其他的IP。
HTTP劫持，读取或者修改HTTP报文中的内容，常用的处理措施就是使用HTTPS请求。

HTTPS协议是通过加入了SSL层来加密HTTP数据进行安全传输的HTTP协议，默认端口是443。

服务端主动找客户端的方式：WebSocket、轮询、长轮询、DDP（普及程度不高）、HTTP流。

前端三层结构与应用

页面使用table标签会比较慢，因为table会等表格内全部内容都解析完成后进行一次性渲染。

ES7常用的三种特性：幂指数操作符（2**3 === 8），Array.prototype.includes，async/await。

前端统一CSS样式的方式：reset（清楚浏览器的默认样式）、normalize（使用某一种默认样式）、neat（两者结合，需要根据网页设计特点来）。

前端实现动画的五种方式：JavaScript操作DOM实现，SVG动画，CSS transition、CSS animation、Canvas。

响应式设计的2种方法：

前端或者后端判断userAgent来跳转不同的页面来完成不同设备浏览器的适配（常见的移动端以m.开头的域名）。
使用媒体查询，自动改变页面布局。

常用的rem初始值定义方法：

1rem = 屏幕宽度 * 屏幕分辨率 / 10也就是1rem想到于屏幕宽度的10%，所有尺寸相当于使用百分比来布局的。
1rem = 屏幕宽度 / 320 * 10也就是1rem想到于320px屏幕上的10像素。

本章其他内容主要为HTML、CSS、JS的一些基础知识以及ES6的一些内容，这里就不再列出来了。

前端项目与技术实践

前端通用规范：三层架构分离（HTML/CSS/JS）、缩进（通常一个tab四个空格）、内容编码（<meta charset="UTF-8">）、标签属性等使用小写、代码每行不超过120个（或80个）字符、多写注释、行尾去掉多于的空格与符号。

for-in循环里面要尽量含有hasOwnProperty防止访问原型中的属性或方法。

常用的模块化方法有：AMD（requireJS）、CMD（seaJS）、CommonJS（node规范）、import/export等。

自动化构建常用流程：读取入口文件、分析模块引用、按照引用加载模块、模块文件编译处理、模块文件合并、文件优化处理、写入生成目录。

简单上报用户点击位置的代码：

1
2
3

$(document).on("click","body",function (e){
    report(e.pageX,e.pageY);
})

作为前端的开发者，学习的方式有很多，比如看别人的技术博客，研究最新的技术方向、阅读开源代码、挺技术分享会、看书等。

一切技术最终的目的都是为产品实现服务的，切记勿过分追求技术，建议大家看一两本关于产品经理方向的书籍。

到此，我们记录了一些书中重点的部分，此外还有很多一部分内容讲的是MVVM的思想、以及前端跨栈开发、一些技术的实践、对前端未来的一些展望等，由于内容比较多就不展开详细说了，感兴趣的小伙伴可以去看看书。