![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
杂文
文章平均质量分 67
A-Tione
前端工作人员
展开
-
谷歌开发者工具之功能面板
Network 面板用的最多的面板,可查看 Ajax 请求,页面访问时间线等等。Performance 面板查看JS性能,详情可看我的另一篇文章:《如何使用谷歌浏览器开发者工具中的Performance分析网页性能》Rendering 面板查看页面渲染,F12打开开发者面板后按 esc 退出键打开 Rendering 面板。Coverage 面板查看代码使用率Unused Bytes 就是未使用的代码率,具体选中一行,就能...原创 2021-12-19 11:10:10 · 1139 阅读 · 0 评论 -
浏览器渲染原理
页面渲染流程浏览器收到web网页的内容后会开始下载 HTML、CSS、JS,并绘制 DOM树和 CSS 树,当两颗树都绘制完成后会合并成一个渲染树。然后再经过Layout、Paint、Composite,最终完成渲染。HTML 解析会被 JS 阻塞当 HTML 开始解析时遇到 JS 会停止解析 HTML,并执行 JS,因为 JS 可能会进行 DOM 操作,如果 HTML 解析完成后再执行 JS,性能开销会大一些。当然也可以在 js 脚本中加上 defer,这样 HTML 就能先被解析完.原创 2021-12-17 16:28:42 · 272 阅读 · 0 评论 -
房地产营销19讲之读书笔记
器、术、道我本人虽然目前从事的称之所谓程序员的工作,看似与销售风马牛不相及,但是在术与道的层面上,不同行业中很多道理是想通的,读完了房地产营销19讲,被作者的文字所触动,案例详实,考究严谨,每一讲或者说每一条抽象凝练的理论都有案例、数据支撑,读的很过瘾,很有启发,我将一些对我很有启发的笔记摘抄如下:第一讲:地产营销“逻辑树”房地产营销同样可以采用麦肯锡“逻辑树”的方法将其分成若干个树枝,然后再大树枝上面有分出若干个小树枝,小树枝上面又继续分出若干个小树枝,直到无法穷尽,最后吧营销工作细分成直原创 2021-07-21 21:28:25 · 1190 阅读 · 0 评论 -
大屏可视化之适配和布局
前言在做可视化大屏的时候,我们首先要保证UI图的比例不变,例如16:9的UI图,但大屏的比例可能是2:1,很多时候大屏的比例往往很少能与UI图的比例一模一样的,这个时候我们就要利用公式换算来适配大屏。例如16:9的UI图:适配大屏当页面首次加载时,判断视口的宽高,如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽,实际的显示宽度应该等于视口的高度*16/9。如果视口的宽/高 < 16/9 则说明视口高度比设计图高,实际的显示宽度应该等于视口的宽度,显示高度应等原创 2021-06-30 15:33:07 · 5147 阅读 · 2 评论 -
前端使用sentry来做线上监控
前言如果线上出现报错,不是后端的问题而是前端的问题,请问如何定位?这是我们目前项目中比较尴尬的一个点,有几次线上排查问题,问题定位到前端这个环节,因为没有日志的原因,很难确定bug的出处。于是我决定使用一个工具能打印出线上报错的日志。调研了一番,最后决定使用sentry。什么是sentry?无论测试如何完善的程序,bug总是免不了会存在的,有些bug不是每次都会出现,测试时运行好好的代码可能在某个用户使用时就歇菜了,可是当程序在用户面前崩溃时,你是看不到错误的,当然你会说:”Hey,原创 2021-05-11 17:14:29 · 1339 阅读 · 1 评论 -
《交互设计——以用户体验为中心的设计》读书笔记
以用户为中心的设计是什么?以用户为中心的设计是一种将产品、应用以及用户体验的使用者置于设计过程中心的位置的设计哲学。实际使用中,你的用户会不断对你设计的用户界面进行再设计。用户会成为与你共同进行设计的同事。你的团队与客户合作与客户合作至关重要,如果你问了你客户一些事情,他们所说的让你很吃惊,那么很可能表示你现在所做的事情可能是不正确的。了解你的用户最成功的产品或项目能够满足实实在在的人的需求。拥有不同的背景,不同的经验,不同水平专业知识的用户,他们喜欢和想要的东西也不相同。..原创 2021-02-28 20:00:58 · 597 阅读 · 2 评论 -
《人月神话》读后感
本人在做软件开发以来,一直对开发当中的种种现象保持疑惑,程序员与项目之间需要保持一个怎样的关系才能获得美妙的平衡?敏捷开发中所倡导的两周一个迭代,增量开发极限编程是如何演变而来的?这些名词一直跟随着我,经过最初的疑惑后也忘了去深究,直到读到《人月神话》这本1975年写的老书,原来道理自在其中,1975年就有人分析了软件开发过程中存在的问题,并给与了一些建议和预言,有些预言甚至在今天都仍然有效。焦油坑一个能用的简单工具程序,一个程序员独立开发一两天就可以完成。但一个成熟的软件产品,拥有上百个功能和.原创 2021-01-29 15:59:33 · 398 阅读 · 2 评论 -
git-secrets安装教程
前言最近在公司项目中commit代码时加强了检测机制,增加了pre-commit钩子用来检测代码。package.json文件:"pre-commit": "lint-staged""lint-staged": { "linters": { "*": "git secrets --scan-history" }}其中代码检测用到了git secrets,git-secrets是什么呢?主要是防止将密码和其它敏感信息提交到git的一个插件,我在这个安装这个原创 2021-01-12 14:52:16 · 874 阅读 · 0 评论 -
webstorm模板快速生成
前言我们在使用webstorm开发项目的时候,有时会重复写多个很相似的代码块,经常要从别的代码处复制粘贴后修修改改。那么能不能将这些重复经常写的代码块抽象出来输入一行命令就能展示呢?可以,webstorm内置了这个功能,我们来说下如何使用。步骤1、在webstorm设置中搜索live templates2、找到需要设置的模板类型,我这里选择的是JavaScript(typeScript也包含在js模板设置中),3、添加模板,输入你要取的快捷名,模板介绍等等。...原创 2021-01-07 16:44:37 · 1284 阅读 · 0 评论 -
前端接收下载流文件如何处理(如Excel文件)?
function getExcel(url, name, type, method) { return Axios[method || 'get']((baseUrl + url), { // 处理二进制对象 responseType: 'blob', }).then((res) => { const blob = new Blob([res.data], {type: type || 'application/vnd.openxml..原创 2020-12-20 22:05:34 · 1757 阅读 · 0 评论 -
数据可视化Echarts介绍
前言Echarts原先是由百度开源的一款数据可视化库,现在由Apache Software Foundation (ASF) 孵化管理。它是一款文档非常健全的数据可视化库,你只需要按照文档一步步做,就能做出你想要的可视化效果。那么我们现在开始吧。安装Echarts在项目中安装:yarn add echartsyarn add --dev @types/echarts在项目中引用:import echarts from 'echarts’最后使用echar.原创 2020-10-31 21:09:08 · 1063 阅读 · 0 评论 -
前端使用cypress自动化测试
前言cypress官网解放劳动密集型工作,拥抱智力密集型工作,用代码测试代码,测试驱动开发,做一名会偷懒的工程师。使用cypress测试框架,配置简单,上手容易,界面友好,支持录屏,时间碎片,一键执行。安装安装这一块是最麻烦的,有可能安装过程中会被墙。npm install cypress --save-devyarn add cypress --dev如果以上过程很慢,可以在官网下载安装包:cypress下载运行1、如果是本地下载完成后:解压..原创 2020-07-13 15:16:27 · 836 阅读 · 0 评论 -
《用户体验要素》读后感
开发一款产品,我们若从用户体验的角度出发来认识,可以从下到上五个层面来分析。表现层 框架层 结构层 范围层 战略层就像苹果,战略层是核,范围层结构层框架层是果肉,表现层是皮。例如一个网站,进入首页用户第一眼看见的便是表现层,一款产品从主意的诞生到产品最终的实现其实是一个漫长的道路,用户看见的表现层实际上是经过漫长开发后最后得到的面子,其面子中的里子凝聚了公司想要通过产品传递给用户...原创 2020-01-07 22:28:50 · 437 阅读 · 0 评论 -
Electron自定义导航栏
默认情况下electron会有一个默认的原生导航栏。但在具体的业务场景下,这个原生的导航栏显得就那么适用了。需要更进一步根据产品自定义导航栏。一、去除原生导航栏在主进程代码中配置frame: false 关闭原生导航栏import {BrowserWindow} from 'electron'mainWindow = new BrowserWindow({ ...原创 2019-11-30 15:53:14 · 5294 阅读 · 2 评论 -
《2小时品牌素养》读后感
拿起此书时,直观上觉得厚,不好读。但看完之后,颇有收获,而且易读、好读,推荐产品、运营相关岗位的朋友可以读读此书。读完此书相信你会对品牌这个词更多一分理解。什么是品牌?品牌的本质是抢占消费者心智资源,而创造顾客关键在于通过精准定位获得顾客心智的认同。品牌战略的核心原理,就是通过定位占有顾客心智中的一块心智资源,抢占心智资源就其本质而言是一场新时代的圈地运动。什么是核心竞争力...原创 2019-11-25 15:03:50 · 1001 阅读 · 0 评论 -
面向对象中的设计模式
每一个设计模式描述了一个在我们周围不断重复发生得问题,以及该问题得解决方案的核心。这样,你就能一次又一次地使用该方案而不必做重复劳动。设计模式的核心在于提供了相关问题的解决方案,使得人们可以更加简单方便的复用成功的设计和体系结构。设计模式的四个基本要素:模式名称 问题(应该在何时使用模式) 解决方案(设计的内容) 效果(模式应用的效果)设计模式分为三类,创建型模式主要是创建对象,结...原创 2019-11-07 14:57:20 · 184 阅读 · 0 评论 -
《写给大家看的设计书》读后感
页面设计的四个基本原则亲密性 重复性 对齐性 对比性亲密性:简单的说就是将相关的东西有意识地关联到一起,段落内容、元素、图片等等,明确你要表达的意图,然后将其有联系的内容分组放在一起。重复性:找出一两个突出的元素或者是设计风格,有意识地重复,让用户明白你在页面中重复性的强调某些内容,图片、花体文字都可以,出色的重复能让用户明白他在浏览同一个网站或者同一个主题下的内容。对齐性:但...原创 2019-10-31 22:29:37 · 708 阅读 · 0 评论 -
如何使用谷歌浏览器开发者工具中的Performance分析网页性能
当我们在进行大并发的直播消息互动时,对浏览器的负荷是比较大的,如何提供一种方法来评估实时网页性能以及相关的数据呢?可以用谷歌浏览器开发者工具中的Performance绘制火焰图对网页进行分析。接下来我们通过一步步使用Performance,来看看Performance有哪些强大的功能!1、工具位置打开f12开发者工具,选中Performance。我们可以看到如上界面。表示...原创 2019-10-28 14:34:28 · 10350 阅读 · 0 评论 -
《结网》读后感
今天趁着周末,一口气读完了王坚老师写的《结网》,内容很丰富,大致将整个产品经理工作的流程全部梳理了一遍,并对互联网上一些普遍的概念做了总结,对于刚刚入行的产品经理和想要了解产品经理这一行的人来说是值得一读的。全书大致分为三部分:职业选择如果你是个善于观察,乐于了解细节的人,性格又介于外向与内向之间,那么产品经理这份工作还挺适合你的。不用像销售奔波于客户之间,也不用像开发整天对着代码,更...原创 2019-09-22 23:13:33 · 483 阅读 · 0 评论 -
《浪潮之巅》读书笔记
幕后的英雄——风险投资哲学家黑格尔讲:”凡是现实的都是合理的;凡是合理的都是现实的。“(All that is real is rational, and all that is rational is real.)这句话在恩格斯的《反杜林论》中成为最有进步意义的话。任何事情都有它发生、存在和发展理由,当然如果这个理由不成立了,它终究就会消亡。风投在六十年代后(而不是二战以前)在美国(而不是世...原创 2019-09-19 15:05:27 · 646 阅读 · 0 评论 -
webpack基础配置
概念本质上,webpack是一个现代javaScript应用程序的静态模块打包器(module bundiler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。接下来的配置信息是在默认已经安装好node.js,npm,webpack模块的基础上进行的,若还没相关依赖,请先安装相关依赖。en...原创 2019-08-28 18:03:20 · 126 阅读 · 1 评论 -
JS判断浏览器类型和版本的方法
核心API:navigator.userAgent,返回当前浏览器的用户代理(user agent)字符串。以判断是否为chorme浏览器为例子:linkChrome(obj) {//判断是否为chrome浏览器 let vm = this let agent = navigator.userAgent.toLowerCase()//获取浏...原创 2019-07-16 17:23:05 · 446 阅读 · 0 评论 -
如何使用浏览器的F12开发者工具调试页面?
一,背景介绍通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的代码,用好F12能显着提高开发者的工作效率,加快调试的速度。二,知识剖析1,F12开发人员工具是一套按需采用的工具,网站开发人员可以随时在任何网页上使用F...原创 2018-05-27 22:25:23 · 137719 阅读 · 12 评论 -
webstorm上svn的如何安装使用?
1、首先要下载SlikSvn网址为:https://sliksvn.com/download/ 进入该网站可以根据需要下载32位的或者64位的svn。下图为要下载的图标样式点击下载即可。2、在webstorm中配置svn 。打开你的webstorm依次点击 File -> Settings 然后在弹框中点开 Version Control 点击下面的SubVersion,在Use...转载 2018-08-05 10:20:43 · 832 阅读 · 0 评论