前端知识篇——（八）

CSS 题目：box-sizing

JS 题目： let & var & const 的区别

其他题目：性能优化有哪些

CSS

题目：box-sizing

（1）盒模型

html页面的结构都是由一系列HTML标签构成，页面上的每个html元素，都被解析为一个矩形盒，而CSS盒模型就是这种矩形盒的解构模型。CSS盒模型，它由内到外、被四条边界Content edge、Padding edge、Border edge和Margin edge划分为四个区域。

对盒模型支持的变化历程：

IE5-采用IE盒模型

IE6、7的标准模式放弃了IE盒模型，转为使用W3C盒模型

IE8+借助box-sizing，又重新提供了对IE盒模型的支持

W3C盒模型（标准盒模型）

css 的width 不包括 border 、padding

      .w3c{
          width: 100px;
          height: 100px;
          background-color: burlywood;
          padding: 10px;
          margin: 2px;
          border: 2px solid bisque;
      }

这里写图片描述

元素 width = 100px
需要占据的空间宽度 width = 124+10*2+2*2+2*2 = 128px

IE 盒模型

css 的width 包括 border 、padding

从元素布局的角度来看，IE盒模型的width和height的语义更符合人类的直观认知（盒子的尺寸、轮廓应该以border为界）；

在弹性布局和响应式布局场景，IE盒模型比W3C盒模型表现更佳（更容易实现、浏览器兼容性更好）。

      .ie{
          width: 100px;
          height: 100px;
          background-color: burlywood;
          padding: 10px;
          margin: 2px;
          border: 2px solid bisque;
          box-sizing: border-box;
      }

这里写图片描述

内容 width = 76 px
元素 width = 76+ 2*2 + 2* 10 = 100px
需要占据的空间宽度 width = 100px + 2*2 = 104px

关于margin

不管是在IE盒模型还是W3C标准盒模型中，margin产生的效果是一样的，都是会占用实际的空间，但是不改变盒子大小

（2）box-sizing

content-box (默认) W3C 模型
border-box IE 模型

https://www.cnblogs.com/GumpYan/p/5706863.html

JS

题目： let & var & const 的区别，为什么 var 可以重复声明

基本概念

var声明了一个变量，并且可以同时初始化该变量。
let语句声明一个块级作用域的本地变量，并且可选的赋予初始值。
const声明创建了一个只读的变量，并且必须同时初始化该变量，作用域与 let 相同

变量声明提升

var 声明的变量，在预解析阶段会被提升到函数的顶端，所以在定义之前使用该变量，输出的是undefined，而 let 、const 声明的变量没有被提升，在定义之前使用该变量会输出 ReferenceError

// var 
console.log(foo); // 输出undefined
var foo = 2;

// let  
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

var tmp = 123;

if (true) {
  tmp = 'a'; // ReferenceError
  let tmp;
}

重复声明

var是允许在相同作用域内重复声明同一个变量的，而let与const不允许

       let a = 10;
       var a  = 100; 
       // redeclaration of let a

       var a  = 100; 
       let a = 10;
       // redeclaration of var a   

       var a  = 100; 
       var a = 10;
      // ok

       let a  = 100; 
       let a = 10;   
      // redeclaration of let a

js 代码的运行：

编译器负责词法分析、语法分析、代码生成等工作
作用域负责维护所有的标识符（变量）
引擎负责整个代码的编译以及运行

对于 var a = 2；

 1.首先编译器对代码进行分析拆解，从左至右遇见var a，则编译器会询问作用域是否已经存在叫a的变量了，如果不存在，则招呼作用域声明一个新的变量a，若已经存在，则忽略var 继续向下编译，这时a = 2被编译成可执行的代码供引擎使用。

 2.引擎遇见a=2时同样会询问在当前的作用域下是否有变量a，若存在，则将a赋值为2。若不存在，则顺着作用域链向上查找，若最终找到了变量a则将其赋值2，若没有找到，则招呼作用域声明一个变量a并赋值为2（此时执行a变量为全局变量，但在严格模式下JS会直接抛出异常：a is not defined）。

综上：由于第一步编译器忽略了重复声明的var，若作用域中已有a，则重复声明会发生值的覆盖而并不会报错

其他

题目：性能优化有哪些

减少DNS查询

DNS(Domain Name System)：负责将域名URL转化为服务器主机IP
TTL(Time To Live)：表示查找返回的DNS记录的一个存活时间，过期则这个DNS记录将被抛弃。

DNS查找流程：首先查看浏览器缓存是否存在，不存在则访问本机DNS缓存，再不存在则访问本地DNS服务器。所以DNS也是开销，在DNS查找完成前，浏览器不能从host那里下载任何东西。

使用CDN

CDN（contentdistribute network，内容分发网络）的本质是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据，即所谓网络访问第一跳，如下图。

这里写图片描述

CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。
CDN缓存的一般是静态资源，如图片、文件、CSS、script脚本、静态网页等，但是这些文件访问频度很高，将其缓存在CDN可极大改善网页的打开速度。

图片
1) LazyLoad Images

这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

2) 雪碧图

即把多张小图片合并为一张图，利用CSS -background-position调整图片显示位置。

减少DOM元素的数量
减少DOM操作

渲染的流程：
1.下载HTML文档
2. 解析HTML文档，生成DOM
3.下载文档中引用的CSS、JS
4. 解析CSS样式表，生成CSSOM
5. 将JS代码交给JS引擎执行
6. 合并DOM和CSSOM，生成Render Tree
7. 根据Render Tree进行布局layout（为每个元素计算尺寸和位置信息）
8. 绘制每个层中的元素（绘制每个瓦片，瓦片这个词与GIS中的瓦片含义相同）
9. 执行图层合并（Composite Layers）

js、css 和 html压缩技术

当我们写代码的时候，会使用缩进和注释，这些方法无疑会让你的代码简洁而且易读，但它们也会在文档中添加多余的字节。

js、css

1) CSS放在页面最上部，javascript放在页面最下面

浏览器会在下载完成全部CSS之后才对整个页面进行渲染，如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。

Javascript则相反，浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript，这时放到底部就不合适了。

2) 合并css、 js 文件

3) 使用外部的 css、 js 文件

在用户不带缓存访问页面的时候，内联所有的js和css的效率更快，原因是外置js和css带来额外的http请求开销

而使用外部的 css、 js 文件会产生更快的访问速度，这是由于外部css、 js 文件能被浏览器缓存，当下次再请求相同的css、 js 时，浏览器将不会再发出HTTP请求，而是使用缓存的css、 js ，减少了HTTP请求数。

浏览器缓存

浏览器请求处理流程

这里写图片描述

对于css、javascript、logo、图标等内容比较固定，不经常被修改的，如果将这些文件缓存在浏览器中，减少HTTP请求次数或文件下载次数，可以极好的改善性能。

浏览器缓存分为两类：强缓存，协商缓存。

强缓存：不会发起HTTP请求，直接从浏览器缓存中读取文件。

    HTTP 1.0中，采用Expires头指定资源过期时间；
    HTTP 1.1中，采用Cache-Control: max-age指定资源被缓存多久；
    其中 Cache-Control优先级比Expires高

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种(暂不分析协商缓存过程)，如下：

这里写图片描述

协商缓存：向服务器发起HTTP请求，如果资源文件并未更新，response响应码即为304，随后从浏览器缓存中下载该文件，并不会从服务器下载。

    HTTP 1.0中，采用Last-Modified(response header)和If-Modified-Since(request header)来指定资源过期时间；
    HTTP 1.1中，采用E-Tag(response/request header)和If-None-Match来决定该资源是否过期；
    其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

这里写图片描述

哪怕是协商缓存，一旦命中，这个HTTP请求响应速度也是极快的。

前端知识篇——（八）

猜你喜欢