javascript

js 实现sleep函数的几种方式

sleep函数作用是让线程休眠,等到指定时间在重新唤起。
方法一:这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。
function sleep(delay) {
  var start = (new Date()).getTime();
  while ((new Date()).getTime() - start < delay) {
    continue;
  }
}

function test() {
  console.log('111');
  sleep(2000);
  console.log('222');
}

test()

 

方法二:定时器

function sleep1(ms, callback) {
                setTimeout(callback, ms)
            }
            //sleep 1s
            

js禁止鼠标右键及禁止F12查看源代码

F12审查元素的情况下,可以随机更改代码,注入恶意JS等等,避免这种情况如下:

一、屏蔽F12 审查元素

<script>
    document.onkeydown = function () {
        if (window.event && window.event.keyCode == 123) {
            alert("F12被禁用");
            event.keyCode = 0;
            event.returnValue = false;
        }
        if (window.event && window.event.keyCode == 13) {
            window.event.keyCode = 505;
        }
        if (window.event && window.event.keyCode == 

js格式化时间戳

//datetime是拿到的时间戳
var date = new Date(datetime);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 
var year = date.getFullYear(),
    month = ("0" + (date.getMonth() + 1)).slice(-2),
    sdate = ("0" + date.getDate()).slice(-2),
    hour = ("0" + date.getHours()).slice(-2),
    minute = ("0" + date.getMinutes()).slice(-2),
    second = ("0" + date.getSeconds()).slice(-2);
// 拼接
var 

使用JavaScript动态变量名

在编程中,动态变量名称在脚本中没有硬编码的特定名称。它们使用来自其他来源的字符串值动态命名。JavaScript 中很少使用动态变量。但在某些情况下,它们很有用。与 PHP 不同,JavaScript中没有动态变量名的特殊实现。但是通过使用其他一些方法也可以获得类似的结果。在 JavaScript 中,可以使用下面给出的 2 种方法/方式来实现动态变量名称。

eval(): eval() 函数计算在参数中表示为字符串的 JavaScript 代码。字符串作为参数传递给 eval()。如果字符串表示表达式,则 eval() 计算表达式。在 eval() 中,我们传递一个字符串,其中声明了变量valuei ,并为每次迭代分配了i的值。eval() 函数执行此操作并使用分配的值创建变量。下面给出的代码实现了使用 eval() 创建动态变量名。

例子:

<script>
    var k = 'value';
    var i = 0;
    for(i = 1; i < 5; i++) 

写给后端程序员的前端开发流程与正确姿势.

写给后端程序员的前端开发流程与正确姿势.

关键词:node.js,npm,webpack,laravel mix,package.json,js代码压缩.

一直以来,后端程序员可能出于对前端的不太熟悉,尤其对于现代的前端工程化更不太熟悉.一看到nodejs,npm等名词就发懵.但后端程序员在实践中还是多多少少会接触前端的.可能你需要修改别人的前端代码,或自己开发前端代码(您可能是全栈程序员了).

想必你修改或写前端代码,也和我以前一样,直接从网上找模板(包括html,css.js)修改成自己样式.或自己从头写html.css.js.

不管是哪种类型,你一般是直接修改Html页面里引入的css.js吧:).

你可能也有些困惑 ,怎么别人的js代码看着像加密过似的,不知如何下手修改?

而你自己从头写的css,js则会直接被引入到Html页面里.

css,js代码里有一些注释,还有一些空格,空行等内容 ,直接在html页里引用是其实是没有经过压缩(去空格,去空行,去注释)的代码.会加大网络传输量,导致加载会慢一些.

而且,你写的js.没有经过压缩(去空格,注释,变量,函数重命名为短名称等),导致别人可能会偷盗你的代码.

如果你压缩了js后,再发布你的代码 ,而你的js看起来像经过加密一样,别人也基本看不懂你的代码了.

而你要做的就是开发代码与发布代码相分离.

本教程教你使用laravel-mix进行正确前端开发(注:laravel-mix最初是用于php框架laravel的前端资源编译工作 ,现在可用于任何语言的任何前端项目).

 

你项目的目录结构应该如下:

my-app/

----------index.html

-----------src/

----------------app.css

----------------app.js

-----------dist/

-----------------app.js

-----------------app.css

 

其中src为源码目录或开发目录,dist为发布目录,index.html为你的页面,…

                    

什么是回流与重绘 (Reflow & Repaint)

写在前面

在讨论今天的主角之前,我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例,Firefox 使用Geoko——Mozilla 自主研发的渲染引擎,Safari 和Chrome 都使用 webkit

我们主要以 Webkit的主流程为例

  • 浏览器使用流式布局模型 (Flow Based Layout)
  • 解析HTML 生成 DOM 树
  • 解析CSS 生成CSSOM 规则树
  • 将 DOM 树与 CSSOM 规则树合并在一起生成渲染树
            

6张图让你搞懂浏览器渲染网页过程

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

我的想法:如果我要构建快速可靠的网站,需要真正了解浏览器渲染网页的每个步骤机制,这样就可以在开发过程中对每个步骤进行优化。 这篇文章是我在较高水平上对端到端过程的学习总结。

好了,废话不多说,我们开始吧。这个过程可以分为以下几个主要阶段:…

            

在HTML上添加integrity,验证js和css的hash,防止篡改

近期甲方做了什么安全检查防止html、js被串改,要求加上integrity属性这边记录下如何生成hash值

计算hash

在linux上面使用此命令计算你需要生成hash的文件

[root@hhlqrtest js]# cat ./util.js | openssl dgst -sha384 -binary | openssl enc -base64 -A                
rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG
[root@hhlqrtest js]# 
rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG

这一行就是我们需要的hash值

添加integrity属性

crossorigin="anonymous" integrity="sha384-[刚刚的hash值]"

例如:…