某人

路过，不语，不留

0%

发表于 更新于 分类于

什么是Matrix？

Matrix（矩阵）是一个有关数字，符号，表达式组合的有趣的数学词汇，广泛应用于数学和科技领域。物理学家们还将其纳入量子力学的学习范畴。在电脑图形方面，它们被用于线性变形和处理3D图像和2D映画。Matrix 函数中的matrix()可以用来创建线性变化，matrix3d()可以用css在二维画面里创建三维图像。（下图是一个matrix例子）

2D变换矩阵为3x3 ,3D变换则是4x4的矩阵；
矩阵(matrix)可以完成，斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate);
变换矩阵基于一个特定坐标点相乘表示为一个向量。

坐标系统

坐标系统。每一个文档视图都是一个坐标系统，左上角为视图的原点，坐标(0,0)。数值沿着X轴向右，沿着Y轴向下而递增。3D transform里面的Z轴决定了观察者所能觉察到的距离。数值越大，距离越近物象越大，数值越小，距离越远物象越小。

阅读全文 »

发表于 更新于 分类于

前言

今天在用php做图片上传时，发现在ie上传失败，chrom和火狐正常，而ie报文件类型错误，于是就针对这个问题，就有了发现…

上传的MIME类型[Uploaded MIME Types]

当上传文件从客户端到Web服务器，Windows Internet Explorer使用findmimefromdata确定MIME类型。在可能的情况下，findmimefromdata返回硬编码的值从已知的MIME类型，而不是依靠在系统注册表的文件扩展名关联的MIME类型值的列表。在某些情况下，检测到的MIME类型可以不同于一般公认为向后兼容的值，如下表所示：

从上图可以看出前者才是标准的，符合常规的文件类型。

阅读全文 »

发表于 更新于 分类于

前言

  • 雅虎的35条页面优化准则,你大概能说出几条？
  • 这35条准则被分为了7个类,内容(Content) 、服务器(Server) 、 CSS 、 JavaScript 、Cookie 、图片(Images) 、移动应用(Mobile)、
  • 复习一下

三十五条黄金定律

网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等),减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧:

  1. 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。例如在asp.net中可以使用ScriptManager，asp.net MVC中的Bundling。
  2. CSS Sprites: 就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置
  3. Image Maps: 也是将多幅图拼在一起，然后通过坐标来控制显示导航。这里有个经典的例子，选中图片中的某个人就会将你带到不同的链接。
  4. Inline images: 在实际页面中嵌入图像数据的网址。这可以增加你的HTML文件的大小。内联图像组合到你的样式表（缓存）是一种减少HTTP请求和避免增加页面大小的。如下：
    1
    2
    //css 文件
    .change{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBJREFUeNrs3NGNREAcwOGbsyKUJNGOFnSgEbrwqBsViIi5Cm5z5HYX+b53IX/zy4wXIcb4BXzOtxGACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEwO8eb7vTsizrupr4EyGEPM93XTLP87ZtRncSSZJkWbb7svgubdt6Sc9VVbV3qnVdm9t5NE1zIA3HUfBNCCIERAgiBEQIIgRECCIERAgiBEQIIgRECCIERAgiBEQIIgRECCIEXuVyf1s78EsyPqjruv9aq9M03XJEdkJwHAURAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRHjOOY7iLvu8tQeyEIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQIfAij8s9cVmWwzDcY/ppmlqCXC/CJEmKovDmcBwFRAgiBEQIIgRECCIERAgiBEQIIgRECCIERAgiBEQIIgRECCIERAgiBEQIIgRECCIERAgiBEQIIgRECCIERAgiBEQIIgRECCIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQJ/FmKMpgB2QhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEIQISBCECEgQhAhIEI4jx8BBgBKc9us1uAvqAAAAABJRU5ErkJggg==') no-repeat scroll center top;}
    阅读全文 »

发表于 更新于 分类于

目的

为了提高页面性能,因为重排的消耗较大而且直接影响用户界面，它们将会给响应式网站以及 web APP 造成较大的影响。

定义

重绘[repaints]

重绘是指元素外观的改变所触发的浏览器行为,例如，color/visibility/outline/background-color。等属性引起的元素外观的改变。

回流[reflows]

回流又叫重排,是指浏览器计算页面的全部或部分布局所做的处理。调整浏览器窗口大小，使用伪类（比如 :hover），以及使用JavaScript 操作DOM，影响到页面布局事件的发生，就会导致重排。

同步重排[synchronous reflows]

Web 控制台可以通过记录重排事件来显示出这个重排消耗的时间，如果是由 JavaScript 触发的重排，这个时间是指同步重排（synchronous reflows）时消耗的时间。

阅读全文 »