# 文章目录

• 序言
• 服务端渲染的优点和缺点
• 客户端渲染的优点和缺点
• 服务端渲染是产生并发吗
• 服务端渲染用户每次请求都需要重新渲染吗
• 为什么服务端渲染只做首屏？
• 什么情况下，可能需要进行更多的服务端渲染或客户端渲染
• 前端渲染和前后端分离是不是一回事呢？
• 服务端渲染模板，前端如何热更新？
• 前后端分离，前端渲染每个页面都要去请求后端用户现在的登录状态是否有效吗？
• 客户端渲染和服务端渲染，单页面应用和多页面应用，前端路由和服务端路由有什么区别联系？

# reflect 的 13 个方法

# 前言

今天在写代码时，用了箭头函数，出现了如下问题：

function Drawing(shape) {

  this.shape = shape

}

Drawing.prototype.drawShape = (radius, x, y) => { //bug 问题所在

  return this.shape.draw(radius, x, y) //this 指向了全局

}

报错信息：

Error in created hook: "TypeError: Cannot read properties of undefined (reading 'shape')"

然后，改成 function 后，错误消除。

function Drawing(shape) {

  this.shape = shape

}

Drawing.prototype.drawShape = function(radius, x, y) {

  return this.shape.draw(radius, x, y)

}

原因是 this 指向问题，这是因为不了解箭头函数属性导致的。

• 箭头函数没有单独的 this 、 arguments 、 super ，并且不能作为构造函数。

# 前言

就目前而言，前端框架基本上被 Vue 和 React 瓜分得差不多了。如果你去面试一个前端岗位，那么或多或少都会问你一些关于 Vue 和 React 框架得知识，无论是原理还是使用，我们都有必要去了解一番。

数据响应式可以说是这些框架的一大特色与核心，这里我们就拿 Vue 来说。在 Vue2.x 时代，实现数据响应式主要是使用 Object.defineProperty() 这个 API 来实现的，而到了 Vue3.x 时代，数据响应式主要是使用 Proxy() 来实现的。

如果你还不了解 Proxy，那么你很有必要跟着本篇文章学习一下！

在 JavaScript 中，使用 new 关键字来创建类的实例时，这个过程本身与时序（即在 DOM 加载之前还是之后）关系不大，而是更多地与 JavaScript 代码的执行顺序有关。然而，当你想要在创建类的实例之后进行 DOM 操作时，你需要确保 DOM 元素已经被加载和解析。

首先说一下常识：

网页可见区域宽： document.body.clientWidth; 

网页可见区域高： document.body.clientHeight; 

网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 

网页可见区域高： document.body.offsetHeight  (包括边线的宽); 

网页正文全文宽： document.body.scrollWidth; 

网页正文全文高： document.body.scrollHeight; 

网页被卷去的高： document.body.scrollTop; 

网页被卷去的左： document.body.scrollLeft; 

网页正文部分上： window.screenTop; 

网页正文部分左： window.screenLeft; 

屏幕分辨率的高： window.screen.height; 

屏幕分辨率的宽： window.screen.width; 

屏幕可用工作区高度： window.screen.availHeight; 

屏幕可用工作区宽度：window.screen.availWidth;

# [[Prototype]] 与 prototype

[[Prototype]] 与 prototype 是不同的：

# 凡是被两层方括号括起来的属性都是内部属性，内部属性不能通过 “对象。属性” 的方式获取。

[[Prototype]] 就是内部属性，它不能通过 “对象.[[Prototype]]” 的方式获取，但可以通过 “对象.proto” 的方式获取。

prototype 是一般属性，可以直接通过 “对象.prototype” 的方式获取。

# 1. 以复制方式实现的继承

# 1.1 浅拷贝

基本类型的复制

var parent = {

      lanage: "chinese"

  }

  var child = {

      name: "xxx",

      age: 12

  }

 function extend(parent, child) {

     var child = child || {};

     for (const propertype in parent) {

         child[propertype] = parent[propertype];

     }

 }

 extend(parent, child);

 console.log(child);//{ name: 'xxx', age: 12, lanage: 'chinese' }

以上代码中，通过一个 extend () 函数，将父对象 parent 的属性遍历赋给子对象 child，从而实现继承。

但是这种字面量复制的方式存在巨大的缺陷，当父对象有引用类型的属性时，通过这么复制的方式，就像上一节中的 var b = a 一样，只会将 a 对象的引用赋给 b 对象，结果两者是指向同一个对象内存的，继承出来的子对象的属性是同一个，显然是不能满足需求的，（基本类型之间画等号是值的复制，引用类型之间画等号是引用的复制）所以就需要另谋出路。

JavaScript 中的函数不仅是代码块的封装单元，更是具备复杂行为的一等公民。理解其底层机制，是掌握语言本质的关键。

Browser 对象中有一个 Navigator 对象，这个对象中包含所有浏览器的信息

其中，一些常用设备访问时返回的 userAgent 属性如下：