RachelChen

2016年5月6日

摘要：相关的以及合适的广告可以提升你的用户体验。除了广告的实际内容你不可以控制之外，你可以为广告进行内容类型，颜色和大小以及放置位置等操作。永远不要因为广告而影响你的用户体验。确保页面上的广告不会覆盖网页上的重要内容。响应式广告是首选，如果不行的话，使用更高级的广告模式来布局广告寻找广告和页面内容阅读全文

posted @ 2016-05-06 15:03 RachelChen 阅读(535) 评论(0) 推荐(0) 编辑

广告是怎样工作的？

摘要：在页面中展示为广告商展示你网页上预留的广告位置，越能吸引广告商，你获得的投标就越大，一旦用户点击进入广告链接，你就成功了！具体可以看 Google AdSense和 Google DoubleClick 的帮助中心。选择一个能最适合你的广告平台：我们为大部分的网站推荐 AdSense 平台，为有阅读全文

posted @ 2016-05-06 14:34 RachelChen 阅读(264) 评论(0) 推荐(0) 编辑

2016年5月5日

提高scroll性能

摘要：在DevTools中开始渲染，向下滑动一点点滚动条，然后停止滚动。在结果中，注意frames总是在30ftps线上面，甚至都木有很接近69ftps线的（事实上帧执行的太缓慢以致于60ftps线在图上都不显示）打开一个帧可以看见在scrol事件之后是一个函数回调，然很多分离的layout事件，每个阅读全文

posted @ 2016-05-05 18:12 RachelChen 阅读(398) 评论(0) 推荐(0) 编辑

input处理函数

摘要： input处理函数是潜在的影响你app性能的问题，他们可以阻止帧的形成，并且可以造成多余的亦或不必要的layout的工作。避免长时间运行input handler：它们会阻塞scroll 不要在input handler 中进行样式的改变 Debounce 你的处理函数; 存储事件值并且在下一次r 阅读全文

posted @ 2016-05-05 17:48 RachelChen 阅读(1498) 评论(0) 推荐(0) 编辑

页面渲染——简化paint复杂程度和区域

摘要： Paint是填充像素并且最后合成在用户的屏幕上的过程。通常是在管道中耗费最大的，你要尽可能的避免使用paint。动画中使用除了transform和opacity的动画属性都将触发paint paint是像素管道中耗费最大的部分，所以避免使用之在层提升(layer promotion)和编配动画阅读全文

posted @ 2016-05-05 17:22 RachelChen 阅读(878) 评论(0) 推荐(0) 编辑

页面渲染——页面合成（composition）的优化

摘要：合成（composition）意味着将网页中已经绘画好的部分结合在一起，且展示在屏幕上。坚持使用transform和opacity属性来操作你的动画animation 在有动画的元素上使用 will-change 或 translateZ属性不要为所有元素创建合成器层：layers需要内存和管理阅读全文

posted @ 2016-05-05 15:55 RachelChen 阅读(1261) 评论(0) 推荐(0) 编辑

减少样式计算的范围和复杂度

摘要：通过增加和移除元素，修改属性，类或者听过动画的方式来修改DOM都会导致浏览器重新计算元素的样式，且在大多是情况下重新布局页面亦或重新布局部分页面。这个过程被叫做computed style calculation。减少选择器的复杂性减少样式必须被计算的元素的个数减少选择器的复杂性减少样式必须阅读全文

posted @ 2016-05-05 15:16 RachelChen 阅读(583) 评论(0) 推荐(0) 编辑

2016年5月4日

避免复杂的layout

摘要： layout是浏览器计算元素的几何信息：元素在页面上的的大小和位置。每个元素都有明确的亦或含蓄的大小信息，这些信息基于我们使用的css以及元素的内容被高和父亲元素。这个过程在 Chrome, Opera, Safari, 和Internet Explorer中叫做Layout.在火狐浏览器中叫做阅读全文

posted @ 2016-05-04 19:54 RachelChen 阅读(544) 评论(0) 推荐(0) 编辑

优化js的执行

摘要：避免使用setTimeout和setInterval进行视觉更新操作;使用 requestAnimationFrame。将长时间运行的JavaScript 从主线程转移到 Web Workers. 使用 micro-tasks在不同的框架上修改DOM 使用浏览器开发者工具和JavaScript P 阅读全文

posted @ 2016-05-04 16:33 RachelChen 阅读(462) 评论(0) 推荐(0) 编辑

页面渲染速度增加的方法和建议

摘要：减少渲染阻塞的js和css 为了产生最快的渲染速度，你需要减少关键资源的熟练，减少下载所有关键资源所需要的网络往返的数量，减少关键资源大小总和的字节数！异步执行js js资源会默认进行解析阻塞，除非使用async关键字。解析阻塞强迫浏览器等待CSSOM并且停止DOM的构造，这将会大大延迟页面的渲阅读全文

posted @ 2016-05-04 15:41 RachelChen 阅读(7845) 评论(0) 推荐(0) 编辑

公告