1 H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 H5 应用程序缓存为应用带来三个优势： 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。 根据标准，到目前...
此操作也可以归结在性能操作类别上，虽然效果不是很明显，但在一定情况下起得很好的作用，下面理几点使用该方法的原因 大流量访问页面压缩代码节省RMB，百度首页也这么做。O(∩_∩)O哈哈~ 个人爱好，性能强迫症。 源代码混乱（掩饰网站前端用户编码结构习惯，现今没啥用） ..... 不多说了，主要给喜欢倒腾代码的朋友看看。 function compress_html($string){ return ltrim(rtrim(preg_replace(array( "/> *([^ ]*) *</", ...
最近在学习前端的性能优化，有必要了解一下页面的渲染流程，以便对症下药，找出性能的瓶颈所在。以下是我看到的一些东西，分享给大家。 参考：Understanding the renderer 页面的渲染有以下特点： •单线程事件轮询 •定义明确、连续、操作有序（HTML5） •分词和构建DOM树 •请求资源并预加载 •构建渲染树并绘制页面 具体来说： 当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线...
昨天晚上写了一篇关于浏览器的渲染过程的随笔，但只是通过一小段代码解释了一下，并没有通过浏览器测试，说服力不够，而且还有很多不完善的地方，今天在浏览器中测试了一下，并把测试的结果分享给大家，测试过程可能有点乱，希望大家理解。 测试浏览器：Chrome v24.0.1312.52 m，Firefox v18.0，Opera v12.12。 在WebKit内核中，网页在显示的时候会有一个解析器（Parser）去解析html文档，然后去生成渲染树（Render Tree），最终渲...
移动端HTML5性能优化 [导读] 得益于智能手机的普及和各行各业互联网+的运动，移动端的市场占比疯狂增长。 2016年1月发布的2015年电商数据显示，2015年中国移动端网购交易额同比暴涨123 2%，在网购总交易额中的占比首次超越PC端达到55%。 技术上，HTML5大行其道： 1：有数据显示，截至2015，有80%的App全部或部分基于HTML5。 2：谷歌浏览器于9月1日起不在支持自动播放Flash。 3：亚马逊旗下网站（包括Amazon.com门户在内）的所有广告...
作为一个前端工程师，性能优化是很有必要的。好的用户体验能一定程度上决定产品的命运。而提升用户体验有很多方面，比如，界面设计，操作设计，网页加载性能等。。。 提升性能我们可以从如下几个方面考虑：减少http请求合理设置 HTTP缓存在动态网页中，我们难免会与后台服务器交互，减少http请求的数目在性能提升上是十分明显的。比如我们可以：简化步骤，将请求数据尽可能的封装在少的接口中，当然这是不破坏程序可扩展性及健壮性...
这篇文章介绍HTML前端性能优化之CDN和WPO的比较说明 CDN通过将资源存储在更接近用户的位置，缩短到服务器的往返行程，加快页面加载时间来解决性能问题。WPO解决方案，如Radware的FastView，则在前端进行性能提升处理，使页面更有效地呈现在浏览器中。 “我已经使用了内容交付网络(Content Delivery Networks, CDN)，为什么还需要前端性能优化(Web Performance Optimization，WPO)解决方案呢?”这是用户咨询最多的问题之一。要...
常用到的一些优化： 1.提倡前端开发工程师在书写xhtml的时候做到结构语义化（标签语义化的好处：1.有利于搜索引擎；2.结构清晰便于团队合作；3.有利于盲人屏幕阅读器。至于如何做到标签语义化，就看个人的理解了，这方面我也觉得模糊，跟个人的习惯估计也有一定的关系。）。 2.css，js文件数量及大小的优化（一般情况下建议css和js采用外联式，减少重复性代码，代码重复利用）。 3.背景图片数量及大小的优化（用PNG8格式的图片结合...
1. 减少http请求数 合并文件，通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中，从而减少Http请求的数量。 CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中，使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。 内联图片使用data: URL scheme 把图片数据嵌入页面，但这会增加Html文档的大小。2. 使用内容分布式网络 内容分布式网络（CDN）是一系列分布...
摘要： 页面优化是对网页中的HTML代码进行必要的调整，可以有效地精简页面中的冗余代码，加快网页显示速度，减少网页占用搜索引擎服务器的存储空间，提高用户体验和搜索引擎友好性，当然也可以更好的突出页面的主题，提高页面的相关性。下面是我总结出来的编写html代码时需要注意的，仅供参考。 1、HTML标签有始终。 减少浏览器的判断时间 2、把script标签移到HTML文件末尾，因为JS会阻塞后面的页面的显示。 3、减...
1.尽量减少请求数 提取公用CSS，模块化，其他的合并。Javascript也一样(可以避免页面加载阻塞)。 对页面上的小图标，背景等图片进行合并，减少请求次数。 2.减少页面体积 压缩JS 3.CSS&HTML的重构 CSS选择器不能太长，禁止使用ID选择器和!important 4.延迟加载 通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入...
本文由 伯乐在线 - J.c 翻译，sunbiaobiao 校稿。未经许可，禁止转载！英文出处：www.deanhume.com。欢迎加入翻译小组。 最近，我参加了在伦敦举办的Facebook移动开发者大会。在那天期间，有很多的交谈，但真正让我关注的是一场关于性能的，名为“让m.facebook.com更快”的交流会，它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。 Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome ...
前言 上一篇系列文章整理了CSS选择器的基础使用方法，因为内容较多且细致，写了很多DEMO，目前将它整理成适合移动端浏览器的CSS选择器的参考手册，方便学习CSS的人参考使用，马上就要搞定了，之后会放出 (笑脸)。 本节内容会跟着上一节的内容继续完善，首先会补充CSS选择器的浏览器支持情况（主要是说IE），比如我们最常用的s1,s2,…,sN群组选择器在IE7时才被支持，并且IE7还支持了很多我们没有想到的选择器，如子元素选择器，属...
CSS的性能也会影响页面的请求数加载速度及渲染效率，总结CSS的性能优化主要有以下几方面： 一、CSS的文件大小压缩，主要对字节数进行压缩，CSS文件带大小会增加网络额外开销，尤其是访问量比较大的页面。主要方法有以下： 1.减少CSS文件中空格等不必要的多余字符，语法上尽可能多的应用缩略写法（如 margin 10px;）。 2.有点浏览器支持解压gzip格式的压缩文件，可设置服务器将相应文件压缩成gzip包。 二、对CSS进...
这是一个老生常谈的内容了，90%的面试里都会问到，在这里只是再简单的整理一遍，以加强记忆巩固。 一 减少Http请求：主要可以通过合并图片、Css、Js和页面延迟加载等方法减少请求次数； 二 减少repaint和reflow:主要是指要尽量减少页面的重新渲染和重新布局，这个实际工作中基本是不可避免的，就合理使用即可； 三 减少对DOM的操作：主要是指尽量减少对DOM的增删改查这一类的节点操作，尽量使用局部变量，这个在某些项...