[web]《现代前端技术解析》读书笔记
[web]《现代前端技术解析》读书笔记
1　Web前端技术基础
1.1　现代Web前端技术发展概述
前端项⽬代码越来越多，结构越来越复杂，如何实现项⽬的管理将直接决定后期的维护成本。所以我们必须考虑⽤模块化和组件化的思路来管理.
所谓的模块化和组件化是指采⽤代码管理中分治的思想，将复杂的代码结构拆分成多个独⽴、简单、解耦合的结构或⽂件分开管理，使项⽬结构更加清晰。
在页⾯内容较多、较复杂的情况下，为了让⽤户尽可能快速看到内容，我们可以通过异步的⽅式来实现，即将⼀部分内容先展⽰给⽤户，然后根据⽤户的操作，异步加载⽤户需要的其他内容，避免⽤户长时间等待。
怎样保证页⾯下载时消耗的流量尽可能⼩呢？
这可能就需要考虑图⽚的优化处理了，如使⽤更⾼压缩⽐webp格式的图⽚，在图⽚质量不降低的情况下，可以⼤幅度减⼩图⽚的⽹络流量消耗，提⾼图⽚加载速度。
对于重复打开的页⾯，合理地利⽤⽂件缓存就能让浏览器不再向服务器请求重复的内容，这样可以⼤幅度提⾼⽹页资源的加载速度，⽽且幸运的是，浏览器默认可以⽀持⽂件缓存，对于⼀段时间内浏览器的重复请求，服务器可能会返回HTTP的304状态码或者不发送请求，让浏览器直接从本地读取内容。
前端应⽤开发模式演变
1.2　浏览器应⽤基础
从我们打开浏览器输⼊⼀个⽹址到页⾯展⽰⽹页内容的这段时间内，浏览器和服务端都发⽣了什么事情？
1.　在接收到⽤户输⼊的⽹址后，浏览器会开启⼀个线程来处理这个请求，对⽤户输⼊的URL地址进⾏分析判断，如果是HTTP协议就按照HTTP⽅式来处理。
2.　调⽤浏览器引擎中的对应⽅法，⽐如WebView中的loadUrl⽅法，分析并加载这个URL地址。
3.　通过DNS解析获取该⽹站地址对应的IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向⽹站⽬的IP发出GET请求。
4.　进⾏HTTP协议会话，浏览器客户端向Web服务器发送报⽂。
5.　进⼊⽹站后台上的Web服务器处理请求，如Apache、Tomcat、Node.js等服务器。
6.　进⼊部署好的后端应⽤，如PHP、Java、JavaScript、Python等后端程序，到对应的请求处理逻辑，这期间可能会读取服务器缓存或查询数据库等。
7.　服务器处理请求并返回响应报⽂，此时如果浏览器访问过该页⾯，缓存上有对应资源，会与服务器最后修改记录对⽐，⼀致则返回304，否则返回200和对应的内容。古典名著手抄报
8.　浏览器开始下载HTML⽂档（响应报头状态码为200时）或者从本地缓存读取⽂件内容（浏览器缓存有效或响应报头状态码为304时）。
9.　浏览器根据下载接收到的HTML⽂件解析结构建⽴DOM（DocumentObjectModel，⽂档对象模型）⽂档树，并根据HTML中的标记请求下载指定的MIME类型⽂件（如CSS、JavaScript脚本等），同时设置缓存等内容。
10.　页⾯开始解析渲染DOM，CSS根据规则解析并结合DOM⽂档树进⾏⽹页内容布局和绘制渲染，JavaScript根据DOM　API操作DOM，并读取浏览器缓存、执⾏事件绑定等，页⾯整个展⽰过程完成。
通常我们认为浏览器主要由七部分组成：⽤户界⾯、⽹络、JavaScript引擎、渲染引擎、UI后端、Jav
aScript解释器和持久化数据存储。
⽤户界⾯:
⽤户界⾯包括浏览器中可见的地址输⼊框、浏览器前进返回按钮、打开书签、打开历史记录等⽤户可操作的功能选项。
浏览器引擎:
浏览器引擎可以在⽤户界⾯和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核⼼。
渲染引擎:
浏览器渲染引擎的功能是解析DOM⽂档和CSS规则并将内容排版到浏览器中显⽰有样式的界⾯，也有⼈称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。
⽹络:
⽹络功能模块则是浏览器开启⽹络线程发送请求或下载资源⽂件的模块，例如DOM树解析过程中请求
静态资源⾸先是通过浏览器中的⽹络模块发起的，UI后端则⽤于绘制基本的浏览器窗⼝内控件，⽐如组合选择框、按钮、输⼊框等。
JavaScript引擎:
JavaScript解释器则是浏览器解释和执⾏JavaScript脚本的部分，例如V8引擎。
UI后端:
浏览器数据持久化存储则涉及cookie、localStorage等⼀些客户端存储技术，可以通过浏览器引擎提供的API进⾏调⽤。
⽬前，⽤户使⽤的主流浏览器内核有4类：
Trident内核:
例如Internet　Explorer、360浏览器、搜狗浏览器等；
新教师自我鉴定Gecko内核:
Netscape6及以上版本，还有Firefox、SeaMonkey等；
Presto内核:
主要是Opera7及以上还在使⽤（Opera内核原来为Presto，现使⽤的是Blink内核）；
Webkit内核:
主要是Safari、Chrome浏览器在使⽤的内核，也是特性上表现较好的浏览器内核。
另外，Blink内核其实是WebKit的⼀个分⽀，添加了⼀些优化新特性，例如跨进程的iframe，将DOM移⼊JavaScript中来提⾼JavaScript对DOM的访问速度等，⽬前较多的移动端应⽤内嵌的浏览器内核也渐渐开始采⽤Blink。
渲染引擎的主要⼯作流程:
渲染引擎在浏览器中主要⽤于解析HTML⽂档和CSS⽂档，然后将CSS规则应⽤到HTML标签元素上，并将HTML渲染到浏览器窗⼝中以显⽰具体的DOM内容。
解析HTML构建DOM树时渲染引擎会先将HTML元素标签解析成由多个DOM元素对象节点组成的且具有节点⽗⼦关系的DOM树结构，然后根据DOM树结构的每个节点顺序提取计算使⽤的CSS规则并重新计算DOM树结构的样式数据，⽣成⼀个带样式描述的DOM渲染树对象。DOM渲染树⽣成结束后，
进⼊渲染树的布局阶段，即根据每个渲染树节点在页⾯中的⼤⼩和位置，将节点固定到页⾯的对应位置上，这个阶段主要是元素的布局属性（例如position、float、margin等属性）⽣效，即在浏览器中绘制页⾯上元素节点的位置。
接下来就是绘制阶段，将渲染树节点的背景、颜⾊、⽂本等样式信息应⽤到每个节点上，这个阶段主要是元素的内部显⽰样式（例如color、background、text-shadow等属性）⽣效，最终完成整个DOM在页⾯上的绘制显⽰。
这⾥要关注的是渲染树的布局阶段和绘制阶段。
页⾯⽣成后，如果页⾯元素位置发⽣变化，就要从布局阶段开始重新渲染，也就是页⾯重排，所以页⾯重排⼀定会进⾏后续重绘；
如果页⾯元素只是显⽰样式改变⽽布局不变，那么页⾯内容改变将从绘制阶段开始，也称为页⾯重绘。重排通常会导致页⾯元素⼏何⼤⼩位置发⽣变化且伴随着重新渲染的巨⼤代价，因此我们要尽可能避免页⾯的重排，并减少页⾯元素的重绘。
Webkit内核渲染DOM流程
Gecko内核渲染DOM流程
Webkit内核解析后的渲染对象被称为渲染树（RenderTree），⽽Gecko内核解析后的渲染对象则称为Frame树（FrameTree）。
DOM结构解析⽰意图
HTML⽂档解析过程是将HTML⽂本字符串逐⾏解析⽣成具有⽗⼦关系的DOM节点树对象的过程。
查看元素的原始类型
let　ateElement('div');
let　type=String.call(element).slice(8,-1);//"HTMLDivElement"
CSS解析和HTML解析类似，⾸先也要通过词法解析⽣成CSS分析树，⽽且也使⽤特定的CSS⽂本语法来实现，不同的是，HTML是使⽤类似XML结构的语法解析⽅式来完成分析的。
⼀个节点上多条不同的样式规则是通过权重的⽅式来计算的。关于CSS规则的权重计算，⼀般认为是
!important>内联样式规则（权重1000）>id选择器（权重100）>类选择器（权重10）>元素选择器（权重1）
在渲染树⽣成阶段，当多个CSSRule对应到同⼀个元素节点中时，这种权重计算⽅式的作⽤就体现出来了，⼀般只有权重最⾼的样式规则才会⽣效。
1.2.3　浏览器数据持久化存储技术
⼀般数据持久化存储主要是针对浏览器的，所以我们统称为浏览器缓存（BrowserCaching），浏览器缓存是浏览器端⽤于在本地保存数据并进⾏快速读取以避免重复资源请求的传输机制的统称。
有效的缓存可以避免重复的⽹络资源请求并让浏览器快速地响应⽤户操作，提⾼页⾯内容的加载速度。
HTTP⽂件缓存
浏览器HTTP⽂件缓存判断机制的流程图。
1．浏览器会先查询Cache-Control（这⾥⽤Expires判断也是可以的，但是Expires⼀般设置的是绝对过期时间，Cache-Control设置的是相对过期时间）来判断内容是否过期，如果未过期，则直接读取浏览器端缓存⽂件，不发送HTTP请求，否则进⼊下⼀步。
2．在浏览器端判断上次⽂件返回头中是否含有Etag信息，有则连同If-None-Match⼀起向服务器发送请求，服务端判断Etag未修改则返回状态304，修改则返回200，否则进⼊下⼀步。
3．在浏览器端判断上次⽂件返回头中是否含有Last-Modified信息，有则连同If-Modified-Since⼀起向服务器发送请求，服务端判断Last-Modified是否失效，失效则返回200，未失效则返回304。
4．如果Etag和Last-Modified都不存在，直接向服务器请求内容。
HTTP缓存可以在⽂件缓存⽣效的情况下让浏览器从本地读取⽂件，不仅加快了页⾯资源加载，同时节省⽹络流量，所以在Web站点配置中要尽可能利⽤缓存来优化请求过程。
在HTML中，我们可以添加<meta>中的Expires或Cache-Control来设置，需要注意的是，⼀般这⾥Cache-Control设置max-age的时间单位是秒，如果同时设置了Expires和Cache-Control，则只有Cache-Control的设置⽣效。
<meta　http-equiv="Expires"　content="Mon,20Jul201623:00:00GMT"/>
<meta　http-equiv="Cache-Control"　content="max-age=7200"/>
电信免费提速
当然服务端也需要进⾏对应设置，Node.js服务器可以使⽤中间件来这样设置静态资源⽂件的缓存时间，例如我们可以结合KoaWeb框架和koa-static中间件如下设置实现。
const　static=require('koa-static');
const　app=koa();
app.use(static('./pages',{
　maxage:7200
}));
localStorage
localStorage只⽀持简单数据类型的读取，为了⽅便localStorage读取对象等格式的内容，通常需要进⾏⼀层安全封装再引⼊使⽤。
let　rkey=/^[0-9A-Za-z_@-]*$/;
let　store;
//转换对象
function　init(){
　if(typeof　store==='undefined'){
  store=window['localStorage'];
　}
　return　true;
}
//判断localStorage的key值是否合法
function　isValidKey(key){
　if(typeof　key!=='string'){
  return　false;
　}
　return　st(key);
}
闰二月年不宜做的事
exports={
　//设置localStorage单条记录
　set(key,value){
  let　success=false;
  if(isValidKey(key)&&init()){
  　try{
    value+='';
    store.setItem(key,value);
    success=true;
  　}catch(e){}
  }
  return　success;
　},
三年级手抄报中秋节　//读取localStorage单条记录
　get(key){
  if(isValidKey(key)&&init()){
  　try{
符号网名    return　Item(key);
  　}catch(e){}
  }
  return　null;
　},
　//移除localStorage单条记录
　remove(key){
  if(isValidKey(key)&&init()){
  　try{
    veItem(key);
    return　true;
  　}catch(e){}
  }
  return　false;
　},
　//清除localStorage所有记录
　clear(){
  if(init()){
  try{
  for(let　key　in　store){
    　veItem(key);
    }
    return　true;
  　}catch(e){}
  }
  return　false;
　}
};
尽管单个域名下localStorage的⼤⼩是有限制的，但是可以⽤iframe的⽅式使⽤多个域名来突破单个页⾯下localStorage存储数据的最⼤限
制。
另外使⽤浏览器多个标签页打开同个域名页⾯时，localStorage内容⼀般是共享的。
sessionStorage
sessionStorage和localStorage的功能类似，但是sessionStorage在浏览器关闭时会⾃动清空。sessionStorage的API和localStorage完全相同。由于不能进⾏客户端的持久化数据存储，实际项⽬中sessionStorage的使⽤场景相对较少。
Cookie
Cookie（或Cookies），指⽹站为了辨别⽤户⾝份或Session跟踪⽽储存在⽤户浏览器端的数据。Cookie信息⼀般会通过HTTP请求发送到服务器端。
⼀条Cookie记录主要由键、值、域、过期时间和⼤⼩组成，⼀般⽤于保存⽤户的⽹站认证信息。
浏览器中Cookie的最⼤长度和单个域名⽀持的Cookie个数由浏览器的不同来决定。
在InternetExplorer7以上版本、Firefox等浏览器中，⽀持的Cookie记录最多是50条，Chrome、Safari浏览器上则没有限制，Opera浏览器上最多⽀持30条，⽽且我们通常认为Cookie的最⼤长度限制为4KB（4095字节到4097字节）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。