随笔分类 -  前端

1
前端
前端性能优化（十七）
摘要：对用户输入事件的处理去抖动用户输入事件处理函数是一个可能会导致web应用性能问题的因素，因为它们在运行时会阻塞帧的渲染，并且会导致额外且不必要的布局的发生。避免使用运行时间过长的输入事件处理函数在理想情况下，当用户在设备屏幕上触摸了页面上某个位置时，页面的渲染层合并线程将接收到这个触摸事件并作出响应... 阅读全文
posted @ 2015-09-18 20:17 David·Li 阅读(240) 评论(0) 推荐(0)
前端性能优化（十六）
摘要：优先使用渲染层合并属性、控制层数量渲染层的合并，就是把页面中完成了绘制过程的部分合并成一层，然后显示在屏幕上。在这部分内容中有两个关键点：需要管理的渲染层的数量、实现动画效果的样式属性。使用transform/opacity实现动画效果从性能方面考虑，最理想的渲染流水线是没有布局和绘制环节的，只需要... 阅读全文
posted @ 2015-09-18 19:57 David·Li 阅读(252) 评论(0) 推荐(0)
前端性能优化（十五）
摘要：简化绘制的复杂度、减小绘制区域绘制，是填充像素的过程，这些像素将最终显示在用户的屏幕上。通常，这个过程是整个渲染流水线中耗时最长的一环，因此也是最需要避免发生的一环。如果布局被触发，那么接下来绘制_一定_会被触发。因为改变一个元素的几何属性就意味着该元素的所有像素都需要重新渲染！除此之外，如果改变元... 阅读全文
posted @ 2015-09-18 19:51 David·Li 阅读(301) 评论(0) 推荐(0)
前端性能优化（十四）
摘要：避免大规模、复杂的布局布局，就是浏览器计算DOM元素的几何信息的过程：元素大小和在页面中的位置。每个元素都有一个显式或隐式的大小信息，决定于其CSS属性的设置、或是元素本身内容的大小、抑或是其父元素的大小。在Blink/WebKit内核的浏览器和IE中，这个过程称为布局。在基于Gecko的浏览器（比... 阅读全文
posted @ 2015-09-18 19:17 David·Li 阅读(200) 评论(0) 推荐(0)
前端性能优化（十三）
摘要：降低样式计算的范围和复杂度添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作，都会引起DOM结构的改变，从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局（多数情况下）。这就是所谓的样式计算。计算样式的第一步是创建一套匹配的样式选择器，浏览器就是靠它们来对一个元素应用... 阅读全文
posted @ 2015-09-18 18:01 David·Li 阅读(290) 评论(0) 推荐(0)
前端性能优化（十二）
摘要：优化JavaScript的执行效率页面里的动画效果大多是通过JavaScript触发的。有些是直接修改DOM元素样式属性而产生的，有些则是由数据计算而产生的，比如搜索或排序。错误的执行时机和太长的时间消耗，是常见的导致JavaScript性能低下的原因。你需要尽量减少这两方面对你的JavaScrip... 阅读全文
posted @ 2015-09-18 17:28 David·Li 阅读(207) 评论(0) 推荐(0)
前端性能优化（十一）
摘要：HTTP 缓存通过网络获取内容既缓慢，成本又高：大的响应需要在客户端和服务器之间进行多次往返通信，这拖延了浏览器可以使用和处理内容的时间，同时也增加了访问者的数据成本。因此，缓存和重用以前获取的资源的能力成为优化性能很关键的一个方面。好消息是每个浏览器都实现了 HTTP 缓存！ 我们所要做的就是，确... 阅读全文
posted @ 2015-09-18 17:19 David·Li 阅读(182) 评论(0) 推荐(0)
前端性能优化（十）
摘要：图片优化图片通常占据网页上下载字节的绝大部分，通常，也占据了大量的视觉空间。因此，优化图片通常可以最大程度地减少网站下载的字节数以及提高性能：浏览器下载的字节数越少，占用客户端的带宽就越少，浏览器下载并在屏幕上呈现有用内容的速度就越快。图片优化既是一门艺术，也是一门科学：图片优化是一门艺术，是因为单... 阅读全文
posted @ 2015-09-18 11:22 David·Li 阅读(199) 评论(0) 推荐(0)
前端性能优化（九）
摘要：优化基于文本的资产的编码和传输大小我们的网络应用在范围、目标和功能上都在不断增长。这是件好事！ 但是向着更丰富的网络无情进军的过程也推动了另一种趋势：每个应用所需下载的数据量也在持续稳步增长。为了提供卓越的性能，我们需要优化每一个字节数据的交付！数据压缩 101在我们消除了任何不必要的资源之后，下一... 阅读全文
posted @ 2015-09-16 20:21 David·Li 阅读(206) 评论(0) 推荐(0)
前端性能优化（八）
摘要：删除不必要的下载最快和最好的优化资源是不需要下载的资源。您最近是否审查过资源？ 您应该这么做，而且应该定期这么做，以确保每个资源都有助于提供更好的用户体验。最快和最优的资源是不需要下载的资源。当然，这看起来可能像是句废话，但实际上，却往往被忽视：作为一名性能工程师，您的职责就是始终保持批判的眼光，抓... 阅读全文
posted @ 2015-09-16 20:14 David·Li 阅读(219) 评论(0) 推荐(0)
前端性能优化（七）
摘要：PageSpeed 规则和建议删除阻止呈现的 JavaScript 和 CSS若要尽快完成首次呈现，您需要尽量减少甚至删除（如果有可能）网页所呈现关键资源的数量、尽量减少下载的关键字节数以及尽量缩短关键路径的长度。优化 JavaScript 的使用默认情况下，JavaScript 资源会阻止解析器，... 阅读全文
posted @ 2015-09-16 20:13 David·Li 阅读(249) 评论(0) 推荐(0)
前端性能优化(六)
摘要：优化关键呈现路径为了尽快完成首次呈现，我们需要优化下列三种变量：尽量减少关键资源数量。尽量减少关键字节数。尽量缩短关键路径的长度。关键资源是任何可能阻止网页首次呈现的资源。网页上的关键资源越少，浏览器在屏幕上显示内容时必须完成的工作量就越少，对 CPU 和其他资源的占用也就越少。同样，浏览器必须下载... 阅读全文
posted @ 2015-09-16 20:09 David·Li 阅读(232) 评论(0) 推荐(0)
前端性能优化（五）
摘要：使用 Navigation Timing 评估关键呈现路径无法评估就谈不上优化。幸运的是，Navigation Timing API 提供了所有必备工具来评估关键呈现路径的每个步骤！作为每个有效性能策略的基础，准确的评估和检测必不可少。这也就是 Navigation Timing API 所提供的。... 阅读全文
posted @ 2015-09-16 19:42 David·Li 阅读(410) 评论(0) 推荐(0)
前端性能优化（四）
摘要：使用 JavaScript 添加交互JavaScript 允许我们修改页面的方方面面：内容、样式以及它如何响应用户交互。但是，JavaScript 也会阻塞 DOM 构建，延缓页面渲染。我们可以让我们的 JavaScript 异步加载，消除关键渲染路径中不必要的 JavaScript，来提供更佳性能... 阅读全文
posted @ 2015-09-16 19:39 David·Li 阅读(232) 评论(0) 推荐(0)
前端性能优化（三）
摘要：阻塞渲染的 CSS默认情况下，CSS 被视为阻塞渲染的资源，这意味着在 CSSOM 构建完成前，浏览器会暂停渲染任何已处理的内容。确保精减你的 CSS，尽快传送它，并使用媒体类型与媒体查询来解除阻塞。在上一节，我们看到了，关键渲染路径要求我们兼有 DOM 和 CSSOM 来构造渲染树，这就有一个重要... 阅读全文
posted @ 2015-09-16 19:20 David·Li 阅读(267) 评论(0) 推荐(0)
前端性能优化（二）
摘要：渲染树构建、布局及绘制 CSSOM 树与 DOM 树融合成一棵渲染树，随后计算每个可见元素的布局，并输出给绘制过程，在屏幕上渲染像素。优化这里的每一步对实现最佳渲染性能至关重要。在前面的章节中，我们介绍了对象模型的构建，我们根据输入的 HTML 与 CSS 构建 DOM 树及 CSSOM 树。不过... 阅读全文
posted @ 2015-09-16 19:13 David·Li 阅读(276) 评论(0) 推荐(0)
前端性能优化（一）
摘要：构建对象模型浏览器要在屏幕上渲染内容，需要先构建 DOM 与 CSSOM 树。因此，我们需要确保将 HTML 和 CSS 尽可能快地提供给浏览器。让我们从最简单的可能情况开始说：一个普通 HTML 网页，包含一些文字，一张图片。浏览器需要做什么才能处理这个简单页面呢？转换：浏览器从磁盘或网络读取 H... 阅读全文
posted @ 2015-09-16 17:16 David·Li 阅读(761) 评论(1) 推荐(2)
ECMAscript三（面向对象）
摘要：1、创建对象 //混合工厂 var Car = function (name, color, id) { var obj = new Object(); obj.name = name; obj.color... 阅读全文
posted @ 2013-06-15 14:33 David·Li 阅读(171) 评论(0) 推荐(0)
ECMAscript二（对象使用）
摘要：ECMAscript二（对象使用）1、对象和变量的的作用域 a.和其他面向对象的语言相比，严格的说来ecmascript并没有静态作用域,对象方法中的子方法为方法的公共作用域的方法，而非静态方法。 b.this关键字总是指向调用方法的对象，在调用本对象的属性时最好使用this关键字，否则编译器将... 阅读全文
posted @ 2013-06-15 14:19 David·Li 阅读(347) 评论(0) 推荐(0)
ECMAscript一（对象种类）
摘要：ECMAscript对象主要分两大类：1、本地对象，即独立于宿主环境存在的对象。Object Fuction Array String Boolean Number Date Regex Error EvalError RangeError ReferenceError TypeError Url... 阅读全文
posted @ 2013-06-15 11:12 David·Li 阅读(217) 评论(0) 推荐(0)

1