05 2016 档案

css：before和after中的content属性
摘要：css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容 就像这样： 我们可以书写的html代码： 输出的内容是这样的： • Email address: chriscoyier@gmail.com 让我们细致的看看这个属 阅读全文
posted @ 2016-05-27 17:08 RachelChen 阅读(26242) 评论(1) 推荐(0)
清除float浮动三种方式
摘要：Float的作用？ w3c的官方解释： Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in th 阅读全文
posted @ 2016-05-08 17:39 RachelChen 阅读(4512) 评论(0) 推荐(0)
中文标准web字体
摘要：标准的简体中文web字体： WindowsOS X 黑体：SimHei 冬青黑体: Hiragino Sans GB [NEW FOR SNOW LEOPARD] 宋体：SimSun 华文细黑：STHeiti Light [STXihei] 新宋体：NSimSun 华文黑体：STHeiti 仿宋：F 阅读全文
posted @ 2016-05-07 16:50 RachelChen 阅读(4573) 评论(0) 推荐(1)
网站桌面端和手机端不同url的设置
摘要：你的网站在搜索引擎中表现怎样很大程度上依赖于你的你的网站对于不同设备上的设计。 下面介绍了怎样基于URL构造来优化你的网站对于搜索引擎的支持。 决定你网页的URL构造 Determine the URL structure of your webpage 响应式布局是极度推荐的 Responsive 阅读全文
posted @ 2016-05-06 16:55 RachelChen 阅读(638) 评论(0) 推荐(0)
最优化你的广告
摘要：优化你的广告对于你广告目标的成功很重要。 通过广告的优化，你可以增加你的广告收入吗，提升你网站的可用性，以及获得更多的流量。 我们讨论的是Google AdSense下面的内容： 周期性的检查AdSense的积分卡，且实施网站基于的建议 回顾性能报表。理解你网站中的广告提供给了用户什么最想要的内容 阅读全文
posted @ 2016-05-06 16:00 RachelChen 阅读(200) 评论(0) 推荐(0)
在你的网站中使用 AdSense广告
摘要：下面介绍了如何使用Google的AdSense来为你的网站设置广告。基本内容包括： 创建一个AdSense账号，你必须18岁以上，有一个Google账号以及地址 你的网站必须已经被激活，并且你的网站内容必须符合AdSense政策 创建响应式布局广告单元，可以在任何的设备上自动调整广告大小 确保pay 阅读全文
posted @ 2016-05-06 15:31 RachelChen 阅读(855) 评论(0) 推荐(0)
用户自定义化你的广告
摘要：相关的以及合适的广告可以提升你的用户体验。 除了广告的实际内容你不可以控制之外，你可以为广告进行内容类型，颜色和大小以及放置位置等操作。 永远不要因为广告而影响你的用户体验。确保页面上的广告不会覆盖网页上的重要内容。 响应式广告是首选，如果不行的话，使用更高级的广告模式来布局广告 寻找广告和页面内容 阅读全文
posted @ 2016-05-06 15:03 RachelChen 阅读(551) 评论(0) 推荐(0)
广告是怎样工作的？
摘要：在页面中展示为广告商展示你网页上预留的广告位置，越能吸引广告商，你获得的投标就越大，一旦用户点击进入广告链接，你就成功了！ 具体可以看 Google AdSense和 Google DoubleClick 的帮助中心。 选择一个能最适合你的广告平台：我们为大部分的网站推荐 AdSense 平台，为有 阅读全文
posted @ 2016-05-06 14:34 RachelChen 阅读(269) 评论(0) 推荐(0)
提高scroll性能
摘要：在DevTools中开始渲染，向下滑动一点点滚动条，然后停止滚动。 在结果中，注意frames总是在30ftps线上面，甚至都木有很接近69ftps线的（事实上帧执行的太缓慢以致于60ftps线在图上都不显示） 打开一个帧可以看见在scrol事件之后是一个函数回调，然很多分离的layout事件，每个 阅读全文
posted @ 2016-05-05 18:12 RachelChen 阅读(410) 评论(0) 推荐(0)
input处理函数
摘要：input处理函数是潜在的影响你app性能的问题，他们可以阻止帧的形成，并且可以造成多余的亦或不必要的layout的工作。 避免长时间运行input handler：它们会阻塞scroll 不要在input handler 中进行样式的改变 Debounce 你的处理函数; 存储事件值并且在下一次r 阅读全文
posted @ 2016-05-05 17:48 RachelChen 阅读(1514) 评论(0) 推荐(0)
页面渲染——简化paint复杂程度和区域
摘要：Paint是填充像素并且最后合成在用户的屏幕上的过程。 通常是在管道中耗费最大的，你要尽可能的避免使用paint。 动画中使用除了transform和opacity的动画属性都将触发paint paint是像素管道中耗费最大的部分，所以避免使用之 在层提升(layer promotion)和编配动画 阅读全文
posted @ 2016-05-05 17:22 RachelChen 阅读(904) 评论(0) 推荐(0)
页面渲染——页面合成（composition）的优化
摘要：合成（composition）意味着将网页中已经绘画好的部分结合在一起，且展示在屏幕上。 坚持使用transform和opacity属性来操作你的动画animation 在有动画的元素上使用 will-change 或 translateZ属性 不要为所有元素创建合成器层：layers需要内存和管理 阅读全文
posted @ 2016-05-05 15:55 RachelChen 阅读(1282) 评论(0) 推荐(0)
减少样式计算的范围和复杂度
摘要：通过增加和移除元素，修改属性，类或者听过动画的方式来修改DOM都会导致浏览器重新计算元素的样式，且在大多是情况下重新布局页面亦或重新布局部分页面。这个过程被叫做computed style calculation。 减少选择器的复杂性 减少样式必须被计算的元素的个数 减少选择器的复杂性 减少样式必须 阅读全文
posted @ 2016-05-05 15:16 RachelChen 阅读(601) 评论(0) 推荐(0)
避免复杂的layout
摘要：layout是浏览器计算元素的几何信息：元素在页面上的的大小和位置。 每个元素都有明确的亦或含蓄的大小信息，这些信息基于我们使用的css以及元素的内容被高和父亲元素。 这个过程在 Chrome, Opera, Safari, 和Internet Explorer中叫做Layout.在火狐浏览器中叫做 阅读全文
posted @ 2016-05-04 19:54 RachelChen 阅读(563) 评论(0) 推荐(0)
优化js的执行
摘要：避免使用setTimeout和setInterval进行视觉更新操作;使用 requestAnimationFrame。 将长时间运行的JavaScript 从主线程转移到 Web Workers. 使用 micro-tasks在不同的框架上修改DOM 使用浏览器开发者工具和JavaScript P 阅读全文
posted @ 2016-05-04 16:33 RachelChen 阅读(467) 评论(0) 推荐(0)
页面渲染速度增加的方法和建议
摘要：减少渲染阻塞的js和css 为了产生最快的渲染速度，你需要减少关键资源的熟练，减少下载所有关键资源所需要的网络往返的数量，减少关键资源大小总和的字节数！ 异步执行js js资源会默认进行解析阻塞，除非使用async关键字。 解析阻塞强迫浏览器等待CSSOM并且停止DOM的构造，这将会大大延迟页面的渲 阅读全文
posted @ 2016-05-04 15:41 RachelChen 阅读(7881) 评论(0) 推荐(0)
分析不同类型页面渲染过程
摘要：现在让我们看看浏览器从网络上加载资源所耗费的时间（我们忽略从缓存以及从CDN等中间商网络上加载资源），我们首先要知道的是： 现在让我们看看浏览器从网络上加载资源所耗费的时间（我们忽略从缓存以及从CDN等中间商网络上加载资源），我们首先要知道的是： 一个到无服务的网路往返 (传播延迟) 大约100ms 阅读全文
posted @ 2016-05-04 15:13 RachelChen 阅读(486) 评论(0) 推荐(0)
计算渲染关键过程所花费的时间
摘要：你不可以优化你不能测量的事情。但是Navegation Timing API可以让我们测量关键的渲染过程时间！ Navigation Timing 为计算CRP提供了高精度的时间戳 浏览器发送了一系列可测量的时间来捕捉CRP的各种状态 Navigation Timing 为计算CRP提供了高精度的时 阅读全文
posted @ 2016-05-04 07:47 RachelChen 阅读(3838) 评论(0) 推荐(0)
使用media来加载css
摘要：默认的，css被当做渲染时候必须加载的资源. 设备类型和设备询问允许我们设置一些css资源编程可选的 对于所有的css资源，无论是必须的还是可选的，都会被浏览器加载 默认的，css被当做渲染时候必须加载的资源. 设备类型和设备询问允许我们设置一些css资源编程可选的 对于所有的css资源，无论是必须 阅读全文
posted @ 2016-05-03 22:44 RachelChen 阅读(416) 评论(0) 推荐(0)
异步执行js脚本——防止阻塞
摘要：JS允许我们修改页面中的所有方面：内容，样式和用户进行交互时的行为。 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染。 让你的js变成异步执行，并且减少不必要的js文件从而提高性能。 JavaScript可以查询和修改DOM和CSSOM JavaScript的执行阻塞了CSSOM的执行 Jav 阅读全文
posted @ 2016-05-03 22:12 RachelChen 阅读(3573) 评论(0) 推荐(0)
渲染树render tree
摘要：CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。 DOM树和CSSOM树连接在一起形成render tree . render tree只包含了用于渲染页面的节点 布局计算了每一个对象的准确的位置以及大小 绘画是最后 阅读全文
posted @ 2016-05-03 21:32 RachelChen 阅读(13824) 评论(0) 推荐(0)
页面渲染1——创建对象模型
摘要：Before the browser can render the page it needs to construct the DOM and CSSOM trees. As a result, we need to ensure that we deliver both the HTML and 阅读全文
posted @ 2016-05-03 19:44 RachelChen 阅读(503) 评论(0) 推荐(0)
HTTP 缓存
摘要：从网络上加载资源是非常缓慢且浪费带宽的，所以，要是能将资源缓存起来就好了！ 幸运的是，所有的浏览器都实现了HTTP缓存，我们要做的只是设定服务器响应的头部就行了！ 当服务器响应的时候，总是包含HTTP头部，HTTP头部包含的信息有content-type, length, caching direc 阅读全文
posted @ 2016-05-03 18:26 RachelChen 阅读(267) 评论(0) 推荐(0)
web安全字体
摘要：webfont解剖 Unicode字体可以包含数以千计字形 有四个字体格式： WOFF2, WOFF, EOT, TTF 一些字体格式需要使用GZIP压缩 一个web字体是字形的集合，且每个字形是一个描述了一个字母亦或符号的矢量图。 所以，一个字体文件的大小由两个因素决定：每个字形矢量路径的复杂程度 阅读全文
posted @ 2016-05-02 19:08 RachelChen 阅读(1855) 评论(0) 推荐(0)
图片优化
摘要：减少和替代图片 减少不必要的图片资源 如果可以，使用css3的效果替代图片效果 使用web fonts而不是用图片来显示文本信息 减少不必要的图片资源 如果可以，使用css3的效果替代图片效果 使用web fonts而不是用图片来显示文本信息 要记住，好的设计都是简单且性能很好的。减少图片资源可释放 阅读全文
posted @ 2016-05-02 16:11 RachelChen 阅读(744) 评论(0) 推荐(0)
基于文本内容的压缩
摘要：数据压缩 减少不必要的资源加载之后，我们将剩下的资源进行压缩。 为了解释数据压缩的原则，我们创建一个txt文本，内容如下： # Below is a secret message, which consists of a set of headers in # key-value format fo 阅读全文
posted @ 2016-05-02 13:09 RachelChen 阅读(854) 评论(0) 推荐(0)
加快你的JavaScript加载时间
摘要：发现可以提速的内容 发现可以提速的内容 发现可以提速的内容 发现可以提速的内容 你必须首先发现你的什么图片和HTML加载缓慢了你的脚本速度，下面提供了方法： 1. Firefox web-developer toolbar 2. Firebug Plugin 3. OctaGate SiteTime 阅读全文
posted @ 2016-05-02 12:27 RachelChen 阅读(622) 评论(0) 推荐(0)