web前端安全攻防揭秘 Web安全的关键点 1.数据与指令 2.浏览器的同源策略 3.信任与信任关系 4.社会工程学的作用 5.攻防不单一 6.场景很重要 web前端安全最受关注的三种前端攻击包括：XSS攻击、CSRF攻击、界面操作劫持 1. XSS攻击 1.1. Cross Site Script（跨站脚本攻击 ） 恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。 1.2. XSS攻击可以分成两种类型： 1.非持久型X…
理解什么是重绘和重排？ 1、重绘(Repaint) 重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重绘不会带来重新布局，所以并不一定伴随重排。 "重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。 但是，"重排"必然导致"重绘"，比如…
crypto-js crypto-js 是一个纯 javascript 写的加密算法类库 ，可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。 1.使用方法： 1.1. 步骤 1.1.1.安装： npm install crypto-js 1.1.2.使用示例： ES6模块引入方法： import sha256 from 'crypto-js/sha256'; import h…
Particleground简介： Particleground是一个JavaScript插件，用于时髦的后台粒子系统。包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果。在支持HTML5画布的浏览器中工作。 查看demo 初始化： particleground(document.getElementById('your-element'); 注意事项： v1.0.0以上版本支持js原生调用，不必依赖jquery。 具体使用方法： 1）引入文件 2）html 3）js调用 // 原生js(要求v1.0.0以上…
momentJS使用及中文API 一、momnetJS使用 1. npm安装 npm install moment --save # npm 或者官网http://momentjs.com/ 下载js文件script标签引入 2. momentJS使用示例： 2.1. 格式日期： moment(data).format("YYYY-MM-DD"); // data为日期的字符串形式 moment().format("YYYY-MM-DD"); // 输出当前日期 moment().format…
前情介绍： 最近做的一个vue项目中，使用echart图表组件展示数据，展示方式是点击按钮弹出弹层，在弹层中展示图表，使用vue组件方式：通过监听数据变化，在调用图表组件的页面中使用如下方法刷新数据: this.$nextTick(function() { // 在这里赋值图表数据，渲染视图 }) 问题描述： 弹出层的图表展示有时无法100%自适应宽度，图表数据展示如果是在页面中正常初始化就展示没有问题，但是如果是在初始化的弹层里默认为display:none，弹层显示的时候，图表自适应宽度计算会有一定几率出现宽度…
eruda--移动端调试神器： Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获 XHR 请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。 1.eruda安装 npm i eruda --save 2.Main.js 引用 import eruda from 'eruda' eruda.init(); 3.开启面板 面板简介： 1）. console面板 捕获 Console 日志，支持 l…
概念理解 函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。 函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。 函数防抖（debounce） 当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流（throttle） 预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期 函数节流是指一定时间内js方法只跑一次。…
1、SyntaxError SyntaxError是解析代码时发生的语法错误 // 变量名错误 var 1a; // 缺少括号 console.log 'hello'); 2、ReferenceError ReferenceError是引用一个不存在的变量时发生的错误。 unknownVariable // ReferenceError: unknownVariable is not defined 另一种触发场景是，将一个值分配给无法分配的对象，比如对函数的运行结果或者this…
一、 PWA登场背景 很长时间以来我们对项目采用web app 还是 native app的选择上有一些不可调和的矛盾点，究其实质就是用户体验和性能成本问题。 Web App vs Native App 优缺点对比： 理想很美好，优点： 开发成本较低：使用web开发技术就可以轻松的完成web app的开发。 维护比较轻松：web app和一般的web一样，维护比较简单，它其实就是一个站点。 跨平台：一套代码实现android 和 ios系统同时运行。 免安装：打开浏览器，就能使用。 快速部署：升级不需要通知用户，在…