Month: 10月 2022

推迟 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

JS中获取cookie的最简单方式

const getCookie = (name) => document.cookie.match(`[;\s+]?${name}=([^;]*)`)?.pop();

// 比如cookie如下: a=b; c=d
// 使用
getCookie('c') // d

其中match是字符串的原型方法。

str.match(regexp)

如果传入一个非正则表达式对象,则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp

以上,所以完全不必写一个正则,因为正则拼字符串还要使用new RegExp构造方法,然而match内部。已经隐式的判断了。

string原型上search方法同样的实现原理,因为后者指返回索引,类似indexOf,所以性能会好一些。

有点跑题,不妨跑的再远一些。。。

其实string身上的match方法实际是调用了正则原型RegExp[Symbol.match]方法。

const str = 'foo';
str.match(/foo/); // ['foo']
RegExp.prototype[Symbol.match].call(/foo/, str); //['foo']