zhangzhifei1991-优快云博客

转载记一次淘宝首页奇葩的渲染问题

记一次淘宝首页奇葩的渲染问题作者: 小胡子哥 2015-10-14 12:27:18 分类: 前端杂烩标签: bug, 渲染评论数: 9条评论或许你曾经在 chrome 浏览器上碰到过这样让人瞠目结舌的问题:Hover触发一个层展示, hover离开后, 这个层还遗留残影浏览器没有清理一个元素渲染的上一个状态, 导致页面多出一个错位的跟该元素一模一样的影

2015-12-23 13:23:48 758

转载说说JSON和JSONP，也许你会豁然开朗

说说JSON和JSONP，也许你会豁然开朗作者: 随它去吧来源: 博客园发布时间: 2012-07-16 14:33 阅读: 74002 次推荐: 245 原文链接 [收藏] 　　前言　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。　　当然了，通过调用强大的Phon

2015-12-23 00:53:02 576

转载 CSS动画之硬件加速

过去几年，我们常常会听说硬件加速给移动端带来了巨大的体验提升，但是即使对于很多经验丰富的开发者来说，恐怕对其背后的工作原理也是模棱两可，更不要合理地将其运用到网页的动画效果中了。在本文中，我会和大家分享有关硬件加速的前端技巧。为什么要关心硬件加速下面让我们来看一个动画效果，在该动画中包含了几个堆叠在一起的球并让它们沿相同路径移动。最简单的方式就是实时调整它们的 left 和 top

2015-12-15 00:20:04 850

转载网页性能管理详解：浅谈chrome-Timeline及window.requestAnimationFrame()方法

你遇到过性能很差的网页吗？这种网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。你会有什么反应？我猜想，大多数用户会关闭这个页面，改为访问其他网站。作为一个开发者，肯定不愿意看到这种情况，那么怎样才能提高性能呢？本文将详细介绍性能问题的出现原因，以及解决方法。一、网页生成的过程要理解网页性能为什么不好，就要了解网页

2015-12-14 09:02:31 1109

转载 svn冲突问题详解 SVN版本冲突解决详解

解决版本冲突的命令。在冲突解决之后，需要使用svnresolved来告诉subversion冲突解决，这样才能提交更新。冲突发生时，subversion会在WorkCopy中保存所有的目标文件版本（上次更新版本、当前获取的版本，即别人提交的版本、自己更新的版本、目标文件。开发人员都知道代码管理工具是开发中一个必不可少的工具，这里也不废话详细介绍了。不管你个人喜欢git还是svn还是其他，但

2015-09-24 23:28:51 4543 2

转载彻底理解PHP的SESSION机制

一、默认机制，用磁盘文件来实现PHP会话。php.ini配置：session.save_handler = files　　1、session_start()　　　　A、 session_start()是session机制的开始，它有一定概率开启垃圾回收,因为session是存放在文件中，　　　　　　PHP自身的垃圾回收是无效的，SESSION的回收是要删文件的，这个概率是根据php.i

2015-09-22 23:49:47 346

转载对html与body的一些研究与理解

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=259一、写在前面的最近一直构思着写篇关于html标签的文章，虽说之前处理过html标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。在网上查阅相关资料想整合一下相关的信息，

2015-09-18 10:20:57 321

转载为什么要在html和body加上“height:100%;”

因为如果不加，那么body高度的值，就是页面所有元素所到达的高度。可以给body加上一个背景颜色来查看效果，如果文件流不是很长，不至于占满整个窗口（未产生滚动条），那么可以看到背景颜色只是作用到文件流的末尾。而给html的加上"height:100%;"这一样式，则指定了body的父元素高度为100%，再在body中指定height:100%;，意味着占满整个窗口。这样做，在文件流不占

2015-09-18 10:19:44 624

转载 XAMPP如何修改默认的网站目录htdocs方法详解

正确安装好XAMPP后，默认是必须将php程序放到 xampp\htdocs 文件夹下才能运行，如果把主目录修改到 D: 盘 www 文件夹1、打开文件xampp\apache\conf\httpd.conf2、文件中找到DocumentRoot "D:/xampp/htdocs"和3、修改为DocumentRoot "D:/www"和

2015-09-15 19:43:34 1272

转载 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习前端基础更是大有裨益。　　而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。　　前面几题是会很基础，越下越有深度。　　附上第一篇：BAT及各大互联网公司2014前端笔试面试题--JavaScript篇　　Html篇：

2015-09-06 21:27:19 933

转载 BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习js更是大有裨益。　　而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。　　附上第二篇：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇　　前面几题是会很基础，越下越有深度。　　　　初级Javasc

2015-09-06 21:25:43 737

转载深入理解浏览器兼容性模式

想必你一定知道浏览器有个标准（Standards）模式和一个怪异（Quirks）模式，或许你还听说过有个“准标准（Almost Standards）”模式。而当你打开Internet Explorer的时候，又看到了什么浏览器模式、文档模式，还有什么兼容性视图等等...这些都是什么？啥是浏览器模式，啥是文档模式？标准模式和准标准的模式有什么区别？IE9兼容性视图和真正的IE9有什么区别？什

2015-07-30 23:21:51 445

原创 meta标签

1、meta元素有4个属性：name、http-equiv、content、和charset。meta标签通过name属性来描述页面文档的元信息，通过http-equiv属性设置HTTP请求指令，通过charset设置页面的字符编码。按照属性可以分为3类：（1）name属性和content属性结合。用于描述网站信息·（2）http-equiv属性和content属性组合，设

2015-07-28 23:22:12 410

原创 7月28日笔记

1、设置换行最好方式： word-wrap:break-word;overflow:hidden;2、white-space属性：在HTML中的空格字符很多的时候，默认只显示一个，white-space：normal； //默认情况，即只有一个空格white-space:pre；类似于HTML中的pre标签，多个空格显示；white-space：nowrap；//文本不会

2015-07-28 22:55:54 356

转载 Meta http-equiv属性详解(转)

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。引用meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞；其中http-equiv属性主要有以下几种

2015-07-26 23:19:59 273

转载 12款很棒的浏览器兼容性测试工具推荐

对于前端开发工程师来说，确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情，幸运的是，有很多优秀的工具可以帮助测试浏览器的兼容性，让我们一起看看这些很棒的工具。 Spoon Browser Sandbox点击你需要测试的浏览器环境，安装插件就可以进行测试了。帮助你测试网页在Safari、Chrome、Firefox和Opera浏览器中是否正常，IE以前也有

2015-06-07 14:32:32 416

转载网站优化：测试网站速度的8款免费工具推荐

网站的加载速度是决定网站成败的重要因素，值得站长特别关注。原因很简单，没有人愿意为了打开一个网页而等老半天，换句话说，如果你的网站打开速度很慢，将流失大量的访客，甚至出现多米诺效应的不良影响，因此了解自己网站加载速度非常重要。下面向大家推荐8款非常有用的测试网站速度的免费工具，让你更加全面的了解自己的网站性能。PageSpeed Insights首先介绍的这款测试工具出自googl

2015-06-07 14:29:31 546

转载图片转DATA:URI工具

昨晚由于需要用data:uri，于是做了这么个转换工具可本地使用，因为文件不用上传疯狂的点击这里看demo截图[此截图使用datauri,看不见请升级人品]上面这张图的datauri1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA/QAAAJBCAIAAABnN2

2015-06-07 14:15:28 13422

转载 HTML5元素之间的拖动-----dataTransfer学习

HTML5允许对页面元素进行拖动，只要在元素的属性中加上draggable="true"，就可以拖动了。在拖动的同时，必须记录被拖动的元素，通过在元素上注册事件ondragstart即可实现，比如规定了一个img元素可以拖动，代码如下:function drag(event){event.dataTransfer.setData("Text",ev.targ

2015-06-07 10:15:00 6421

转载 hasLayout（转载）

什么是hasLayout?　　要想更好的理解 css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。　　什么是 haslayout ？　　haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplo

2015-06-07 10:08:24 373

转载 css ! important 属性详细解释

定义及语法折叠编辑本段!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}W3c的解释折叠编辑本段CSS企图创造一个平衡作者和用户之间的级层样式表。默认情况下,CSS规

2015-06-07 01:33:19 1139

转载完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。HTML5的新标签元素有：定义页面或区段的头部；定义页面或区段的尾部；定义页面或区段的导航区域；页面的逻辑区域或内容组合；定义正文或一篇完整的内容；定义补充或相关内容；使用他们能让代码语义

2015-06-07 01:29:31 397

转载什么是FOUC

什么是FOUC？如何避免FOUC？2012年11月26日shiyun发表评论阅读评论今天了解了一个新的名词叫做 FOUC 浏览器样式闪烁，之前也听说过一些类似的东西，比如样式突变等等，但这东西竟然有学名的。。什么是FOUC(文档样式短暂失效)?如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪

2015-06-07 00:48:17 749

原创在线测试浏览器兼容性的工具_spoon

经常制作网页的朋友电脑里总会安装许多浏览器，比如Firefox、charome、Opera、Safari、IE等，而且为了兼容他们的各个版本，还需要装更多浏览器，比如IEtester之类的。在线测试浏览器兼容性工具spoon 来源：黄超[点击放大]但如果没有装那么多浏览器或一时找不到那么多版本的浏览器，可以使用一下在线的浏览器兼容测试工具：http://spoon.net/browse

2015-06-06 20:54:15 2122

转载 SVG基础——如何使用可缩放矢量图形（SVG）

SVG基础——如何使用可缩放矢量图形（SVG）作者：彦子日期：2015-04-11 点击：583svg每次我讲到图像的时候，我都会提到，在可能的情况下，对于位图来说，可缩放矢量图形（SVG）都是最好的选择。上次我给别人提建议的时候，我意识到我没有自己想象中的那么了解SVG。我之前写过一两篇关于SVG的文章，但也仅是我自己实践经验的一点延伸。我打算今天开始写SVG系列的文章，接下来

2015-06-05 20:54:59 1522

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及

2015-06-05 17:00:08 349

转载 HTML5标准学习---编码（转载）

HTML5标准学习 – 编码相信每一个前端工程师都或多或少遇上过“乱码”这位仁兄，无论你的基础有多么扎实，在生产的过程中都免不了偶尔和“乱码”兄弟喝上几杯茶吧。作为一个前端工程师，你是如何指定一个页面的编码的呢？你知道浏览器是怎么识别编码的吗？首先，一个很简单的例子，用遇简的HTML页面来看看各浏览器下有什么不同：最简HTML，和都没有内容，服务器也不给出具体的编码声明，直接从

2015-06-05 16:04:06 414

转载 HTML5标准学习--Doctype

HTML5标准学习 – DOCTYPE上一篇文章主要讲述了HTML文档的构成，同时肤浅地接触了“标签省略”这一概念，本文会从概念上介绍HTML文档中第一个出现的重要元素 – DOCTYPE。所谓DOCTYPE，最初是XML的概念，即通过一种特定的语法，作为一种元数据，来描述XML文档中允许出现的元素，以及各元素的组成、嵌套规则等。具体的概念可以在WIKI中得到一个更详细的结果。但是在H

2015-06-05 14:31:04 587

转载 HTTP 304状态分析

来源：互联网作者：佚名时间：04-14 14:28:04 【大中小】今天在查看web服务器日志的时候看到有很多304的http状态，为什么会返回304而不是200呢？这与服务器的缓存设置非常有关HTTP 304: Not Modified 标准解释是：Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Sin

2015-06-04 09:45:51 412

转载网页加速的14条法则

译自：http://developer.yahoo.com/performance/rules.html最近，YouMonitor.Us在做Web应用性能优化，在网上发现了文章High Performance Web Sites: The Importance of Front-End Performance，感觉其14条优化法则很实用，操作性很强。因此翻译出来，供大家参考。W

2015-06-03 18:46:40 512

转载 img标签中src包含data URL scheme-在一个URL中包含图片数据

你可以把一个Url链接看作一个数据，允许输入任何量的数据。这些数据可以是一张图片、asii文本、xml数据。用法如下： URI定义于IETF标准的RFC 239你可以把一个Url链接看作一个“数据”，允许输入任何量的数据。这些数据可以是一张图片、asii文本、xml数据。用法如下： data:image/jpeg;base64,base_64_encoded_jpeg_goes

2015-06-03 15:33:20 8594

转载 <meta http-equiv="X-UA-Compatible" content="IE=Edge">是神马鬼？

作者：zccst 1，X-UA-Compatible是神马？文档：https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible X-UA-Compatible是IE8的一个专有属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。可以在微软官方文档获取更多介绍。为什么要用X-UA

2015-06-03 12:39:17 476

转载通过浏览器渲染过程进行前端优化

介绍　　做web开发，我个人觉得必须要弄清楚浏览器的渲染过程，否则我们很难进行前端优化。　　我今天就简单说一下页面加载和前端优化。页面加载我按照最简单的方式进行描述，实际上更复杂，不管是在浏览器端还是服务端，比如dns解析，代理服务器，负载均衡器等等。 1、用户访问网页，发送一个http请求到网络服务器。

2015-06-02 22:17:00 425

转载前端小汇总

图形库：highcharts（图表插件）、jvectormap地图插件、D3.js（数据操作文档）前端测试自动化测试工具：Qunit+Mocha+ Selenium

2015-06-01 23:48:59 447

转载使用Grunt构建任务管理脚本

本文由大漠根据Landon Schropp的《Writing an Awesome Build Script with Grunt》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/writing-awesome-build-script-grunt/，以及作者相关信息——作者：

2015-06-01 20:13:34 382

转载 windows环境phpstorm调试环境搭建

一：安装设置xdebug 这个一般有两个步骤1：浏览器的xdebug插件安装，一般用firefox的插件，chrome好像不太好使，chrome安装后的效果安装后如下图所示，需要配置IDEKEY 填入PHPSTORM；打开浏览器，如果是用chrome或者Firefox可以找到对应的XDebug工具，工具的设置里的IDE KEY填上

2015-05-18 22:52:45 579

原创 php为Apache指定工作目录（虚拟目录）

实际开发项目时，如果每次都将项目文件复制到Apache的htdocs目录下，不仅繁琐，而且容易出错。Apache提供了类似II S的虚拟目录功能。可以直接将工作目录映射到Apache，实现即时修改。个人认为在上一篇文章中phpstorm中的实现，也是这种原理1、进入Apache安装目录的conf子目录下，用记事本打开httpd.conf文件2、httpd,conf文件是Apac

2015-05-18 19:33:08 3564

原创 phpstorm 配置Apache服务器

翻译自官网http://www.jetbrains.com/phpstorm/help/creating-a-local-server-configuration.html初次学习php，环境使用的为Apache，MySQL，php，依次安装的，小试牛刀，感觉还可以。IDE使用的为phpStorm，在官网上学习的配置，仅供参考1、设置2、3、在设置中选择Ap

2015-05-18 18:34:54 7894

转载 Windows环境下PHP环境搭建

Windows下PHP环境搭建 nofishcanswim 2014-08-31 19:38:121. 软件版本Windows：Windows 7 SP1 x86版（32位）Apache：2.4PHP：5.6.02. 所需安装包和下载地址httpd-2.4.10-win32-VC11.zip：http://www.apachelounge.com/d

2015-05-18 10:31:49 465

转载 tortoise初步

2008-06-21 01:20 考虑到CVS的一些局限性，最近和同事在公司推行Git。其实，如果推行SVN的化，可能推行的难度会降低很多。不过lark说既然推行一个新的版本管理工具，总要花费一定的时间进行培训、部署、转换。而推行Git和SVN的代价不如想象中差距那么大。因此，不如就多花些精力推行Git ，可以带来更多的好处。这个想法说服了我。然后就

2015-05-12 11:45:09 327

Sql for cankao

windows管理系统应用设计

c++chengxusheji

空空如也