web前端

现代 JavaScript,你应该使用的 10 件事,从今天开始

在Twitter 上关注我,很高兴收到您对主题或改进的建议/Chris

您可能对 JavaScript 完全陌生,或者多年来您可能只是偶尔使用它。不过有一件事很清楚 - 很多东西都发生了变化,并且您应该使用一些功能。这篇文章描述了我认为你应该每天使用的特性,如果你对 JavaScript 很认真的话

 

资源

这些是我最喜欢的 ES6+ 资源:

-1- 扩展运算符

这被表示为...一个对象或数组的前面,并完成了名字所说的,它将某些东西从一个结构变成了一个逗号分隔的列表。让我们演示一下:

展开数组

let firstHalf = [ 'one', 'two'];
let secondHalf = [

延迟加载非关键 CSS

CSS 文件是渲染阻塞资源:它们必须在浏览器渲染页面之前加载和处理。包含不必要的大样式的网页需要更长的渲染时间。

在本指南中,您将了解如何以优化关键渲染路径和改善 First Contentful Paint (FCP) 为目标来延迟加载非关键 CSS。

以次优方式加载 CSS #

以下示例包含一个带有三个隐藏文本段落的可折叠项,每个文本段落都使用不同的类来设置样式:…

        

浅谈 JS 内存机制与内存泄漏

给前端食堂标星标,吃好每一顿饭!

因为公众号推荐机制变更,如果不想错过食堂的文章,可以将食堂设置为星标,这样就会出现在你的公众号置顶列表里。设置星标方式:先进入公众号后台(点击本文标题下方蓝色的字“前端食堂”),再点击右上角三个点,就可以看到设置星标啦。

前言

随着web的发展与普及,前端页面不仅只加载在浏览器上,也慢慢流行于各种app的webview里。尤其在如今设备性能越来越好的条件下,前端页面更是开始在app中担任重要的角色。如此一来,前端页面的停留时间变得更长,我们理应越发重视前端的内存管理,防止内存泄露,提高页面的性能。

想要打造高性能前端应用,防止崩溃,就必须得搞清楚JS的内存机制,其实就是弄清楚JS内存的分配与回收。

JS数据存储机制

内存空间

图片

从图中可以看出, 在 JavaScript 的执行过程中, 主要有三种类型内存空间,分别是代码空间、栈空间和堆空间。

代码空间:用来存放可执行代码

栈空间:一块连续的内存区域,容量较小,读取速度快,被设计成先进后出结构

堆空间:不连续的内存区域,容量较大,用于储存大数据,读取速度慢

数据类型

图片

JavaScript 发展至今总共有八种数据类型,其中 Object 类型称为引用类型,其余七种称为基本类型,Object 是由其余七种基本类型组成的kv结构数据。

栈空间和堆空间

栈空间其实就是 JavaScript 中的调用栈,是用来储存执行上下文,以及存储执行上下文中的一些基本类型中的小数据,如下图所示:

图片
image.png

变量环境: 存放var声明与函数声明的变量空间,编译时就能确定,不受块级作用域影响

词法环境: 存放let与const声明的变量空间,编译时不能完全确定,受块级作用域影响

而堆空间,则是用来储存大数据如引用类型,然后把他们的引用地址保存到栈空间的变量中,所以多了这一道中转,JavaScript 对堆空间数据的读取自然会比栈空间数据的要慢,可以用下图表示两者关系:

图片通常情况下,栈空间都不会设置太大,这是因为 JavaScript 引擎需要用栈来维护程序执行期间上下文的状态,如果栈空间大了的话,所有的数据都存放在栈空间里面,那么会影响到上下文切换的效率,进而又影响到整个程序的执行效率。

闭包

内部函数总是可以访问其外部函数中声明的变量,当通过调用一个外部函数返回一个内部函数后,即使该外部函数已经执行结束了,但是内部函数引用外部函数的变量依然保存在内存中,我们就把这些变量的集合称为闭包

推迟 CSS 和 JavaScript 资源以提高页面加载速度的现代方法

为了提高页面加载速度,您可以通过仅调整页面的 HTML 代码来延迟 CSS 和 JavaScript 资源。

  1. 延迟 CSS
  2. 延迟媒体
  3. 延迟 JavaScript

CSS、字体和 JavaScript 等资源被视为渲染阻塞。这意味着浏览器在实际呈现页面内容之前需要时间来加载它们。

所以这些资源的文件越大,加载它们的时间就越长,用户看到页面内容的时间就越长。

要检查页面加载速度和渲染阻止资源,您可以直接在浏览器 (Chrome) 中使用Lighthouse工具。这是衡量 Web 性能的重要工具之一。

为了防止渲染阻塞资源减慢您的页面速度,您可以实施下面列出的小 HTML 更改来解决此问题。

延迟 CSS

处理 CSS 负载的正确方法是将样式拆分为关键 CSS 和非关键 CSS。

  • 关键- 这些样式是显示即时内容所必需的,一旦页面加载(首
        

http CORS options请求(预检请求)详解

一、跨域资源共享 CORS简介

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

OPTIONS请求即预检请求,可用于检测服务器允许的http方法。当发起跨域请求时,由于安全原因,触发一定条件时浏览器会在正式请求之前自动先发起OPTIONS请求,即CORS预检请求,服务器若接受该跨域请求,浏览器才继续发起正式请求。

preflight,一个cors预检请求,属于options请求。该请求会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时,由浏览器自动发出

利用预检请求,浏览器能够知道当前的服务器是否允许执行即将要进行的请求,只有获得了允许,浏览器才会真正执行接下来的请求。…

js中到底有没有宏任务这个概念?

刚入行的时候了解到宏任务和微任务,也是在别人的博客中写的,工作一年多后,稍微对js有点了解吧! 我去了解事件循环,任务队列,慢慢的给我的感觉是根本没有什么宏任务!或者说什么宏任务队列, 不知道这个概念是从哪来的,通过setTimeout 和 setInterval 创建出来的,内部的回调函数会加入到任务队列中(或者说是下一次任务队列中)!微任务队列中的任务则会早于下一次任务!!! 有没有大佬解惑下,这个宏任务从哪来的,他不就是任务吗! 还有他到底该如何理解,不应该单单就是 setTimeout 和 setInterval 就是宏任务 这个不是我想要的答案!!!

 

 

作者:紫云飞
链接:https://www.zhihu.com/question/560193382/answer/2719657486
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你的表达和逻辑有点混乱,不过从这么多的感叹号也可以看出,你已经受够了百度里千篇一律的总结文了。能找到的知识觉的里面说的是狗屁,觉的不是狗屁的知识呢又没能力看懂。I know the feeling bro!

最近我刚刚对事件循环做了考古工作,在上个世纪的 Netscape 浏览器源码里,我找到了所谓的 event loop,它就是个处理 event 的 while 循环,不停的从 event queue 里拿到之前被添加进去的 event 对象,处理 event,再进入下一次循环。

到了本世纪,浏览器越来越复杂,可能只用

postMessage – 跨域消息传递

window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本,而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性,但他们可以用这种消息传递技术来实现安全的通信。

这项技术称为“跨文档消息传递”,又称为“窗口间消息传递”或者“跨域消息传递”。…

        

js生成随机数

js产生随机数通常是使用 javascript 的Math.random()函数

常用的几种方法:Math.random()表示:结果为0-1之间(包括0,不包括1);

Math.floor(Math.random()*10+1)表示结果为1-10之间的一个随机数

Math.floor(Math.random()*24)表示结果为0-23间的随机数

1.Math.random();返回0-1之间的随机数,可能为0,但是总是小于1,[0,1)

返回指定范围随机数(m~n)之间的范围的公式为:

Math.random()*(n-m)+m

2.Math.ceil(n);返回大于等于n的最小整数(向上取整)

用Math.ceil(Math.random()*10)时,主要获取1到10的随机整数,取0的几率很小

3.Math.round(n)返回n四舍五入后整数的值

用Math.round(Math.random());可均衡获取0和1的随机整数

用Math.round(Math.random()*10)时,可基本均衡获取0到10的随机整数

4.Math.floor(n)返回小于等于n的最大整数(向下取整)

用Math.floor(Math.random(*10))时,可均衡获取0到9的随机整数

js获取自定义属性的两种方法

js获取自定义属性的两种方法
四种获取属性的方法
首先获取一个元素:var elem = document.getElementById(‘elem’);

1 1、点(获取不到自定义属性):

2、[] 也可以获取属性 ,有利于进行传参操作。

elem.style[‘background’] = ‘yellow’
1
3、getAttribute():早期获取自定义属性的方法。

var foo = elem.getAttribute(‘ancheng’);//Ancheng
1
同时也能进行设置:

elem.setAttribute(‘ancheng’,‘安成’);
1
4、data-*(现在经常使用的获取自定义属性的方法)

console.log(elem.dataset.user);
1
重点: *号的名字若果有下划线,就转成小驼峰。

console.log( elem.dataset.userName)
1
注意: 可以在js中直接添加自定义属性,但是只能在js中用,因为你还没有加入html中。

elem.myColor = ‘red’;
console.log( elem.myColor );…

js实现拖拽与碰撞检测

这篇文章主要为大家详细介绍了js实现拖拽与碰撞检测,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现拖拽与碰撞检测的具体代码,供大家参考,具体内容如下

js实现拖拽与碰撞检测

拖拽

原理分析

对于拖拽一个div盒子,首先我们需要将鼠标移动到盒子上,然后按住鼠标左键,移动鼠标到目标位置,再松开鼠标,对于这一过程的分析,

显然需要三个鼠标事件:

  •  按住鼠标:onmousedown
  •  移动鼠标:onmousemove
  •  松开鼠标:onmouseup

实现步骤

1、**鼠标按下时:**我们获取鼠标当前所在的位置距离页面左边界与上边界的距离,分别减去盒子距离页面左边界与上边界的值,这样我们

就得到了鼠标距离盒子左边界与上边界的值;

2、**鼠标移动时:**我们重新获取此时鼠标距离页面左边界与上边界的值,再用它们减去步骤一中得到的鼠标距离盒子左边界与上边界的

值,将得到的值重新赋给盒子,这样盒子就能与鼠标保持相对静止,在页面上移动;

3、**松开鼠标时:**将鼠标移动事件清除。

实现代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20