需要实时桌面推送的功能，就像平时QQ，微信消息推送那种，这个时候我们就可以用到html5WebNotification这个API了。  Notification弹出一个通知在桌面右下角：if(!("Notification"inwindow)){//alert("Thisbrowserdoesnot...

前端其实是个很大的范畴。我这里只针对web开发的前端而言（下文统称前端）。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：html（超文本标记语言）、css（级联样式表）、JavaScript。 前端也算是经历了一个比较漫长...

web性能优化，主要分为前端和后台两个部分性能优化，后台性能优化决定了web能不能用，前端优化决定了其好不好用，也就是牵涉到前端用户体验和web易用性等情况，所以前端性能与用户体验是有着极大的关联的。首先，前端优化之前，我们需要知道其整体性能情况，然后对整体情况进行细分与分析，了解其每一步所损耗的时间和消耗的原由，然后...

web前端开发技术人才越来越吃香，而且web前端领域划分越来越细，对技术的需求越来越高，想学习web前端的人也是越来越多。那么，如何学习web前端知识？从哪开始？转型成为web前端工程师需要学些什么？小白到高手需要多久？ 1、转型web前端需要学什么第一阶段：你要从最基础的html/css开始，简单地说，ht...

SVG本身是基于XML的一种独立的数据格式，用于声明式的2D矢量图形。但是，它也可以嵌入到 html 文档中，这是所有主流浏览器都支持的。让我们考虑一个例子，如何使用SVG绘制一个可调整大小的圆：<htmlhljs-string">"height:100%;width:100%"><...

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前...

一、打包分析1.1、速度分析我们的目的是优化打包速度，那肯定需要一个速度分析插件，此时 speed-measure-webpack-plugin 就派上用场了。它的作用如下：分析整个打包总耗时每个 plugin 和 loader 的耗时情况首先，安装插件npm...

//DOM<span>{{obj.a}}</span><button@click="changeA">clickme</button>data(){return{name:'a'};},watch:{name:function(value,oldValue){consol...

之前写过一篇旧react项目安装并使用TypeScript的文章：在React旧项目中安装并使用TypeScript的实践。博客里使用awesome-typescript-loader对Typescript代码进行检测和转换。而这几天又修改了一下自己的脚手架，使用@babel/preset-typescript来处理T...

最近在学习react框架，之前一直都是用vue 开发，知道在vue 中知道如何配置一下相关的webpack 有助于开发，学react 过程中，我也在想这些该怎么配置啊，所以就有这篇文章。这篇文章主要是讲react-create-app生成的项目利用react-app-rewire...

之前有用 webpack4与babel7改造基于vue-cli2生成的工程模板，介绍文章在此。之后通过一些实践，除去了cli工具相对复杂的配置结构，提供轻量化版本的配置方案。之所以说是轻量化，是相对于vue、react等框架提供的官方cli工具而言的。并不是说这些cli工具不好，它们本身提供了开箱即用的良好特...

在本教程中，我们将完成一个关于如何在Node.js 中使用 JavaScript ，并结合JWT认证，实现基于角色（rolebased）授权/访问的简单例子。作为例子的API只有三个路由，以演示认证和基于角色的授权：/users/authenticate   ...

所谓动态图片指的是接口返回的图片地址，这里的地址指的是本地的图片地址，而非网络图片的url。本地有一个image文件夹，存放需要用到的图片。按照接口返回的图片地址比对去加载。webpack加载图片首先想到的是file-loader或者url-loader   加载图片的配置首先安装file...

日常我们开发了一个库之后，如何打包之后提供给别人使用呢？如果你不清楚，就继续看吧！！！ mkdirlibrarycdlibrarynpminit-y经过以上步骤后会生成一个library文件夹，里面包含一个package.json文件。然后简单修改为如下所示：{"name":"library","versio...

Plugin(插件)是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发webpack的编译过程。这篇文章将尝试探索webpackplugin，揭秘它的工作原理，以及如何开发一个plugin。 关于Plugin的作用，引用...