随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法: 一.用CSS替代图片 这一点在任何时候都适用:只是在当前我们可以更多的使用样式表来制作出设计效果,CSS3的圆角.渐变.模盒阴影.字体阴影能帮助我们处理绝大多数视觉效果,并且在各种分辨率下都有良好的表现. CSS Button 二.为高分辨率设备提供高清图片 如果必须使用图片,通常是准备2套图片,一套原始尺寸( 为普通设备准…

一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAPM Browser Insight 的定位分析功能四个方面介绍前端优化方法 二.图像的 BASE64 编码 不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了.而目前,浏览器已经支持了该特性,我们可以将图片数据编码成…

注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几年前,谷歌的一项统计表明,如果亚马逊页面加载每慢 100ms,将影响他们 1% 的收入:如果谷歌页面加载慢 500ms,流量将锐减 20%,这个数据现在必将更加恐怖! 在前端高性能优化(一).(二)中,笔者介绍了一些关于前端优化的技术,这些技术都依赖于前人的辛苦努力,但我们仍要明白的是,前端的情况十…

网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则…

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少 HTTP 请求: 1) 合并文件,比如把多个 CSS 文件合成一个: 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位:参见:CSS Sprites: Image Slicing's Kiss of Death 3) 图…

作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 规则01:尽量减少HTTP请求 前端优化的黄金准则指导着前端页面的优化策略:只有10%-2…

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会让您得到与之匹配的回报. 缘起 随着用户体验的日益重视,前端性能对用户体验的影响备受关注,但由于引起性能问题的原因相对复杂,我们很难但从某一方面或某几个方面来全面解决它,这也是我行此文的原因,想以此文为起点,用一系列文章来深层次探讨与梳理有关Javascript性能的方方面面,以填补并夯实自己的知识…

github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手,应用层会下发数据给传输层,这里 TCP 协议会指明两端的端口号,然后下发给网络层.网络层中的 IP 协议会确定 IP 地址,并且指示了数据传输中如何跳转路由器.然后包会再被封装到数据链路层的数据帧结构中,最后就是物理层面的传输了 TCP 握手结束后会进行 TLS 握手,然后就开始正式的传输数据(如…

前端性能优化总结 资源优化 缓存 最好的资源优化就是不加载资源.缓存也是最见效的优化手段.说实话,虽然说客户端缓存发生在浏览器端,但缓存主要还是服务端来控制,与我们前端关系并不是很大.但还是有必要了解一下. 缓存包括服务端缓存和客户端缓存,本文只谈客户端缓存.所谓客户端缓存主要是http缓存.http缓存主要分为强制缓存和协商缓存. 强制缓存 Expires(http1.0) 在http1.0中使用Expires来做强制缓存.Exprires的值为服务端返回的数据到期时间.当再次请求时的请求时间…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…