Directorio de artículos
1. subprocesos múltiples
1.1 Descripción general
El front-end JS se ejecuta en un solo subproceso de forma predeterminada y solo puede ejecutar una cosa en un período de tiempo. Para dar un ejemplo: por ejemplo, en un antiguo juego de asedio, se trajeron cien mil tropas. Primero, a 1.000 personas se les permitió servir como carne de cañón (asediar la ciudad), mientras los demás observaban y esperaban, y luego el cañón Se quemó el forraje (estas 1.000 personas no lograron asediar la ciudad), y luego el segundo grupo de escuadrones de la muerte continuó atacando la ciudad, mientras los demás todavía esperaban... y así sucesivamente, y finalmente el ejército de 100.000 hombres. fue derrotado.
JavaScript nativoColección de casos Scipt
JavaScript + DOM básico
JavaScript básico a avanzado
Desarrollo de juegos Canvas
Esto causará un problema: si se coloca un js más complejo delante del html para cargar, este js tardará mucho en calcularse, lo que provocará que la página se bloquee. Esta experiencia de usuario será particularmente mala.
código HTML:
<script src="factorial.js"></script>
<body>
<button>click me</button>
</body>
Código factorial.js:
function feiBo(n){
if(n === 1 || n === 2)
return 1;
return feiBo(n-1) + feiBo(n-2);
}
console.log(feiBo(50))
Para resolver este problema, se agregó la función Trabajador en HTML5 para abrir hilos adicionales. Esto equivale a una operación de subprocesos múltiples y se pueden realizar múltiples tareas al mismo tiempo.
<script>
new Worker("factorial.js");
</script>
<body>
<button>click me</button>
</body>
Error reportado:
En este momento, la función de trabajador debe habilitar el servicio antes de que pueda usarse normalmente. El comando para habilitar el servicio: servidor de nodo
Busque el directorio donde se encuentra server.js y ejecute el comando para iniciar el servicio.
1.2 Experimente subprocesos múltiples
código js incrustado en html:
new Worker("out.js");
setTimeout(function(){
alert("打扰一下...3秒到了...请付费体验....")
},3000)
código out.js:
var count = 1;
setInterval(function(){
console.log(count++);
},1000)
1.3 Transmisión y recepción de datos en subprocesos múltiples
El archivo js se introduce en js a través del script[src] y esto apunta a la ventana
Pero en el js del hilo adicional que abrimos a través de la función Worker, esto ya no apunta a la ventana. esto apunta al objeto global del hilo adicional creado
En el objeto global del hilo adicional anterior, hay un método postMessage, que puede enviar datos al hilo principal en el hilo actual.
Código de hilo adicional:
function feiBo(n){
if(n === 1 || n === 2)
return 1;
return feiBo(n-1) + feiBo(n-2);
}
console.log("开始计算...");
postMessage(feiBo(40));//向主线程发送数据
console.log("计算完成....")
Hilo principal:
var wk = new Worker("out.js");
console.log(wk);//打印额外线程对象
Se encontró que hay dos eventos idénticos con el objeto global de hilo adicional, onmessage onerror
//onmessage 事件 用于接收数据
wk.onmessage = function(e){
console.log(e);
}
Hay un atributo de datos en el objeto de evento para almacenar datos pasados por subprocesos adicionales:
2. Empuje de eventos
2.1 Descripción general
Generalmente, el front-end envía una solicitud al servidor, el servidor recibe la solicitud, responde con datos al front-end, representa los datos en el navegador y luego el enlace se desconecta (enlace sin estado). En este momento, es imposible que el servidor devuelva datos activamente al front-end. Por lo tanto, en HTML5, se agrega un nuevo constructor EventSource para obtener datos de fondo, el parámetro es la ruta de acceso, esta ruta es la misma que la interfaz y es estudiada y discutida por el front-end y el back-end.
//创建EventSource对象 创建完对象后 NetWork面板中可以看到，每隔1-3秒，后台不停的向前端推送数据
new EventSource('/hehe');
var es = new EventSource('/hehe');
console.log(es);
2.2 evento en mensaje
Evento onmessage: utilizado para recibir datos. Los datos recibidos se almacenan en la propiedad de datos del objeto de evento.
Obtenga los datos enviados desde la ruta especificada y renderícelos en la página.
<ul id="list"></ul>
<script>
var list = document.getElementById('list');
//创建EventSource对象 创建完对象后 NetWork面板中可以看到，每隔1-3秒，后台不停的向前端推送数据
var es = new EventSource('/hehe');
console.log(es);
//onmessage 用于在前端接收数据
es.onmessage = function(e){
// console.log(e)
// console.log(e.data)
var li = document.createElement("li");
li.innerHTML = e.data;
list.appendChild(li);
}
</script>
3. historia
-
go() Este método se utiliza para saltar a la posición especificada en la lista del historial.
-
forward() Este método se utiliza para cargar la siguiente URL en la lista del historial.
Llamar a este método equivale a hacer clic en el botón de avance o llamar a History.go(1)
-
back() Este método se utiliza para cargar la URL anterior en la lista del historial.
Llamar a este método equivale a hacer clic en el botón Atrás o llamar a History.go(-1)
-
pushState() Este método se utiliza para agregar un nuevo registro histórico al registro histórico.
Descripción general de los parámetros History.pushState (obj, título, URL)
- obj: Los datos agregados son un objeto
- título: los títulos de las nuevas páginas web generalmente se omiten.
- url: la URL de la nueva página web
-
replaceState() Este método se utiliza para reemplazar el historial actual.
Descripción general de los parámetros de History.replaceState (obj, título, URL)
- obj: Los datos agregados son un objeto
- título: los títulos de las nuevas páginas web generalmente se omiten.
- url: la URL de la nueva página web
history.pushState(111,"",'index.html#aaa'); history.pushState(222,"",'index.html#bbb'); history.pushState(333,"",'index.html#ccc'); history.pushState(444,"",'index.html#ddd'); // history.replaceState(555,"","index.html#eee") // 监测历史记录的改变 window.onpopstate = function(e){ console.log(e) console.log("状态改变...") //只有通过 前进 后退箭头 或者history.back() history.forword() history.go() 方法操作才能获取传递的值 console.log("传递的数据在state中：",e.state); }