jm1999
- 浏览: 196708 次
-
最新评论
文章列表
[转]babel到底该如何配置?
- 博客分类：
- 打包构建
背景
说起ES6，webpack，打包，模块化总是离不开babel，babel作为一个js的编译器已经被广泛使用。在babel的官网是这样介绍它的：
Babel is a JavaScript compiler.
Use next generation JavaScript, today.
大家都知道js作为宿主语言，很依赖执行的环境（浏览器、node等），不同环境对js语法的支持不尽相同，特别是ES6之后，ECMAScrip对版本的更新已经到了一年一次的节奏，虽然每年更新的幅度不大，但是每年的提案可不少。babel的出现就是为了解决这个问题，把那些使
phantom.js - HTML To PDF
- 博客分类：
- 研究实验
HTML 转 pdf
import phantom from 'phantom';
const pageToPdf = (url) => {
phantom.create().then((ph) {
ph.createPage().then((page) => {
page.open(url).then((status) => {
// 配置存储的pdf地址
page.render('存储的地址.pdf').then((status) => {
console.log('Page rendered');
ph.exit(); ...
为了让iOS系统下用默认的滑动更加流畅，给滚动区域添加了如下样式：
-webkit-overflow-scrolling:touch
引起APP在iphone 6以上机型的崩溃率升高。经排查验证，去掉这个样式后就恢复正常了。
原因推测：因为这个样式会开启GPU加速，导致APP 运行内存过高而引起的崩溃。
先记录一下。
eslint规则记录
- 博客分类：
- 研究实验
ESLint 支持几种格式的配置文件：
JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
(弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在
manifest 文件
要向使用application cache 需要为页面的html标签添加manifest属性，属性值是manifest文件路径，可以使用同源的绝对地址，也可以使用相对地址。
<!doctype html>
<html lang="zh" manifest="main.manifest">
</html>
application cache是通过mannifest文件来管理的，manifest文件是简单的文本文件，内容是需要被缓存供离线使用的文件列表，及不需要被缓存或读取缓 ...
(转自http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)
网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。
上图的绿色方块不断滚动，顶部会提示它的可见性。
传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。
目前有一个新的 Inter ...
JavaScript的语法解析与抽象语法树
- 博客分类：
- 研究实验
抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。
JavaScript语法解析 ...
sourcemap文件存储的是JS压缩前和压缩后的映射关系，map文件内容本身就是个json文件。
json格式如下：
version 版本号
sources存储的是各个依赖的子文件列表 sourcesContent存储的是各个依赖的子文件源码
其他几个字段暂时还没研究，不过暂时也不需要用到
npm上有对应的sourcemap包，可以用于解析.map文件。代码如下：
var fs = require('fs'),
path = require('path'),
sourceMap = require('sour ...
web浏览器中，当我们出现一个浮层，浮层里面也有滚动条的时候，且有部分背景半透明的时候，就会发现，当我们滚动浮层里面的小滚动条的时候，背后整个页面都跟着一起滚走了。
方案1：监听浮层的touchstart,touchmove事件, 计算浮层滚动区域的最大滚动区域，在touchmove事件中判断规则，根据情况阻止默认事件(popup_box_scroll为浮层滚动区域的id)
依赖方法：
let isMy = function(node, id){
return node.getAttribute('id') === id;
},isMyOrParent ...
webpack - CSS提取
- 博客分类：
- 打包构建
vue-style-loader启用 CSS 提取
// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// CSS 提取应该只用于生产环境
// 这样我们在开发过程中仍然可以热重载
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
// ...
module: {
rules: [
{
test: /\ ...
页面行为/性能/错误监控的上报方式
- 博客分类：
- 数据分析与监控
在页面unload时，如果要上报当前数据，采用xhr的同步上报方式，会阻塞当前页面的跳转；使用new Image有可能遇到aborted，导致无法成功发送。
上报方式主要有两种：
1. (new Image()).src = "xxxxxxx.do?xxx=aaaa&....." （GET方式，需要考虑数据大小，这样即使页面跨域也没问题） 2.navigator.sendBeacon (POST方式，即使页面切换也能在后台进行，需要考虑浏览器兼容及缓冲区大小)
在不跨域的情况下建议优化使用navigator.sendBeacon, ...
前端页面性能指标及监测方法
- 博客分类：
- 数据分析与监控
页面性能指标 页面接收首字节时长(TTFB: time to first byte)
首屏加载时间
DomReady时间
页面完全加载总时长
监测方法(t = performance.timing)
ttfb: t.responseStart - t.navigationStart
firstScreen: 首屏时间的话计算比较麻烦
（建议方案：有图的情况下，计算首屏内的图片最晚加载时间-navigatorStart ，没图的情况下，t.domInteractive - t.navigatorStart）
domRea ...
如何监控页面中加载失败的资源
- 博客分类：
- 数据分析与监控
解决方案如下：
利用 performance.getEntries()方法，获取到所有加载成功的资源列表，在onload事件中遍历出所有页面资源集合（css/image/js/font等）, 利用排除法，到所有集合中过滤掉成功的资源列表，即为加载失败的资源
前端性能优化常见方法
- 博客分类：
- 性能优化
web前端是应用服务器处理之前的部分，前端主要包括：HTML,CSS,javascript,image等各种资源，针对不同的资源有不同的优化方式。
内容优化
(1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。
(2)减少DNS查找
(3)避免重定向
(4) ...
前端性能方面的9大问题
- 博客分类：
- 性能优化
1、请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏 ...