前端
南麟剑首
前端开发
展开
-
一图说明带团队(实践中)
怎么带团队?先推荐一本书吧《管人先管己,带人先带心》下面这张图是我实践得出的经验,纯粹的实践凝练的干货,或有不合理地方我也在持续优化我自己的管理策略,欢迎斧正,指点,唯有出错,识错,方能成长。带团队呢,其实说难很难,说简单也简单,说难呢那就说不清道不明了。那就简而言之吧,不变的原则“挣钱”,公司的存在其实99.99%都是为了搞钱,为了公司能挣钱,那么就要有好的创意和产品(此处只谈产品),好的产品想占有市场,那就要产出的质量更高,版本迭代更快。这背后就需要有一个高素质,产能卓著的团队做支撑。有一原创 2021-09-14 18:48:55 · 122 阅读 · 0 评论 -
网站导航部分-鼠标跟随滑动效果
htm部分<div class="header"> <div class="logo" id="toIndex"> <img src="../imgs/pc/common/header/logo.png" alt="" /> </div> <ul class="menu" id="menu"> <li id="menu_know" class="menu-item">了解OKR</li> .原创 2021-07-06 15:57:40 · 307 阅读 · 0 评论 -
vue组件库和组件文档生成
公司现役组件库项目,公共资源或者新老项目切换仓库调整 src 目录结构|--src|-- App.vue|-- main.js|-- packages // 新建此文件夹用来存放组件 |-- index.js // 组件入口 |-- button.vue // 新增一个button组件,记得带上name |-- icon // 新增一个icon组件,记得带上namepackages/index.js// 所有组件的入口import原创 2021-03-09 20:52:18 · 3194 阅读 · 1 评论 -
前端性能优化记录
渲染优化渲染优化是前端优化中一个很重要的部分,一个好的首屏时间能给用户带来很好的体验,这里要说的一点是关于首屏时间的定义,不同的团队对首屏时间定义不一样,有的团队认为首屏时间就是白屏时间,是从页面加载到第一个画面出现的时间。但是当我们说到用户体验的时候,仅仅是这样还达不到效果,所以有的前端团队认为,首屏时间应该是从页面加载到用户可以进行正常的页面操作时间,那么我们就依照后者来进行说明js css 加载顺序说渲染优化之前,我们还需要说一个小插曲,就是比较经典的一道问题浏览器地址栏输入url发生了什么原创 2020-11-27 15:25:33 · 357 阅读 · 1 评论 -
part03~开发通用前端UI框架(图表封装,高效mock,请求封装,表单校验,图标管理)
封装图表组件我们选择免费的,功能比较多的 Echart,当然了你也可以选择 AntV,也有 highChart安装 echart: npm install echarts --save新建 chart 组件库:components->chart->Chart.vue但是此时有些问题,就是这个组件的数据渲染的一些功能,有很多异步的操作,所以你想针对这个 dom 去操作时...原创 2020-04-02 09:58:00 · 847 阅读 · 1 评论 -
call() bind() apply() 一看就懂
// 安啦,看似懵懂,其实简单的一比// 废话少说直接扯代码// 举个栗子var name = '哪吒', age = 13;var obj = { name: '松岛老师', objAge: this.age, fun: function () { console.log('name:', this.name + ',Age:' + this.age); }}...原创 2019-09-04 18:13:44 · 217 阅读 · 0 评论 -
vue中使用eslint的格式化工具
ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等。目前网络上绝大部分的格式化eslint标准的代码方法都比较坑。目前没有一个可以格式化html、css、符合ESlint的js、vue的插件经过反复尝试拼凑出来在vue项目中使用eslint时快速解决代码格式问题的方法解决方案:第一步:安装插件1)ESlint:javascript代码检测工具,可以配...原创 2019-08-17 01:01:36 · 5479 阅读 · 2 评论 -
浏览器解析js的机制
浏览器解析JS机制浏览器解析JS机制一、浏览器的运行机制 浏览器是多进程的,其中包含了: 1)GPU进程 2)第三方插件进程 3)浏览器渲染进程 4)Browser进程 这里面的进程很好理解,浏览器本身,第三方插件扩容,浏览器渲染,GPU。其中,浏览器渲染JS就是通过浏览器渲染进程进行的。 浏览器渲染引擎是多线程的,其中包括以下线程: 1)GUI渲染线程 --...原创 2019-07-31 13:35:20 · 572 阅读 · 0 评论 -
web性能优化系列(5)react-ssr
vue渲染面临的问题:1、脚本依赖,加载耗时蓝色(Loading):网络通信和HTML解析黄色(Scripting):JavaScript执行紫色(Rendering):样式计算和布局,即重排绿色(Painting):重绘灰色(other):其它事件花费的时间白色(Idle):空闲时间事件总结:Loading事件事件描述Parse HTML浏览器执行HTML解析Fini...原创 2019-03-12 01:29:14 · 474 阅读 · 0 评论 -
web页面性能优化系列(4)缓存优化
自动化缓存策略-处理大规模缓存的方案http-Header(协议头部):基于http-Request(请求头部)和http-Response(响应头)来实现的缓存策略缓存策略(一)cache-control属性:max-age:指定缓存的有效时间s-maxage:只能指定Public类型的缓存,优先级高于max-ageprivate:私有缓存,如果个人计算机上的缓存public:...原创 2019-02-27 00:31:03 · 540 阅读 · 0 评论 -
typescript 快速上手
假如翻到了此文章,如果你写过类似java,c#等强类型面向对象语言,就可以阅读此文,迅速入手TS,否则就移步到此:https://ts.xcatliu.com/introduction/what-is-typescript.htmlts:优点:1,增加了代码的可读性和可维护性(编译阶段就发现大部分错误,优越于运行时发现错误)2,TypeScript 最大的优势便是增强了编辑器和 IDE 的功...原创 2019-02-20 10:01:31 · 489 阅读 · 0 评论 -
web页面性能优化系列(1)懒加载和预加载
优化前要了解web基础知识:web本质是一个基于B/S架构的GUI软件当我们通过网络进行访问:是一个动态的,增量的加载静态资源的过程浏览器的一个请求到返回都经历了什么?整个过程有哪些可以优化的点?1,dns是否可以通过缓存减少dns的查询时间2,网络请求能否走最近的网络环境3,相同的静态资源能否缓存能否减少http请求的大小4,减少http请求次数5,服务端渲染html,c...原创 2018-11-17 01:05:51 · 289 阅读 · 0 评论 -
web页面性能优化系列(2)页面重绘和回流
浏览器渲染线程互斥的概念问题:css渲染会影响js渲染性能嘛?答:会的,原因是在浏览器渲染过程渲染css和渲染js各开启一个线程去工作但是这两个线程是互斥的,当渲染css在工作,渲染js的线程将会停止工作,则如果页面css频繁进行重绘势必会降低js的渲染速度回流的概念当rander tree中的一部分或者全部因为元素的规模尺寸,布局,隐藏等改变而需要重新构建render tree 这个过程...原创 2018-12-19 01:39:19 · 435 阅读 · 0 评论 -
web页面性能优化系列(3)浏览器存储-包含PWA基础方案
客户端浏览器存储技术涉及到几个点分别是localstorage、cookie、sessionstorage、indexdb,service worker ,PWAcookie:1,存储数据4KB左右2,需要设置过期时间3,httponly应用场景1,用于与服务器发生交互场景cookie解决最重要的一个问题就是HTTP的无状态请求,即通过cookie让服务器识别访问者是谁以此...原创 2018-12-20 01:20:09 · 523 阅读 · 1 评论 -
web页面性能优化系列(附录)其他必会的基础知识
001:即建立TCP链接1,根据域名解析IP获取IP地址2,TCP|IP三次握手1,根据域名解析IP获取IP地址—发生在互联层DNS解析IPA:浏览器会先解析我们输入的url地址,浏览器会先搜索自身的DNS缓存,看自身的缓存中是否有对应的条目,而且没有过期,如果有且没有过期则解析到此结束。B:如果浏览器自身的缓存里面没有找到对应的条目,那么Chrome会搜索操作系统自身的DNS缓存,如...原创 2018-11-17 02:17:16 · 293 阅读 · 0 评论 -
WebPack4.0拿去即用系列(三)--优化
优化前提:webpack4.0这个版本已经给我们做了大量优化,所以咱们不涉及4.0之前的版本一、开发时打包优化1,根目录创建一个新的文件专门用于将所有第三方不需要打包的统一做一次路径映射如:webpack.unpackage.js2,在webpack.unpackage.js中添加let DllPlugin = require("webpack/lib/DllPlugin") mod...原创 2018-11-16 16:57:26 · 463 阅读 · 0 评论 -
WebPack4.0拿去即用系列(一)
先来一张图:诠释一下webpack该干的活**作用:**分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。规范:Common具体常用功能:1、代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。2、文件优化:压缩 JavaScrip...原创 2018-11-14 17:58:56 · 452 阅读 · 0 评论 -
WebPack4.0拿去即用系列(二)
常用的插件:npm install webpack webpack-cli webpack-dev-server css-loader style-loader mini-css-extract-plugin html-webpack-plugin less less-loader clean-webpack-plugin url-loader html-withimg-l...原创 2018-11-15 16:33:31 · 242 阅读 · 0 评论