Young Dreamer-腾讯云开发者社区

开发者社区

文档建议反馈控制台

腾讯云架构师技术同盟

文章/答案/技术大牛

发布

Young Dreamer

专栏成员

29

文章

46521

阅读量

32

订阅数

前端页面统计beacon调研

https 网络安全 http json xml

注意xhr.open('post', '/log', false)的第三个参数， false为同步请求，也就是document unload之前必须等待请求发出并响应； true表示异步请求，在document unload时容易被浏览器遗弃。

2019-07-10

7850

前端页面性能指标与采集方式

https 网络安全 api

目前业界常用的指标就是：白屏、首屏、domready和pageloaded四个指标，在usual-index.html中，我们通过performance API获取到响应的指标值。

2019-07-10

2.3K0

数据管理工具Flux、Redux、Vuex的区别

redux react 编程算法渲染 vue.js

组件式开发的核心思路是MVC，Model层的数据发生变化，驱动View层的视图发生变化。试想一个场景，如果ModelA触发ModelB变化，导致ViewB发生变化，ViewB发生变化时，触发了ModelC变化，ModelC又触发了其他Model的变化...，我们想知道一个View的变化究竟是那个数据导致的，追查起来就很困难，于是就记录数据的变化就很有必要了，其实换一个高大上的名字就是数据状态管理。

2019-07-02

1.2K0

Vue Router的懒加载路径

webpack 打包 javascript node.js vue.js

单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。解决办法 .vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。 vue的异步组件官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promise，只是Promise的resolve函数的参数是常规组件的定

2018-07-05

1.3K0

webpack4：连奏中的进化

webpack4在2月底的时候发布，这次webpack4有了一个名字"Legato"，也就是"连奏"的意思，寓意webpack在不断进化，而且是无缝(no-gaps)的进化。webpack的进化点是通过捐赠者和用户投票来决定的，之前在介绍webpack3的时候，曾给出过投票数在前几名的优化点，集中在用户体验、构建性能（速度和产出大小）、通用和适配性（es module、typescript、web assemble）等。webpack4发布了，下面将结合文档和实践，验证一下webpack是否兑现了当初的诺

2018-05-29

1.4K0

node.js如何制作命令行工具（一）

之前使用过一些全局安装的NPM包，安装完之后，可以通过其提供的命令，完成一些任务。比如Fis3，可以通过fis3 server start 开启fis的静态文件服务，通过fis3 release开启文件编译与发布；还有vue-cli，可以通过vue init webpack my-project来初始化vue+webpack的项目基础配置。最近有一个需求，需要写一个类似vue-cli的NPM包，通过命令行操作实现项目初始配置，所以就查看了相关资料，学习了一下如何使用node来生成自己的命令。编写命令行命

2018-01-31

1.8K0

webpack3新特性简介

6月20号webpack推出了3.0版本，官方也发布了公告。根据公告介绍，webpack团队将未来版本的改动聚焦在社区提出的功能需求，同时将保持一个快速、稳定的发布节奏。本文主要依据公告内容，简单介绍一下webpack3的新特性，以及在实际项目中的应用。升级到webpack3 升级到webpack3，只需要通过npm安装即可： npm install webpack@3.0.0 --save-dev webpack3几乎与webpack2完美兼容，除了会影响一些插件的使用，官方给出的数据是：98%的用户升

2018-01-31

1.2K0

如何使用Node.js编写命令工具——以vue-cli为例

vue-cli全局安装之后，提供了vue命令和vue init、vue list、vue build三个子命令，通过命令可以搭建基于vue.js的脚手架项目。本文简单介绍一下这些命令是如何实现的。 v

2018-01-31

1.8K0

webpack的Hot Module Replacement运行机制

使用webpack打包，难免会使用Hot Module Replacement功能，该功能能够实现修改、添加或删除前端页面中的模块代码，而且是在页面不刷新的前提下。它究竟是怎么运作的呢？本文主要从调试工具、配置文件、官方文档三个方面进行解析。调试工具首先从chrome的调试工具network中看看，代码改变的时候，页面与后端之间发生了什么？页面初始加载我们看到除了加载页面所依赖的文件外，多了一个连接，这是一个Server-sent Events，相关的介绍可以参考这篇文章，而且每隔一段时间都会向发送

2018-01-31

1.3K0

Android WebView 调试方法

调试Android WebView中的h5页面，通常就是通过alert和抓包工具来定位问题，效率低且无法直接调试样式或打断点，可谓是事倍功半。本文介绍一下我在项目中使用的新方法，能够通过chrome的开发工具在原生 Android 应用中调试 WebView。前提条件： Android4.4+ 基本原理： 1.在APP中启用 WebView 调试，开启调试后，Chrome DevTools才能对WebView进行远程调试； WebView.setWebContentsDebuggingEnabled(tr

2018-01-31

3.9K0

基于Webkit的浏览器关键渲染路径介绍

html css 编程算法

关键渲染路径概念浏览器是如何将HTML、JS、CSS、image等资源渲染成可视化的页面的呢？本文简单介绍一下渲染过程中涉及到的关键步骤。该过程分为四步：模型对象的构建、渲染树构建、布局、绘制。

2018-01-31

1.3K0

HTTPS静态服务搭建过程详解

HTTPS服务对于一个前端开发者来说是一个天天打招呼的老伙计了，但是之前我跟HTTPS打交道的场景一直是抓包，自己没有亲自搭建过HTTPS服务，对HTTPS的底层知识也是一知半解。最近正好遇到一个用户场景，页面需要调起手机的摄像头，这就要求页面服务必须是HTTPS的，所以就尝试搭建了HTTPS的静态服务，过程挺曲折的，所以总结一下分享给大家，希望能给看过本文的朋友一点帮助，提高工作效率。本文主要讲三个点：HTTPS基本原理、证书的获取和httpd的https配置。 HTTPS基本原理 HTTPS = H

2018-01-31

8730

好用的前端页面性能检测工具—sitespeed.io

引言最近在做HTTP2技术相关调研，想确认一下HTTP2在什么情境下性能会比HTTP1.x有显著提升，当我把http2的本地环境（nginx+PHP）部署完成后进行相关测试时，我遇到了以下问题：（1）平时使用的都是在线分析工具，如google的PageSpeed Insights和GTmetrix，这些工具无法提供线下测试环境；（2）自己通过chrome dev-tool的Perfomance进行分析，需要手动刷新，并手动记录，需要大量的重复工作，尤其是要控制变量测试的情况；（3）通过代码打log，

2018-01-31

3K0

webpack中tree-shaking技术介绍

之前介绍过webpack3的新特性，里面提到webpack2支持了ES6的import和export，不需要将ES6的模块先转成CommonJS模块，然后再进行打包处理。正基于此，webpack2引入了tree-shaking技术，能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。 webpack的tree-shaking案例下面结合实际代码来解释webpack2是如何实现tree-shaking的，示例代码可到github进行下载。示例

2018-01-31

9700

前端自动化测试漫长路之——Selenium初探

selenium 自动化测试

引言最近想解决前端开发或测试中的两个问题：一是界面UI的布局适配，能否在测试的过程中，通过命令操作真机打开相应页面然后截屏，通过对图片识别分类，发现有问题的图片，然后及时修复；二是页面性能分析，很多时候页面只能在指定的Webview中使用，能否直接通过命令打开指定的页面，分析页面在真实APP中的性能，并生成报告。这两个问题的前提就是通过命令直接操作手机App，带着问题找线索，于是我就结识了Selenium，下面将结合实例和大家分享一下。 Selenium是什么？先看一下官网的解释： Selenium

2018-01-31

1.5K0

一种实现无缝循环播放音乐方案

场景：为了节省页面资源，往往需要将一段小音频循环播放，通常做法是在audio标签上添加loop属性，但不幸的是，该属性并不能保证无缝循环（gapless looping）播放，明显的感觉到中间的停顿。解决方案：使用audio标签的Web API提供的方法和属性进行循环播放，具体如下事件名称事件作用 timeupdate 当前播放的时长发生改变时触发属性名称属性作用 currentTime 用来获取或控制当前播放的时间，

2018-01-31

2.5K0

简易前端模板引擎

模板解析解决的问题：将data和js+html片段解析成html片段，完成赋值和js逻辑，如下所示：输入： var data = { name: 'hwm', articles: [{ title: 'the first one' }, { title: 'the last one' }] }; tpl = '<p>Hi my name is <%this.name%>.</p><p>My articles are listed as followed:</p>' + '<ul

2018-01-31

1.5K0

正则学习笔记——重复、贪婪与懒惰

1.贪婪与懒惰贪婪与懒惰的适用情况是针对重复的情况；重复的限定符： * 重复>=0次 + 重复>=1次？重复0或1次 {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复n-m次

2018-01-31

6740

html5之histroy浅析

history是HTML5的新特性，我们可以使用它操作这个历史记录堆栈。（1）history提供了对浏览器历史纪录堆栈的读取，同时实现在访问记录中的前进和后退； history.length 历史记录堆栈的长度 back(),forward(),go(); window.history.back();效果等同点击了浏览器工具栏上的返回键； window.history.forward();效果等同点击了浏览器工具栏上的前进键； window.history.go();移动到历史记录中特定的位置,windo

2018-01-31

6910

canvas绘图不清晰的解决方案

现象描述　　同样大小的图片（60x60px）用canvas和DOM绘制，结果发现canvas的画面质量要差很多。结果如下图所示。　　上图中，左侧红框中的金币采用DOM绘制，右侧和下方的金币和文字等

2018-01-31

1.6K0

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态