读《现代前端技术解析》有感
一、简单介绍
这本书标榜的是现在前端技术，但是里面设计到的部分技术还是相对比较落后的，但不妨碍这本书成为一本好的查漏补缺的指南，如果是在实际的工作中这本书可以说是起不到什么的效果，但是对于即将毕业，或者刚刚出来工作，又或者是求职找工作的人来说可以起到极好的引导作用，日常面试的各个方面都有涉及(仅针对小公司的面试)，但是不深刻。里面重点展示的是技术的应用层面上的东西，所以也比较好理解，一些像设计模式，算法，数据结构，JS语法深入部分这本书不曾提及，所以如果为了全面了解，为了找工作，建议读一读这本书；为了更好地工作，还是建议大家抽空看看经典的读物。
二、重点知识梳理
2.1 web Component
一种原生的支持模块化的方法，但是目前仅仅在chrome新版得到全面的支持，其他浏览器暂时不支持此特性，这个特性的好处是可以直接将模块与页面进行解耦操作，目前虽然原生没有全面的支持，但是通过webpack打包等形式都已经可以实现了，例如vue中的模块化开发就是基于这个思想。目前虽然不是主流，但是未来可能会成为一种标准。
用法是通过document.registerElement接口来注册。
例如，我们注册一个插件名为X-foo，那么我们这样操作
document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() { ... }
},
...
})
})
如下形式去调用
<div> <x-foo></x-foo> </div>
2.2 怎样加快页面的显示
1. 使用异步的方式来加载页面，先让一部分的内容先展示出来，再根据用户的操作加载更多的内容
2. 将图片替换成为压缩比更高的webp格式图片
3. 打开重复的页面使用304状态码，达到利用浏览器缓存
2.3 页面是怎样从请求发起到展现出来的
1. 用户输入一个网址，浏览器开启一个线程处理请求，对用户输入的URL进行分析处理，如果是使用了HTT协议的话，那么会用HTTP来处理
2. 调用JavaScript引擎的方法，例如，webview调用loadUrl方法，分析并加载这个URL
3. 连同浏览器的cookie,userAgent等信息向网站目的地IP发起GET请求
4. 进入后台web服务器处理请求
5. 进入部署好的后台应用，找到对应的处理逻辑，这期间可能会读取服务器缓存或者读取数据库
6. 服务器处理请求并返回响应报文，浏览器的缓存资源的时间会跟服务器的最后修改记录时间做对比，一致返回304，否则返回200
7. 如果为200的时候，下载对应的HTML文档，304直接读取缓存
2.4 浏览器的组成结构
示意图如下：
1. 如图我们可以知道浏览器引擎和JavaScript引擎不是同一回事，这个也就说明了为什么JavaScript是单线程但是浏览器可以异步发起请求的问题。
2. 我们重点关注的是渲染引擎和一些存储，因为其他部分开发者无法操作
2.5 各个浏览器渲染引擎之间的差异与渲染引擎是怎样工作的
以webkit内核和Gecko内核为例：
对比之后我们可以发现Gecko内核是需要先解析HTML然后再解析CSS，webkit内核是并行执行的。所以webkit内核在解析CSS这方面会相对高效
2.6 CSS的权重问题
!important(最高权重) > 内联样式规则(权重1000) > id选择器(权重100) > 类选择器(权重10) > 元素选择器
2.7 cookie的种类与区别
cookie一般是有两种:session cookie和持久型 cookie
1. session cookie一般未设置过期时间，只要关闭浏览器窗口，cookie就会消失
2. 持久型cookie一般会设置cookie过期时间，关闭后再次打开浏览器窗口都有效
2.8 前端开发工具
1. 前端高效开发工具：vscode、webstorm、sublime
2. 前端调试工具: chrome devtool
3. 网络辅助工具:fiddler charles wireshark
4. 前端远程调试工具：vorlon.js weinre VConsole
2.9 web安全知识有哪些？大致介绍一下？
主要的web安全有XSS,SQL注入，CSRF
XSS:通常是由页面可解析的内容未经过处理就直接插入到页面导致。例如插入document.cookie来获取cookie
SQL注入：输入框的内容未经过处理就直接传给数据库，导致SQL插入到数据库中
CSRF：举一个例子，假设有一个假冒网站，用户向其中提交用户名和密码，这个时候假冒网站就会向真实的网站发起请求，跳转到真实的网站，但是这个时候假冒网站已经就记录下了用户的用户名和密码。
2.10 网络劫持
前端主要的网络劫持有DNS劫持和HTTP劫持
1. DNS劫持：DNS被篡改解析的路径导致网站解析出错，目前这种劫持较少，这要发生这种劫持是运营商所为
2. HTTP劫持：一般来说这种劫持的HTML，CSS ,JS都是正常的。但是在网站response的时候，网络运营商会劫持添加一些脚本，主要表现在使用HTTP请求有时候会莫名其妙的出现一些小广告之类的。解决的方法是HTTP换成HTTPS
2.11 native交互协议
web调用native
主要web调用native的流程是通过uri和addJavascriptInterface接口来实现的
主要的途径是uri，是通过url向native发起请求，native调用系统的底层来实现的
native协议调用web
原理是:HTML5编写的Javascript暴露到全局中，然后在native中调用loadUrl方法来实现调用javascript
2.12 怎样提交元素的加载解析？
1. 直接通过懒加载来实现
2. 通过使用AMP来实现HTML元素的懒加载（对于video,table等耗时的元素这样做会加快页面的加载速度，但是目前这些方案并不是前端的主流解决方法【博主观点】）
2.13 HTML5中新增了哪些新的标签或者属性？
<header> <video> <source /> <article> <time> <datalist> <command />
<input>新增了 autocomplete，placeholder，autofocus,required属性，新增了email,number,color,range,search,date
三、总体评价
这本书说不上好，也说不上特别的不好，总体上就是用来查漏补缺的，面试可用。书中的内容越往后越稀薄，建议读读前几章就好了。
