漂浮的云-CSDN博客

转载前端性能优化总结

转自：http://www.2cto.com/kf/201604/498725.html 网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们...

2019-05-16 11:50:24 97

原创 html5 crossorigin属性

使用步骤：1.在html标签中加了crossorigin=“anonymous”属性2.html标签中的src属性的资源服务器也需要开启cors验证，并允许引用页面的域名访问，否则页面无法加载这个JS如： Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Range ...

2019-05-16 11:49:47 5369

原创前端性能优化常见方法

web前端是应用服务器处理之前的部分，前端主要包括：HTML,CSS,javascript,image等各种资源，针对不同的资源有不同的优化方式。内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用C...

2019-05-16 11:48:40 141

原创前端页面性能指标及监测方法

页面性能指标页面接收首字节时长(TTFB: time to first byte) 首屏加载时间 DomReady时间页面完全加载总时长监测方法(t = performance.timing) ttfb:t.responseStart - t.navigationStart firstScreen: 首屏时间的话计算比较麻烦...

2019-05-16 11:47:55 2533

原创页面行为/性能/错误监控的上报方式

在页面unload时，如果要上报当前数据，采用xhr的同步上报方式，会阻塞当前页面的跳转；使用new Image有可能遇到aborted，导致无法成功发送。上报方式主要有两种： 1. (new Image()).src = "xxxxxxx.do?xxx=aaaa&....." （GET方式，需要考虑数据大小，这样即使页面跨域也没问题） 2.navigator....

2019-05-16 11:47:14 380

原创 webpack - CSS提取

vue-style-loader启用 CSS 提取// webpack.config.jsconst ExtractTextPlugin = require('extract-text-webpack-plugin')// CSS 提取应该只用于生产环境// 这样我们在开发过程中仍然可以热重载const isProduction = process.env.NODE_ENV === ...

2019-05-16 11:46:58 155

原创 fixed弹出层滚动区域滑动时阻止window窗体的滚动事件

web浏览器中，当我们出现一个浮层，浮层里面也有滚动条的时候，且有部分背景半透明的时候，就会发现，当我们滚动浮层里面的小滚动条的时候，背后整个页面都跟着一起滚走了。方案1：监听浮层的touchstart,touchmove事件, 计算浮层滚动区域的最大滚动区域，在touchmove事件中判断规则，根据情况阻止默认事件(popup_box_scroll为浮层滚动区域的id) 依赖方...

2019-05-16 11:46:29 1641

原创根据压缩后的行列数和sourcemap反向定位源码

sourcemap文件存储的是JS压缩前和压缩后的映射关系，map文件内容本身就是个json文件。json格式如下： version 版本号 sources存储的是各个依赖的子文件列表 sourcesContent存储的是各个依赖的子文件源码其他几个字段暂时还没研究，不过暂时也不需要用到 npm上有对应的sourcemap包...

2019-05-16 11:46:00 2502 1

原创 JavaScript的语法解析与抽象语法树

抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。JavaScript语法解析什么是语法树可以通过一个简单的例子来看语法树具体长什么样子。有如下代码：var AST = "is Tree";我们...

2019-05-16 11:45:26 2410

转载交叉观察器IntersectionObserver API

(转自http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClien...

2019-05-16 11:44:10 328

原创 eslint规则记录

ESLint 支持几种格式的配置文件：JavaScript- 使用.eslintrc.js然后输出一个配置对象。 YAML- 使用.eslintrc.yaml或.eslintrc.yml去定义配置的结构。 JSON- 使用.eslintrc.json去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。 (弃用)- 使用.es...

2019-05-16 11:43:35 411

原创 phantom.js - HTML To PDF

HTML 转 pdfimport phantom from 'phantom';const pageToPdf = (url) => {phantom.create().then((ph) {ph.createPage().then((page) => {page.open(url).then((status) => {// 配置存储的pdf地址...

2019-05-16 11:42:39 337

转载 [转]babel到底该如何配置?

背景说起ES6，webpack，打包，模块化总是离不开babel，babel作为一个js的编译器已经被广泛使用。在babel的官网是这样介绍它的：Babel is a JavaScript compiler.Use next generation JavaScript, today.大家都知道js作为宿主语言，很依赖执行的环境（浏览器、node等），不同环境对js语法的支持不尽...

2019-05-16 11:42:02 249