浏览器渲染原理
面试题浏览器是如何渲染页面的？当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。 整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画 每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。 这样，整个渲染流程就形成了一套组织严密的生产流水线。 渲染的第一步是解析 HTML。 解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。 如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。 如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续 ...
问题集合
inline和block的区别？block：该元素生成一个块级盒子，在正常的流中，该元素之前和之后产生换行。inline：该元素生成一个或多个行级盒子，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。inline-block：结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点。 行内元素：<span>、<a>、<strong>、<em>、<img>、<input>、<label>块级元素：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table> 行内元素和块级元素的区别？1、行内元素不产生独立的框，宽度和高度由内容决定，而块级元素会生成一个独立的矩形框，可以设置宽度、高度、边距和填充等属性；2、行内元素在同一行上水平排列，而块级元素会自上而下按顺序排列；3、行内元素不能 ...
一些react
一些react知识点JSX JSX的本质是什么，它和JS之间到底是什么关系？ JSX是JavaScript的一种语法扩展，它和模板语言很接近，但是它充分具备JavaScript的能力。 为什么要用JSX？不用会有什么后果？ 1.提升开发效率； 2.组件化开发； 3.更好的抽象层次； JSX背后的功能模块是什么，这个功能模块都做了哪些事情? JSX会被编译为React.createElement()，React.createElement()将返回一个叫作“React Element”的JS对象【虚拟DOM】，由babel来完成。 组件初始化->render方法->生成虚拟DOM->ReactDOM.render方法->真实DOM。 组件更新->render方法->生成新的虚拟DOM->diff->定位出两次虚拟DOM的差异。 React生命周期React 15的声明周期： 初始化渲染 constructor()componentWillMount()render()componentDidMount() ...
手写Promise
promise1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002 ...
vue3学习笔记
Vue3学习笔记创建Vue3工程基于vite进行工程的创建。官方链接 1npm create vue@latest Vue3核心语法选项式API和组合式APIvue2：选项式API vue3：组合式API 选项式API中，数据、方法、计算属性等等是分散开的，若想添加需求，需要到不同的选项中修改内容，不便于维护和复用。 setupsetup函数中的this是undefined，在setup中直接声明变量不是响应式的。 setup的执行在beforeCreate之前。 setup的返回值也可以是一个渲染函数。 123setup(){ return ()=>'666' //此时模板内容无效，页面上只会有“666”} 面试题：setup和传统的配置项（data,methods）能不能同时写？ 可以同时写，data可以读到setup中的数据。 12345678910data(){ return { name:this.name // 1111 }}setup(){ ...
VueX
VueXVuex的工作流程： actions：支持异步操作 mutations：同步操作 安装和配置123456789101112131415161718import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { msg: '以葫为种，不假外物' }, getters: { }, mutations: { }, actions: { }, modules: { }}) 12345678910import Vue from 'vue'import App from './App.vue'import store from './store'Vue.config.productionTip = ...
状态管理和v-model
状态管理和V-model本文主要讨论使用状态管理工具VueX和Pinia和V-model的使用。 Vuex在Vuex的官方文档中提到： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 假设我们定义了store如下： 12345export default new Vuex.Store({ state: { str: 'test' }}) 在组件中使用： 123456<template> <div id="app"> <input type="text" v-model="this.$store.state.str"> {{ this.$store.state.str }} </div></template> 如果我们修改了input的内容，则会： 可以看到数据并没有发生变化。如果我们一定想用v-model的话， ...
React学习笔记
描述UI组件React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！ 定义一个react组件。 123function Hello(){ return <i>Hello</i>} 如果你的标签和 **return** 关键字不在同一行，则必须把它包裹在一对括号中。没有括号包裹的话，任何在 return 下一行的代码都 将被忽略！ 组件的导入和导出组件的导出主要分为具名导出和默认导出，默认导出在一个文件中只能有一个。 语法 导出语句 导入语句 默认 export default function Button() {} import Button from ‘./Button.js’; 具名 export function Button() {} import { Button } from ‘./Button.js’; JSX书写标签语言JSX and React 是相互独立的 东西。但它们经常一起使用，但你 可以 单独使用它们中的任意一个，JSX 是一种语法扩展，而 ...
使用electron将vue项目打包成桌面端exe
使用election将vue项目打包成exeVue项目打包使用以下命令将vue项目打包dist 1npm run build 执行该操作以后将在vue项目中生成dist文件夹，里面为打包后的文件。 安装配置electron在dist文件夹下新建package.json文件 123456789101112131415161718192021222324{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "dist" : "electron- ...
使用MANO模型重建freihand数据集中的手部姿态
前言最近两天在研究MANO模型的基本使用，从网上下载了MANO模型的模型文件和实例代码和Freihand数据集。数据集中的training_mano.json即为训练集数据的mano参数，共32560条数据，每条数据都是一个61维的向量。其中，pose：[:48]，shape：[48:58]。 目的是使用真实的数据搭配MANO进行3D的重建。 问题在MANO附带的代码中，使用了PCA降维的操作，使得输入的形状参数减少到6个，不包括全局旋转，代码如下： 1234567891011121314151617181920212223242526from webuser.smpl_handpca_wrapper_HAND_only import load_modelimport numpy as np## Load MANO/SMPL+H model (here we load the righ hand model)## Make sure path is correctm = load_model('../../models/MANO_RIGHT.pkl', ncomps ...