网站导航
> 文档中心 > 前端面试（6）

前端面试（6）

网友: 文档中心 2022-03-29 11:54:43

前端面试（6）

接上：前端面试（5）：https://blog.csdn.net/weixin_45266979/article/details/123697554?spm=1001.2014.3001.5501

文章目录

  • 前端面试（6）
    • 前言
      • 一、let、const和var
      • 二、0.1+0.2 === 0.3 （x）
      • 三、同步异步
      • 四、null == undefined，返回true
      • 五、NAN ==NAN，返回false
      • 六、vue中的watch属性
      • 七、前端优化
      • 八、前端渲染

前言

这是以往遇到的，或则觉得有记录意义的一些题。

一、let、const和var

  1. 变量提升
    let和const，声明之前，打印为RefferenceError；
    var，声明之前，打印为undefined；
  2. 作用范围
    let只能在它所在的块内使用，不然就是undefined，var不用；
  3. 只读
    const声明一个只读的变量，一旦声明，变量值不能改变；声明完必须立马赋值，只声明不赋值就会报错。

二、0.1+0.2 === 0.3 （x）

let a = 0.1，b = 0.2
let c = a + b
//输出0.30000000000000004

如果让他们相等，这需要对c进行转化

c.toFixed（1）

toFixed（）语法：

number.toFixed(x)
x：必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。
number，转换的数据
返回值是String类型
菜鸟：https://www.runoob.com/jsref/jsref-tofixed.html

问题产生原因：
计算机通过二进制方式存储数据，所以0.1+0.2实际上是0.0001100110011001100…（1100循环）+0.00110011001100…（1100循环），所以最后的值不等于0.3

推荐：https://blog.csdn.net/qq_42033567/article/details/107753355

三、同步异步

同步和异步通常用来形容方法的调用方式。

同步模式：是一种执行模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序和任务的排列顺序是一致的、同步的。
同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。

异步模式：是每一个任务有一个或多个回调函数（callback），前一个任务结束，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一样的，异步的。
异步模式表明，方法一旦开始，立即返回，调用者无需等待期中方法执行完成，就可以继续执行后续方法。

通常我们写的方法都是同步方法，方法间都是串行化的，在一个县城内运行。

四、null == undefined，返回true

输出为undefined的几种情况：

  • 声明变量，但是没有赋值，输出为undefined
  • 输出不存在的对象，输出为undefined
  • 定义形参，但是没有传递实参，输出为undefined
//函数定义了形参afunction fn(a) {console.log(a); //undefined}fn();//未传递实参

使用void对表达式求职也均为undefined

void a;void false;  //undefinedvoid [];     //undefinedvoid null;   //undefinedvoid function fn(){};    //undefined

五、NAN ==NAN，返回false

原因：
JS规定，NaN表示的是非数字，但这个非数字也是不同的，因此，NaN不等于NaN，并且两个NaN永远不可能相等。
NaN虽然表示是一个非数字，但是一般是算术运算执行的结果，因此NaN仍然是数值类型。那么这个非数字可以是不同的数字。

六、vue中的watch属性

watch第一次绑定值的时候不会执行监听函数，只有当值发生改变的时候才会执行，如果需要在最初绑定值的时候执行，需要用到immediate。

监听的数据写成对象格式，包含hander方法和immediate，之前我们写的函数其实就是在写handle方法。

当监听一个对象的改变时，基本的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听变化，此时就需要deep属性对对象进行深度监听，这样只会给对象的某个特定的属性加监听器。

数组（一维、多维）的变化不需要通过深度监听，对象数组中的对象的属性变化则需要deep深度监听。

推荐：https://www.jianshu.com/p/b630466669ab

七、前端优化

初始阶段–>加载优化

  1. 首页加载
  • 首页加载图片过多
  • 首页请求量过多
  • 请求的资源过大
  1. CDN加速
    CDN：内容发布网络，放置静态资源（JS CSS图片等）的服务器。

运行阶段–>渲染优化
目标是减少DOM操作

  1. 虚拟DOM，用js数据来模拟真实的DOM树，从而大大减少操作真实DOM的次数。
  2. 在渲染的时候，使用document。createDocumentFragment创建虚拟节点，从而避免引起没有必要的渲染。
  3. 采用分段渲染的方式，最后用window。requestAnimationFrame逐帧渲染。

渲染顺序：

  1. CSS样式表置于头部，CSS会一边加载一边渲染。
  2. JS脚本置于尾部，JS在未加载完成之前，会阻塞渲染。
  3. 关键JS、CSS代码可以内嵌在HTML中，比如：rem动态等。
  4. 避免使用IFrame
  5. 使用骨架屏

推荐：

下面两个博客从两方面对前端优化进行阐述，
一个是从用户角度和服务商角度：https://blog.csdn.net/weixin_49199038/article/details/110128888

一个是从初始阶段和运行阶段：https://www.cnblogs.com/coder-zero/p/14754160.html

八、前端渲染

页面加载完成的过程

在网页的地址栏输入url后，浏览器经历了什么样的过程？

  • 客户端根据DNS服务器得到域名对应的ip地址；
  • 客户端向该ip地址发送http请求；
  • 客户端收到处理并返回http请求；
  • 客户端收到响应并返回内容；
  • 客户端渲染。

页面渲染过程
HTML渲染过程主要分为一下部分：

  1. 解析HTML，生成DOM树；
  2. 解析CSS，生成CSS规则树；
  3. 合并DOM树和CSS规则树，生成render树；
  4. 布局render树（layout/reflow）；
  5. 绘制render树（print），绘制页面像素信息；
  6. 浏览器将各层的信息发送给GUI，GUI将各层合成，显示在屏幕上。

优化策略：

  1. 从文件大小考虑。
  2. 将CSS放在头部，将js放在尾部。
  3. 减少资源请求数量。
  4. 下载的内容是否要在首屏上使用。
  5. script标签的使用加defer或async属性。

推荐：https://www.cnblogs.com/bzsheng/p/12590369.html

网络标签：

相关问题