前端每日知识3+1_第22天-CSDN博客

本文链接：https://blog.csdn.net/qq_44665456/article/details/127295129

第22天 (2022-10-12)

HTML：

js 放在 <head> 中，如果不添加 async 或者 defer 时，当浏览器遇到 script 时，会阻塞 DOM 树的构建，进而影响页面的加载。当 js 文件较多时，页面白屏的时间也会变长。

在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析 HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。

把 js 放到 <body> 里（一般在 </body> 的上面）时，由于 DOM 时顺序解析的，因此 js 不会阻塞 DOM 的解析。对于必须要在 DOM 解析前就要加载的 js，我们需要放在 <head> 中。

参考文章：该把 JS 文件放在 HTML 文档的那个位置

CSS:

浏览器对于 CSS 选择器的解析过程是从右向左的。

.class ul li span {
  // css 属性
}
如果是这样的一个结构，浏览器会从右向左开始解析。因为一般来说，最右侧的节点范围反而会比较大，越向左限定的条件就越多。也因此 CSS 的选择器设计上不宜嵌套过多，会带来性能上的问题。


从上到下，从右到左
因为从左到右，首先浏览器会遍历你最左边的选择器，可能是div，可能是span，我需要在整个页面去把匹配成功的dom找出来，可以说是海底捞针，但是从右到左不一样了，它通过具体的遍历条件去寻找一个最匹配的值，查找之后在向上查询，是否符合自己的选择器规则，才最后匹配成功；
前者会浪费大量的遍历时间，造成大量错误的匹配结果

参考文章：:为什么 CSS 选择器解析的时候是从右往左？

JS:

对一个实例new做了以下4件事

生成一个空对象
将此对象的原型对象(proto)指向实例的原型(prototype)
将此对象的this指向实例
返回一个此对象

function _new(Fn, ...arg) {
const obj = Object.create(Fn.prototype);
const obj1 = Fn.apply(obj, arg);
return obj1 instanceof Object ? obj1 : obj;
}

软技能：

通过各种终端来向用户展示数据，或者给用户提供一些和后台的交互接口。
前景：首先，在我看来，一切和用户交互的终端都可以属于前端。并且随着现在跨端开发框架的兴起，比如Electron框架等，也使得前端的那套开发技术栈以及开发流程可以复制到桌面端来，使得前端的范畴越来越广泛。
并且，随着AR，VR技术的兴起，手机app中应用了大量的3维场景来提高用户体验，比如手机app上看房，看车，甚至是看一个城市的街景，都已经有了3D的场景，并且用户还能进行简单的操作。而这些都对前端提出了更高的要求