A-Tione-CSDN博客

原创谷歌开发者工具之功能面板

Network 面板用的最多的面板，可查看 Ajax 请求，页面访问时间线等等。Performance 面板查看JS性能，详情可看我的另一篇文章：《如何使用谷歌浏览器开发者工具中的Performance分析网页性能》Rendering 面板查看页面渲染，F12打开开发者面板后按 esc 退出键打开 Rendering 面板。Coverage 面板查看代码使用率Unused Bytes 就是未使用的代码率，具体选中一行，就能...

2021-12-19 11:10:10 1116

原创浏览器渲染原理

页面渲染流程浏览器收到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 250

原创 Nuxt.js框架服务端渲染二进制blob流下载

Server端在服务端添加一个 stream 属性，用来标识为流下载的接口。[`${METHOD.get} /env/download`]: async ctx => { const res = await ctx.fetch('env/download', { method: METHOD.get, stream: true, }) ctx.body = res[0].stream() },在服务端拿到数据时 blob() 一下。..

2021-09-18 10:34:10 697

原创 DNS 与 TCP 入门

DNS：domain name system：域名系统DNS 是指用户在浏览器中输入 baibu.com 回车，这个域名会先问浏览器有没有DNS缓存，如果没有缓存就会问操作系统有没有DNS缓存，如果还没有，则向ISP（移动、联通、电信等网络运营商）发送请求，运营商会返回一个对应的 IP，浏览器拿到这个 IP 就可以开始建立 TCP 连接了。通过域名拿到对应的 IP，着整个流程就是 DNS。hosts：Host 指的就是操作系统中的 DNS 缓存。TCP之三次握手：假设 A

2021-08-11 20:52:55 584

原创 TypeScript基础知识

前言TS是 JS 的泛型，你可以理解为可以把 TS 当成 JS 来用也没问题，只是TS 比 JS 多了一些额外的用法。TS 的用法TS 有 JS 没有的东西anylet a:any = 'hi'b.nameany没有任何限制，都可以。unknowntype B = {name: string}let a:unknown = JSON.parse('{"name":"tione"}')console.log((b as B).name) // 断言同

2021-08-10 20:11:45 127

原创房地产营销19讲之读书笔记

器、术、道我本人虽然目前从事的称之所谓程序员的工作，看似与销售风马牛不相及，但是在术与道的层面上，不同行业中很多道理是想通的，读完了房地产营销19讲，被作者的文字所触动，案例详实，考究严谨，每一讲或者说每一条抽象凝练的理论都有案例、数据支撑，读的很过瘾，很有启发，我将一些对我很有启发的笔记摘抄如下：第一讲：地产营销“逻辑树”房地产营销同样可以采用麦肯锡“逻辑树”的方法将其分成若干个树枝，然后再大树枝上面有分出若干个小树枝，小树枝上面又继续分出若干个小树枝，直到无法穷尽，最后吧营销工作细分成直

2021-07-21 21:28:25 1160

原创大屏可视化之适配和布局

前言在做可视化大屏的时候，我们首先要保证UI图的比例不变，例如16:9的UI图，但大屏的比例可能是2:1，很多时候大屏的比例往往很少能与UI图的比例一模一样的，这个时候我们就要利用公式换算来适配大屏。例如16:9的UI图：适配大屏当页面首次加载时，判断视口的宽高，如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽，实际的显示宽度应该等于视口的高度*16/9。如果视口的宽/高 < 16/9 则说明视口高度比设计图高，实际的显示宽度应该等于视口的宽度，显示高度应等

2021-06-30 15:33:07 4987 1

原创 Webpack之优化

单独打包 runtime什么是runtime？为了让某个东西能够运行而提供的代码叫runtime，这里指为了能让IE运行而提供的代码。通过单独打包runtime，在代码和依赖没有变化的情况下，此后即可不再被重复打包，节省时间。webpack.config.jsmodule.exports = { optimization: { runtimeChunk: 'single', },}单独打包 node 依赖webpack.config.jsmodule.e

2021-06-24 19:54:11 346

原创 webpack配置打包支持scss、自动import全局文件、分享变量、单独提取css文件、自动生成HTML页面

支持scsswebpack.config.js { test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], },scss自动import全局文件webpack.config.js use: [ 'style-loader',

2021-06-23 20:22:54 1894

原创 webpack配置打包js，jsx，ESLint插件、TypeScript、TSX

前言webpack输入代码支持IE用babel-loader打包JS用babel-loader打包JSX给webpack

2021-06-18 15:41:37 2422

原创 Webpack之plugin浅析

Webpack流程图plugin思路自己写webpack pluginloader与

2021-06-16 15:18:57 360

原创 Webpack之源码浅析

前言用了很长时间webpack，lodaer、plugin也用的很多了，但始终好奇webpack的内部运行机制是怎样的，我花了些时间看了些webpack源码，在这里用文字将他们记录下来。准备工作创建三个文件demo、webpack、webpack-cli 三个项目，其中demo 项目用于调用 demo/node_modules/webpack-cli 将 src/index.js 打包为 dist/main.js webpack 项目盛放的是从 github 下载的 webpack 源码.

2021-06-11 17:26:55 1548

原创前端使用sentry来做线上监控

前言如果线上出现报错，不是后端的问题而是前端的问题，请问如何定位？这是我们目前项目中比较尴尬的一个点，有几次线上排查问题，问题定位到前端这个环节，因为没有日志的原因，很难确定bug的出处。于是我决定使用一个工具能打印出线上报错的日志。调研了一番，最后决定使用sentry。什么是sentry？无论测试如何完善的程序，bug总是免不了会存在的，有些bug不是每次都会出现，测试时运行好好的代码可能在某个用户使用时就歇菜了，可是当程序在用户面前崩溃时，你是看不到错误的，当然你会说:”Hey,

2021-05-11 17:14:29 1315 1

原创在nuxt.js框架下阻止路由跳转

前言在nuxt.js框架中，是自带了路由处理的，但是它自带的路由功能并没有vue-router的功能强大。例如我们的要做一个路由守卫，在路由发生跳转前做一些判断，如果判断不通过则不给路由跳转。怎么做？仅仅只用nuxt.js框架很难解决，但我们可以通过nuxt.js中的plugin插件系统引入vue-router。解决文件路径：src/plugins/router.jsexport default ({ app ,store }) => { app.route.

2021-04-29 09:51:24 1914

原创发送和接收二进制数据（Blob），也就是流

前言可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认)，"arraybuffer", "blob", "document","json" 和 "text".response属性的值会根据responseType属性包含实体主体（entity body）。它可能会是一个ArrayBuffer,Blob,Document,JSON, string,或者为NULL(如果请求未完成或失败)...

2021-04-25 15:44:59 2815

原创 Webpack之loader

前言基于上次实现的简易打包器，我们只需在获取文件的位置区分是js文件还是css文件，如果是css文件则走css相关逻辑。核心代码：let code = readFileSync(filepath).toString() if(/\.css$/.test(filepath)){ code = ` const str = ${JSON.stringify(code)} if(document){ const style = document.c

2021-04-17 20:16:43 96

原创 Webpack之核心——打包

为什么要打包因为要解决两个关键问题：因为某些浏览器不支持： import和export关键字。防止文件过多。import b from './b.js'const a = { value: 'a', getB: () => b.value + ' from a.js'}export default a1、浏览器不支持 import和export关键字虽然谷歌浏览器支持 <script type="module"></script> 写法，可

2021-03-30 20:31:01 483

原创 nuxt.js之SSR服务端内存泄漏导致CPU过高的解决过程

问题最近在公司维护nuxt项目时，线上遇到了一个问题——访问网站，网站会报502或者JS、css资源报502。去运维那一查pm2，项目node服务器的CPU达到了100%，实际上这段时间并没有人访问，那是为什么CPU会100%从而导致node服务器无法正常运行？分析太多的分析就不说了，期间向几个方向都排查过：nuxt社区有人说是nuxt框架问题，某些版本会出现node服务端内存泄漏。第三方组件未在destroy时进行释放，或者事件监听，页面关闭后未解绑事件。代码的书写问.

2021-03-24 11:19:24 5325 6

原创 Webpack之AST、Babel、依赖

什么是ASTBabel相关使用通过检测key来避免重复循环依赖

2021-03-20 17:08:25 594

原创在Nuxt项目中使用Nginx

Nginx的好处性能：静态文件（CSS、JS）直接走Nginx读取，无需再走3000端口消耗node服务。请求接口走3000端口到node服务。总的来说可以为node服务节省一部分静态资源的性能。拓展性：为后期反向代理，负载均衡做准备。可在Nginx上配置转发多个node服务，实现全年365天*24小时无间隙服务器运转。使用Nginx配置静态文件走gzip压缩，在Nginx上配置。server { listen 80; //ipv4 listen [:.

2021-03-16 19:49:57 1023 1

原创《交互设计——以用户体验为中心的设计》读书笔记

以用户为中心的设计是什么？以用户为中心的设计是一种将产品、应用以及用户体验的使用者置于设计过程中心的位置的设计哲学。实际使用中，你的用户会不断对你设计的用户界面进行再设计。用户会成为与你共同进行设计的同事。你的团队与客户合作与客户合作至关重要，如果你问了你客户一些事情，他们所说的让你很吃惊，那么很可能表示你现在所做的事情可能是不正确的。了解你的用户最成功的产品或项目能够满足实实在在的人的需求。拥有不同的背景，不同的经验，不同水平专业知识的用户，他们喜欢和想要的东西也不相同。..

2021-02-28 20:00:58 567 2

原创 Docker化Node应用

docker化前准备根目录添加：.dockerignore文件node_modules*.logDockerfile文件FROM node:12# Create app directoryWORKDIR /usr/src/appCOPY package.json ./COPY yarn.lock ./RUN yarn installCOPY . .EXPOSE 3000CMD [ "yarn", "start" ]docker化Node应用build应.

2021-02-25 14:28:15 142

原创 nuxt框架偶发报错Loading chunk {n} failed

最近在维护公司项目中的website网站时，发现刷新加载页面时js或css资源会偶发性地出现以下图片报错。该项目是基于nuxt框架搭建的SSR服务器预渲染。于是我思考是不是因为网速慢异步加载导致的报错，我将网速调整成3g网络刷新试验，结果并没有预料中频发。于是我又尝试将项目中的link标签引用的一些css、js文件中异步引用的文件直接打包成一个文件，重新发布后测试仍会偶发。会是哪里出问题了呢？去nuxt社区瞧瞧。找到了一个遇到同样问题的人，这个人2017年就遇到了这个报错并向作者提出。作者答

2021-02-18 15:19:21 801 2

原创《人月神话》读后感

本人在做软件开发以来，一直对开发当中的种种现象保持疑惑，程序员与项目之间需要保持一个怎样的关系才能获得美妙的平衡？敏捷开发中所倡导的两周一个迭代，增量开发极限编程是如何演变而来的？这些名词一直跟随着我，经过最初的疑惑后也忘了去深究，直到读到《人月神话》这本1975年写的老书，原来道理自在其中，1975年就有人分析了软件开发过程中存在的问题，并给与了一些建议和预言，有些预言甚至在今天都仍然有效。焦油坑一个能用的简单工具程序，一个程序员独立开发一两天就可以完成。但一个成熟的软件产品，拥有上百个功能和.

2021-01-29 15:59:33 381 2

空空如也

空空如也