[上海|结业弟子]JS-陈益杰|2019年11月08日的日报-技能树.IT修真院

发表于： 2019-11-08 23:43:10

0 1002

今天完成的事情：

1 看了些面试题

明天计划的事情：

1 调接口，复习

遇到的问题：

1 暂无

收获：

sass 和 less 写法的一些区别

1 实现方式：Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。

2 定义变量：Less定义变量时使用前缀：@；Sass定义变量时使用前缀：$。

3 混合(Mixins)：Less中使用混合时，只需在classB中根据classA的命名来是用；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。

4 解析方式：Less可以向上/向下解析；Sass只能向上解析。

5 变量的作用域：Less中的变量有全局和局部之分；Sass可以变量可以理解为都是全局的，但可以通过在变量后面跟!default，在引入Sass文件之前改变变量的属性值来解决这一问题。

6 函数判断循环：比起Less，Sass中增加了条件语句（if、if...else）和循环语句（for循环、while循环和each循环）还有自定义函数

7 输出设置：Less没有输出设置，Sass提供4中输出选项：nested(默认), compact, compressed 和 expanded。(css.map是一个json格式文件，记录了scss源文件到css文件的映射信息)

url发送到浏览器到浏览器加载有哪些步骤

总体来说分为以下几个过程:

浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到下面2操作。

浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；

操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；

路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；

2 DNS解析 - TCP连接 - 发送HTTP请求 - 服务器处理请求并返回HTTP报文 - 浏览器解析渲染页面 - 连接结束

DNS解析

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。

TCP连接

HTTP协议是使用TCP作为其传输层协议的，当TCP出现瓶颈时，HTTP也会受到影响。

HTTP请求

其实这部分又可以称为前端工程师眼中的HTTP，它主要发生在客户端。发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。

服务器处理请求并返回HTTP报文

自然而然这部分对应的就是后端工程师眼中的HTTP。后端从在固定的端口接收到TCP报文开始，这一部分对应于编程语言中的socket。它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行，我使用过的Web服务器有Tomcat, Jetty和Netty等等。HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

浏览器解析渲染页面

浏览器在收到HTML,CSS,JS文件后，它是如何把页面呈现到屏幕上的？下图对应的就是WebKit渲染的过程。