记一次诡异的前端bug

1 问题描述 刚到公司，测试突然提个紧急 bug 过来，说 release1的加载动画不动了，一直卡着，如图： 2 调试过程 2.1 了解情况 与浏览器无关，多次重启均可以复现，非偶发现象 前端无相关报错 代码启动2正常，jar 包启动有问题 初步判定，跟打包过程有关。jar 包里肯定有什么问题。 2.2 进入调试状态 在浏览器中预览一张模版3，在一堆js代码中，找到加载动画相关的代码，打断点。

Websocket 简单 demo

websocket，可以在浏览器和服务器之间建立一个全双工通信的 socket 连接。它与 http 请求的主要区别在于，可以由服务器主动向客户端推送消息。 以下是一个简单 demo： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" con

CSS 旋转+透明效果，兼容至 IE6

要在各浏览器中实现如图的效果。 一、效果实现 功能比较简单，使用 transform:rotate 实现旋转，使用 opacity 实现透明度。（难点在于兼容低版本 IE） 第一版代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport"

在 IE8 下显示拉伸背景

一、Filter 正常情况下，通过 background-size: 100% 100% 来实现背景图片拉伸效果。但是这个属性在 IE8 下不管用。所以要用 filter 来实现这个效果。测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="view

初探 Vue.js：MVVM 与组件化开发

零、前端发展简史 1989 年，HTML 诞生。最早的 HTML 页面是完全静态的网页，它们是预先编写好的存放在 Web 服务器上的 html 文件。浏览器请求某个 URL 时，Web 服务器把对应的 html 文件扔给浏览器，就可以显示 html 文件的内容了。 服务器需要针对不同的用户，动态生成不同的 html 文件。一个最直接的想法就是利用 C、C++ 这些编程语言，直接向浏览器输出拼接后的

用 CSS3 画加载动画

本文将详细介绍如何用 CSS3 画出如下的加载动画。 （1） （2） 一、CSS3 简介 CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 【CSS3 浏览器支持】 CSS3给我们带来了什么好处呢？简单

ajax 使用 jsonp 跨域

可以先看 jsonp 教程。 记录下自己的实际使用方式。（最基本的用法） 前台部分 在 ajax 调用中增加 dataType、jsonp 参数以及 success 回调。 $.ajax({ url: xxurl, // 后台接受请求的 url data: {xx}, // 要传给后台的数据 dataType: 'jsonp', jsonp: 'callback', success: functi

IE 下 iframe 失焦问题

场景描述：IE浏览器。网页上有一个按钮A，点击后打开一个 iframe，iframe 中有一个文本编辑框，点击，让文本框聚焦。关闭 iframe，再点击按钮A，打开一个新的 iframe（内容一样，包含一个文本框），文本框无法聚焦，无法输入内容。 最终解决方案：在关闭 iframe 之前，先执行以下代码，将 iframe 彻底清空： $('iframe').src=""; $('iframe