不知不觉已经正式上班大半年了，去年的这个时候刚开博客不久，希望能伴随自己成长。在大半年的学习和工作中，自己也在一步步的开始沉静，越加觉得自己才疏学浅，也倍感前端知识博大精深。 这次总结主要关于性能优化探索心得。水平很浅，只是说说自己的学习收获。 ************这里开始了************* 看过的前端开发书籍都在说这四个字，性能优化的字面解释是：不影响系统运行正确性的前提下，使之运行地更快，完成特定功...
如何让页面尽可能早地渲染页面，页面更早可见，让白屏时间更短，尤其是无线环境下，一直是性能优化的话题。 页面可见时间 页面可见要经历以下过程： 解析 HTML 为 DOM，解析 CSS 为 CSSOM（CSS Object Model） 将 DOM 和 CSSOM 合成一棵渲染树（ render tree ） 完成渲染树的布局（layout） 将渲染树绘制到屏幕 layout 由于 JS 可能随时会改变 DOM 和 CSSOM ，当页面中有...
随着移动互联网的发展，我们越发要关注移动页面的性能优化，今天跟大家谈谈这方面的事情。 首先，为什么要最移动页面进行优化？ 纵观目前移动网络的现状： 移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，据统计： 71%的用户期望移动页面跟PC页面一样快，74%的用户能容忍的响应时间为5秒，所以我们必须保证移动端页面有足够的速度。 ...
analyze-css CSS selectors complexity and performance analyzer. analyze-css is built as a set of rules bound to events fired by CSS parser. Each rule can generate metrics and add "offenders" with more detailed information (see Usage section for an example). Analyze CSS Demo Install analyze-css comes as a "binary" for command-line and as CommonJS module. Run the following to insta...
得益于智能手机的普及和各行各业互联网+的运动，移动端的市场占比疯狂增长。 2016年1月艾瑞咨询发布的2015年电商数据显示，2015年中国移动端网购交易额同比暴涨123.2%，在网购总交易额中的占比首次超越PC端达到55%。 技术上，HTML5大行其道： 1：有数据显示，截至2015，有80%的App全部或部分基于HTML5。 2：谷歌浏览器于9月1日起不在支持自动播放Flash。 3：亚马逊旗下网站（包括Amazon.com门户在内）的所有广告将不再使...
现在手机的占比越来越高，各种酷炫页面层出不穷，这些特效都离不开css动画。说到css动画，主流的情况也就无非这两大类：位移和形变。而我们在写一个动画特效的过程中，如何去提升它的性能呢？当然首先我们需要去了解一下基本的概念，比如浏览器渲染的工作原理等，这些我也在读了几位大牛写的相关文章后才有了一定的了解，这边我也不细说了，有兴趣的同学可以去了解一下。本次的目的简单粗暴地讲，其实就是我们应该使用什么css属性去...
注：本文出自腾讯AlloyTeam的元彦，文章也可以 在github上浏览 。请尊重版权，转载请注明来源，多谢～～ 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两...
前端近几年变化很大，各种工具，库，框架并发。虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要？数据显示: 只有 10%~20% 的最终用户响应时间花在了下载 HTML 文档上。其余的 80%~90% 时间花在了下载页面中的所有组件中; 另外一点是，优化后台需要花费比较大的成本，优化前端只需要适当地遵循一些法则会有较大的提升，相对低成本高收益。 最近读了 Steve Souders 的《高性能网...
一个 Web 页面的展示，简单来说可以认为经历了以下下几个步骤。 JavaScript：一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如做一个动画或者往页面里添加一些 DOM 元素等。 Style：计算样式，这个过程是根据 CSS 选择器，对每个 DOM 元素匹配对应的 CSS 样式。这一步结束之后，就确定了每个 DOM 元素上该应用什么 CSS 样式规则。 Layout：布局，上一步确定了每个 DOM 元素的样式规则，...
通信世界网消息(CWW) 中国北京， 2016 年 4 月 21 日 ——全球内容交付、应用优化及云安全服务领域首屈一指的供应商阿卡迈技术公司（Akamai Technologies, Inc.，以下简称：Akamai）（NASDAQ：AKAM）今天公布了公司旗舰版网络性能解决方案Akamai Ion的多方面重大进展。Ion旨在加速网站、Web应用程序和移动应用程序的交付，帮助它们即使是在蜂窝连接的条件下也能够加速交付。较慢的网络性能不仅会令用户感到不满，甚至还会因此导致企...
原文链接: Mixins Better for Performance 本文已获得原作翻译授权，转载译文时请附上原文链接以及译文链接，未经允许不得随意转载译文 译文链接：使用 Mixin 性能更好 翻译：于坤 谈到预处理器，最常见的问题就是用 @extend 还是 mixin？我一直强烈支持一个观点，尽量不要用 @extend，原因有很多： 1，它会改变你的 css 顺序，有潜在风险 2，它会产生尴尬的分组，将无关的选择器放到一起...
高性能网站建设总结 规则1——减少 HTTP请求 只有10%到20%的最终用户响应时间花在接收请求的HTML文档上面。剩下80%到90%的 时间花在为HTML文档所引用的所有组件（图片，脚本，flash，样式表等）进行的HTTP请求上。因此改善响应的最简单途径就是减少组件数量，由此减少HTTP请求的数量。 图片地图 使用map标签进行坐标定位，减少图片数量。导航栏中使用了多个图片时候可以使用。缺点很多：手工方式很难完成...
原文： Packaging for Performance 杰微刊 兼职译者缪晨翻译， 杰微刊 审校及发布。 最近有个很有趣的主题，是关于web应用的静态资源（JS/CSS）打包的。 在当今前端界Craig Silverstein’s 和 Rebecca Murphey’s 在这个主题上的几篇文章表现出了对打包本质的深刻理解。现在面对的主要问题是：JavaScript与CSS的打包策略（基于现有最佳性能的实践）在迁移到HTTP/2的时候是否需要做一些改变？虽然在HTTP/2中打...
BigRender 当一个网站越来越庞大，加载速度越来越慢的时候，开发者们不得不对其进行优化，谁愿意访问一个需要等待 10 秒，20 秒才能出现的网页呢？ 常见的也是相对简单易行的一个优化方案是 图片的延迟加载。一个庞大的页面，有时我们并不会滚动去看下面的内容，这样就浪费了非首屏部分的渲染，而这些无用的渲染，不仅包括图片，还包括其他的 DOM 元素，甚至一些 js/css（某些js/css 是根据模块请求的，比如一些 ajax），理论上...
对于js和css，通常的做法有两种，一种将js和css直接嵌入到页面中，称为内联，另外一种就是通过src和link进行外部导入，称为外置。那么，哪一种更好一些呢？通常情况下外置更好一些，为什么呢？ 用户往往从首页打开以后，会继续跳转到其余页面。比如说，从csdn首页到博客，再到极客头条，那么，假如打开首页时，外部的js和css被缓存起来了，接下来的请求中，公用的js和css就不会再从服务器上获取，内联的方式是没有办法...