Frontend Basics — P1

· 3 min read · 1290 Words · -Views -Comments

Recently discussed some frontend interview questions with friends; summarizing here to solidify fundamentals.

TCP three-way handshake

Understand the three-way handshake and four-way FIN sequence. Mnemonic aside, here are the diagrams:

Number precision

console.log(0.1 + 0.2 > 0.3); // true

Why

Decimal 0.1 and 0.2 are converted to binary; many decimals are repeating in base‑2, causing precision issues.

Fix

Use a library like big.js for decimal math.

 console.log(new Big(0.1).plus(0.2)==0.3); // true

Frontend local storage options

  • localstorage
  • sessionStorage
  • cookie

Notes

  1. localStorage entries have no built‑in expiration.

  2. sessionStorage does not persist across tabs.

  3. Browsers don’t expose a delete‑cookie API; delete by setting an expired date.

  4. Storage values are strings. When storing objects, serialize/deserialize explicitly; otherwise JS will stringify implicitly.

    localStorage.setItem('name', 'alan'); // alan
localStorage.setItem('age', 1); // 1
console.log(typeof localStorage.getItem('age')); // string
localStorage.setItem('user', { name: 'alan', age: 1 }); // [object Object]
localStorage.setItem('null', null); // null
localStorage.setItem('undefined', undefined); // undefined

Hoisting

  • In JS, declarations of functions and variables are hoisted to the top of their scope.
  • Variables can be used before their declaration.
  • Only declarations are hoisted; initializations are not.
  • function, var, let, const, and class are all hoisted; var initializes to undefined, while let/const remain uninitialized (TDZ).

例题

// source code
console.log(a); // undefined
var a= 'Hello World!';

// transformed
var a;
console.log(a); // undefined
a = 'Hello World!';

helloWorld(); // TypeError: helloWorld is not a function
var helloWorld = function () {
        console.log('Hello World!');
     };

闭包

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

例题

 var btn = document.getElementsByTagName('button');
      for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
          console.log(i); // 永远是5
        };
      }

可以利用闭包，方式如下

 var btn = document.getElementsByTagName('button');
      for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = ((j) => () => console.log(j))(i);
      }

异步执行顺序

异步指两个或两个以上的对象或事件不同时存在或发生（或多个相关事物的发生无需等待其前一事物的完成）。在计算机技术中，“异步"一词被用于两大语境（网络与通信，软件设计）。

注意

  • Promise是异步的
  • XHR可同步，可异步
  • window.setTimeout是异步的

例题

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

async function async2() {
    console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0);

async1();

new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});

console.log('script end');

答案是

  • script start
  • async1 start
  • async2
  • promise1
  • script end
  • async1 end
  • promise2
  • setTimeout

解码多次编码的URL

 let url = 'https://baike.baidu.com/item/%25E8%2583%25A1%25E6%25AD%258C/312718';
      do {
        url = decodeURI(url);
      } while (url !== decodeURI(url));
      console.log(url);

CSS盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

例题

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    padding: 10px;
    border: 10px solid blue;
    margin: 10px;
}

红色区域宽度为120px，原因是100px+10px+10px

CSS三大特性

  • 层叠性

​ 就近原则，后覆盖前

  • 继承性
    • 子继承父
    • 但是有些特殊的标签不继承的
  • 优先级
    • ID > class【属性】> 标签，优先级递减

例题

  <style>
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
      * {
        color: black !important;
      }
    </style>

 <div class="blue red">hello world</div>

实际文本会显示为黑色，因为important为最高优先级，但当去掉这个，会是蓝色，因为CSS层叠性决定后覆盖前。

前端性能优化

  1. gzip压缩/预压缩
  2. HTML，CSS，JS压缩
  3. 前端缓存
  4. 懒加载，预加载，降低需要加载JS的体积
  5. 充分利用请求带宽，比如并发执行多个请求注意单域名下请求个数限制
  6. CDN静态资源，提升缓存/请求速度
  7. code本身优化，比如SPA优化render，降低渲染频次，比如部分轮询可以走WebSocket降低请求次数
  8. SSR
  9. 高频高耗计算请求可以走Web Worker

写在最后

透过这些题可以看出还是那些基础问题，但也需要了解如今的前端知识点并不少，除了本身熟悉前端三剑客【HTML，CSS，JS】，对于网络，算法，浏览器运行原理等都需要熟悉。

推荐资料

前端开发
Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover

Related