读《现代前端技术解析》有感

一、简单介绍

这本书标榜的是现在前端技术,但是里面设计到的部分技术还是相对比较落后的,但不妨碍这本书成为一本好的查漏补缺的指南,如果是在实际的工作中这本书可以说是起不到什么的效果,但是对于即将毕业,或者刚刚出来工作,又或者是求职找工作的人来说可以起到极好的引导作用,日常面试的各个方面都有涉及(仅针对小公司的面试),但是不深刻。里面重点展示的是技术的应用层面上的东西,所以也比较好理解,一些像设计模式,算法,数据结构,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

 

三、总体评价

这本书说不上好,也说不上特别的不好,总体上就是用来查漏补缺的,面试可用。书中的内容越往后越稀薄,建议读读前几章就好了。

 

 

 

posted @ 2018-05-13 21:30 谢灿勇 阅读(...) 评论(...) 编辑 收藏