Monkey-yu Blog

生是见识,不是活着。

web网站性能优化

一、等待中 (TTFB) TTFB 是 Time to First Byte 的缩写,指的是浏览器开始收到服务器响应数据的时间(后台处理时间+重定向时间),是反映服务端响应速度的重要指标。 ​ TTFB 过长的原因 我们知道,对于动态网页来说,服务器收到用户打开一个页面的请求时,首先要从数据库中读取该页面需要的数据,然后把这些数据传入到模版中,模版渲染后,再返回给用户。由于查询数据...

openDrive概述

1. openDrive 概述 openDRIVE的全称是 ASAM openDRIVE。 openDRIVE是以可扩展标记语言XML为基础,文件后缀为xodr格式的描述道路及道路网的通用标准。存储在openDRIVE文件中的数据描述了道路的几何形状以及沿线的特征并且定义了可以影响交通逻辑的交通标志以及道路基础设施,例如车道和信号灯。 openDRIVE中描述的路网可以是人工生成的或者...

Vue图片懒加载

什么是懒加载? 通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载。 那什么叫做需要用到的时候? 比如一个图片在没有出现在可视区域内,就已经加载在页面里了,但只有滚动条滚动到下面才可以看到,则认为这个图片加载“过早”了。 懒加载的优点 可以减少首页首次加载的数量,减少服务器压力。 当网络请求较慢,可以先使用一张低像素图占位,不至于出现大量空白,用户体验更好。 ...

将自己的vue组件发布为npm包

首先问题:开发中我们往往需要做某些功能,这个功能可能会出现很多次,也会出现在不同的项目。需要使用时候又不想重新写,怎么办呢? 解决思路:把这个特殊的需求功能做成属于自己的组件,当下次需要去使用它的时候。那么我们就可以打包这个组件并上传到npm管理库,这个库可以是自己的私有库,也可以是npmjs公共库。 一、初始化一个空项目 1、新建一个文件夹,然后进入到该文件夹目录下,执行 1 np...

vue 配置代理与Nginx 代理

在项目开发过程中,经常会遇到跨域问题。可以使用代理来绕过跨域问题。 一、vue中使用代理 在vue.config.js文件中配置代理: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 devServer: { // 本地...

Three.js 教程4--渲染一头牛

一、渲染一头牛 文件准备:1. obj模型文件 2. png贴图 1. 加载obj文件 1 2 <!-- 引入obj模型加载库OBJLoader.js --> <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>...

Three.js 教程3--顶点概念

一、自定义几何体 你可以直接调用BoxGeometry直接创建一个立方体几何体,调用SphereGeometry创建一个球体几何体。不过为了大家更好的建立顶点概念,通过下面的代码自定义了一个几何体,通过网格模型可以渲染出来两个三角形效果。 通过Threejs引擎的BufferGeometry和BufferAttribute两个API自定义了一个具有六个顶点数据的几何体。 1 2 3 4...

Three.js 教程2 -- 第一个3D场景

一、Three.js第一个3D场景 1.案例源码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60...

Three.js 教程1--初识Three.js

一、了解Three.js Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。 二、Three.js的使用场景 物联网3D可视化 3D商品在线预览 数据可视化 H5/微信小游戏 (跳一跳) 科教领域 (化学分子、蛋白质结构) webVR (VR与Web3D技术结合自然就衍生出来...

SCSS的@for指令

情景: ​ 给一组li元素或者菜单元素添加不同字体颜色的样式,不要傻乎乎挨个写下来。可以使用@for 指令和scss声明配合使用。 示例: 1 2 3 4 5 6 7 8 9 10 11 12 <div class="system-btn user-btn"> <p class="text">用户管理</p> </div> <...