Attack on Life ⚔️

今天看到群里发了一道JS基础题，以为很简单，但是不小心还做错了，于是这里Mark下。

1
2
3
4
5
6
7
8

var user = {
  n: 1
};
user.x = user = {
  n: 2
};
console.log(user.x);

错误分析

错误的以为等价于如下代码

1
2
3
4
5
6
7
8
9
10
11

var user = {
  n: 1
  };
user = {
    n: 2
 };
user.x = user;
console.log(user.x);
/**
* {n: 2, x: {…}}
* /

原型链是JS基础知识之一，翻阅那么多的文章，不如自行总结一下，温故而知新。

关于原型链，绕不开几个关键词，prototype,proto,constructor,new等，这里总结下。

如有错误，欢迎斧正。

1. prototype是函数身上的属性，__proto__是对象身上的属性，constructor是对象身上的属性

2. 实例化对象的__proto__指向的是创建该实例的原型对象，实例原型的constructor会是构造函数，实例原型的__proto__指向的是上一级，如果没有其它的对象原型，那就会是Object的实例原型。

   关于这点，可以参考下面这张图，摘自网上。

3. constructor这个构造函数，存在于两个地方，一个是es6类写法下的构造函数，一个就是如上对象的构造函数属性。es6 class本身就只是个语法糖，底层原理还是原型链，因此都是一个意思，即构造函数即创建该实例的函数。
4. 原型链指的是继承链条上的各个对象，而不是函数。

webpack5发布已经有5个月了，配套的插件都已基本到位，空闲时间，就着手项目升级工作。

webpack5的主要变化

1. 持久化缓存改进，提升构建性能
2. 摇树优化，一定程度降低构建资源体积大小
3. 引入一些breaking change，从而为未来的升级，做些准备工作

总之，毕竟只是构建层次的工具，对于最终打包的JS功能并不会造成影响，因此还是值得升级。

升级操作

iframe这种技术并没被淘汰，还是有一席之地，比如WEB广告播放，比如网页Chrome插件，都可能会用到。用户无感更多是在UI操作体验上，但实际上是两个不同的站点服务。对于iframe，这里总结下。

1. 如果iframe包含的站点为同站，则共享父页面的渲染进程，Chrome并不会开启新的进程，如果不同站，则会开启新的渲染进程

   • 共享同一个渲染进程即意味着，如果子页面出现了死循环，父页面会处于等待状态，操作无响应。
   • 需要了解2个概念，同源即协议;域名;端口一致，同站即根域名一致
     • 举个例子，alan.local页面iframe加载了a.alan.local页面

2. iframe资源加载本身并不阻塞父页面的HTML解析执行，但父页面onload事件在子页面onload之后执行

   • 需要了解页面的几个生命周期
     • window.onload 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等
     • DOMContentLoaded 浏览器已完全加载 HTML，并构建了 DOM 树，但像图片和样式表之类的外部资源可能尚未加载完成。
     • beforeunload/unload 页面销毁离开

3. iframe作为一种跨域访问资源的方案，对于iframe页面间通讯分以下两种情况

   • 同站

     • 两个站点均设置document.domain = 'alan-test.local'; 则可以通过JS操作页面元素内容，比如子页面window.parent.document.getElementById('saveSession')，父页面操作子页面则是window.frames['frameId'].document

   • 非同站

     • 采用CDM(cross document messaging)通讯

       1 2 3 4 5 6 7 8

       window.addEventListener("message", (event) => { if (event.origin !== "http://example.org:8080") return; // ... }, false); targetWindow.postMessage(message, targetOrigin, [transfer]);

ES6 Module是官方推出的JS模块方案，随着babel，TypeScript，SPA的盛行，这个技术也用的再熟悉不过了，但有时还是会写错。反思错误，觉得是对其认识理解的还不够彻底，这里就Mark下。

如图即是有时出现的写法错误

• 首先这个错误是TS编译器报的，属于编译报错，与Lint报错不同，lint报错会告诉具体违反的规则，而编译报错会是ts(code)，这点需要区分开来

• 错误中code-1128与本身我们所编写的程序文件无关，是编译器内部的，翻看TypeScript源码果然找到了相关语句。因此假如遇到TS编译报错看不懂，可以以此Code辅助进行相关问题检索。

  1 2 3 4 5 6 7

  Declaration_or_statement_expected: diag(1128, ts.DiagnosticCategory.Error, "Declaration_or_statement_expected_1128", "Declaration or statement expected."), function diag(code, category, key, message, reportsUnnecessary, elidedInCompatabilityPyramid, reportsDeprecated) { return { code: code, category: category, key: key, message: message, reportsUnnecessary: reportsUnnecessary, elidedInCompatabilityPyramid: elidedInCompatabilityPyramid, reportsDeprecated: reportsDeprecated }; }

前端开发大多时候并没有用到Proxy，但是不代表其没有价值，而是没有掌握它。于是，这里梳理下。

元编程

MDN将Reflect，Proxy归类于元编程，那什么是元编程呢。

元编程（英语：Metaprogramming），又译元编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或者自身）作为它们的资料，或者在运行时完成部分本应在编译时完成的工作。多数情况下，与手工编写全部代码相比，程序员可以获得更高的工作效率，或者给与程序更大的灵活度去处理新的情形而无需重新编译。

以上摘自WIKI，我们可以知道元编程是编程领域的一个概念，非JS所特有。

CSRF相较XSS名气小了点，但也是常见安全问题之一。借着空闲时间，梳理强化下。

概念

CSRF(Cross Site Request Forgery)，中文意思跨站请求伪造，是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。

举例

web性能优化能做的事情很多，比如压缩JS体积大小， 比如降低HTTP请求次数，比如CDN优化关键资源请求速度等等。其中一个优化点事降低重排重绘次数，这里总结下。

渲染流水线

上图摘自李兵老师的《浏览器工作原理与实践》

实践方法

前端资源都会发送到浏览器端或者客户端，那么这些WEB资源尤其是JS如何最大程度的保护呢，毕竟辛苦开发的代码属于商业项目，如果被别人完整剽窃了甚是可惜，于是就需要利用一些手段来做控制。
最终都是尽可能的提高安全门槛儿，提高别人剽窃的成本。

以下为我在实际项目中总结的点

1. 生产模式打包，去掉调试方面的信息

2. 压缩CSS，HTML，JS

3. CSS名称增加哈希值

4. JS类名及函数名称压缩，替换为不表意字母等

   • 比如利用terser

5. 一定程度的代码混淆，注入一些混淆代码

最近跟PM聊项目下一步发展，谈到了移动端网页，及移动端App的规划，期间就聊到了自适应布局，响应式布局，但是沟通中，觉得似乎这两个词一直是捆绑着，似乎在大家眼里自适应===响应式===一套代码走天下。

right？no，作为开发，很多时候我也把两个词混为一谈了，借着最近时间较为宽裕，整理下。

图摘自这里

自适应(Adaptive web design)

• 提出时间：2010年
• 理念：自动识别屏幕宽度，并作出相应调整的网页设计。