用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?   看1个简单的CSS: DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style.多么简单易懂的原理,可是这个理解却是完完全全相反.错误的. 匹配原理: 浏览器CSS匹配不是从左到右进行查找,而是从右到左进…

这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 React 事件来提高性能 CSS 必须通过一个相对复杂的管道,就像 HTML 和 JavaScript 一样,浏览器必须从服务器下载文件,然后进行解析并将其应用于 DOM.由于优化程度极高,这个过程通常非常快--对于不基于框架的小型 web 项目,CSS 通常只占总资源消耗的一小部分. 框架打破了这种…

简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 CSS 会对页面渲染的效率有严重影响,尤其是对于结构复杂的 Web 2.0 页面,这种影响更是不可磨灭.所以,写出规范的.高性能的 CSS 代码会极大的提高应用程序的效率.本文主要来探讨一下如何优化,以及从哪些方面优化应用程序的 CSS 代码,从而最大限度的提高 Web 应用的性能.   CSS 性…

Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也用了angularjs开发了一个项目,那感觉真的是谁用谁知道. angularjs的好处我就不在这里废话了,有兴趣的请自行度娘.背景是这样的, 在这个使用angularjs开发的项目中,由于自己的粗心导致页面打开很慢,傻了吧唧的引用了未压缩的js文件,将近1M的js啊,我还傻乎乎的建索引,优化sql…

CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动. /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原…

为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据著名的`2-5-8`原则: 当用户在2秒以内得到响应,会感觉系统的响应非常快 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以 当用户在5-8秒之内得到响应,会感觉系统的响应非常慢,但还可以接受 当用户在8秒之后都没有得到响应,会感觉系统糟透了,甚至系统已经挂掉:要么打开竞争对手的网站,要么…

读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HTML5的大菜拿出来讲一讲,再去分析性能优化的内容,这样才会有吸引力.因为只是在线试读,没有机会看后面的内容,所以不胡乱评价了. 虽然我觉得这本书没说到点子上,但还是从“高性能”方面学到了很多东西------又一次扩大了知识面!以前,我一直认为一套架构稳定.后台高质量的代码就能让系统高效,但读完这本书两章内容之…

web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时代码编辑的习惯上考虑web性能优化以及SEO. 首先是为人处事的问题,凡事不要等别人说你了才知道做.我很喜欢那一句话:我们是人,不是奴隶,要有自主性. 这些基本的东西上级肯定会要求,与其留到领导跟你说的时候再改,不如一次到位.你耳根清净,他得闲考虑其他更有价值的问题. 旁言不做赘述,直奔主题. we…

压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等.   选择合适的图片格式 如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格式. 合并静态资源 包括CSS.JavaScript和小图片,减少HTTP请求. 开启服务…

简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 确保静态资源是有缓存. 确保静态资源的大小最小. 确保加载的资源最少. 确保用户以最短的时间看到页面 减少人为因素的性能瓶颈. 解决方案 缓存 让资源更可能快的让用户看到. 结合代理(nginx)来实现.给http添加缓存的时长. # 需要缓存的静态资源类型 location ~ .*\.(gif…

一.前言 我们在 HTTP/2 对 Web 性能的影响(上)已经和大家分享了一些关于 Http2 的二项制帧.多用复路以及 APM 工具等,本文作为姊妹篇,主要从 http2 对 Web 性能的影响.http2 使用的利弊以及一些正在进行中的相关工作等方面与大家进行分享. 二.Web 性能影响:与内联.级联及图像精灵说再见? HTTP/2 多路复用对前端 Web 开发人员造成了深远的影响.长久以来,人们用尽方法,试图通过捆绑相关资产来削减连接的数量,而现在这一切都不需要了.人们曾经尝试过的方法包…

一.前言 HTTP/2 于 2015 年 5 月正式推出.自诞生以来,它就一直在影响着网络性能最佳实践.在本篇文章中,我们将讨论 HTTP/2 的二进制帧.延迟削减.潜在利弊以及相应的应对措施. 超文本传输协议(简称 HTTP)正是万维网与网络空间的基石.现在,HTTP 听起来已经有些过时,毕竟该协议中使用最广泛的版本--HTTP 1.1,已快迎来它的第二十个年头.时光回溯到1997年,HTTP1.1刚刚出现的年代,当时,软驱与调制解调器还是 PC 设备的必备周边产品,Java 也仅仅是一个刚刚…

WEB性能測试工具主要分为三种.一种是測试页面资源载入速度的,一种是測试页面载入完成后页面呈现.JS操作速度的,另一种是整体上对页面进行评价分析,以下分别对这些工具进行介绍,假设谁有更好的工具也请一起分享下. Firebug: Firebug 是firefox中最为经典的开发工具,能够监控请求头.响应头,显示资源载入瀑布图:      HttpWatch :    httpwatch 功能类似firebug,能够监控请求头.响应头,显示资源载入瀑布图. 可是httpwatch还能显示GZIP压缩…

Velocity China 2016 Web 性能与运维大会是一场关于构建快速.可扩展的弹性网站所需要的Web性能.运维及开发运维的训练.大会将于2016年12月1日在北京拉开帷幕,此次大会被众多业界精英所期待,Eliazer Braun这样评价Velocity:"如果您对开发运维和Web性能是认真的,Velocity 是必须参加的会议." 快捷报名地址:http://www.huodongjia.com/event-418473213.html 为什么参加 Velocity Chi…

最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Javascript源代码.这样文件体积就变小了,用户加载必要资源所花费的时间就更短了”.作者追问还有吗,应聘者答不上来了. 作者在书中附上的更多的web性能优化经验.其中我详细补充了很多 压缩源码和图片 JavaScript 文件源代码可以采用混淆压缩()的方式,css文件源代码进行普通压缩,jpg图片可以根据质量…

衡量一个网站的性能有多个指标,DNS解析时间,TCP链接时间,HTTP重定向时间,等待服务器响应时间等等,从用户角度来看,就可以归结为该网站访问速度的快慢.也就是说性能等于网站的访问速度. 早些年Amazon曾经做过一个统计:网页加载时间每延长1秒钟,一年将减少16亿美元的营收.(16亿美元是一个什么概念呢?2015年,百度全年的总营收约100亿美元!). 鉴于性能的重要性,于是我们便经常看到许多记录提升访问速度的方法的文章:减少http请求,雪碧图,压缩文件等等,看了这些文章后,博主了解了一些…

一.前言 开始先扯点别的: 估计很多前端er的同学应该遇到过:在旧项目中添加新的功能模块.或者修改一些静态文件时候,当代码部署到线上之后,需求方验收OK,此时你送了一口气,当你准备开始得意于自己的masterpiece时候,突然需求方跑来和你说,很多用户反应还是没有看到新的效果,或者某个图片还是旧的....what? 估计你第一反应就是,肯定是可恶的缓存搞的鬼.我遇到这样几种情况: 1.在某个旧项目中,我们的静态资源部署主要是在每次更新的时候自动添加版本号的形式,比如在后面加上版本?v=时间戳,…

摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第 6 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 React 事件来提高性能 Web 性能优化:21种优化CSS和加快网站速度的方法 Web 性能优…

摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法 图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你不小心的话,图片大小有时高达几十兆. 因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平. 在我的网站上,我注…

摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一项棘手的工作. 有很多不同的场景,不同的技术,不同的术语. 在这篇文章中,我希望给你所有你需要的东西,这样你就可以: 了解哪种文件分割策略最适合你的网站和用户 知道怎么做 根据 Webpack glossary,有两种不同类型的文件分割. 这些术语听起来可以互换,但显然不是. Webpack 文件分…

转自CSDN: Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等. 2.选择合适的图片格式如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用Web…

在互联网盛行的今天,越来越多的在线用户希望得到安全可靠并且快速的访问体验.针对Web网页过于膨胀以及第三脚本蚕食流量等问题,Radware向网站运营人员提出以下改进建议,帮助他们为用户提供最快最优质的访问体验. 1. 管理“页面膨胀” 页面大小与性能有着密切的关系.据调查显示,100强电商页面大小中位数达到了1492KB,比一年半之前增大了48%. 在研究报告里加载最快的10个页面中,页面包含的资源请求中位数为50个,页面大小中位数为556KB.而加载最慢的10个页面中,页面包含的资源请求中位数…

相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应用都搬到了互联网上.当然便利的同时毫无疑问的也使页面的速度越来越慢.自己是做前端开发的,在性能方面,根据Yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化的. 以上是一张web2.0页面的生命周期图.工程师很形象地讲它分成了“怀孕,出生,毕业,结婚”四个阶段.如果在我…

web性能权威指南(High Performance Browser Networking) https://www.cnblogs.com/qcloud1001/p/9663524.html HTTP协议是前端性能乃至安全中一个非常重要的话题,最近在看<web性能权威指南(High Performance Browser Networking)>,把其中关于HTTP部分的内容拿出来分享一下,加了一点自己的想法,当然没有<HTTP权威指南>讲得详细,但对于理解我们平常做的事情很有启…

Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等. 2.选择合适的图片格式如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格…

1.web性能监控背景描述 上期分享的<Web性能监控自动化探索之路–初识WebPageTest>从依赖webpagetest的角度给出了做性能日常检查的方案,但由于依赖结构相对复杂我们需要给出更简单的解决方案.,测试同学没有快速投入的主要原因也是语言和维护成本相对比较大.但解决方案是多种多样的:).那么我们再看下这个需求的本质:针对内外网环境需要定期对站点进行yslow和page speed检查,以保证在持续开发过程中保证质量. 对比webpagetest,我们再反思下手里的资源和特点: 1…

提升Web性能的8个技巧总结 在互联网盛行的今天,越来越多的在线用户希望得到安全可靠并且快速的访问体验.针对Web网页过于膨胀以及第三脚本蚕食流量等问题,Radware向网站运营人员提出以下改进建议,帮助他们为用户提供最快最优质的访问体验. 1. 管理“页面膨胀” 页面大小与性能有着密切的关系.Radware最新电商性能“行业现状”报告显示,100强电商页面大小中位数达到了1492KB,比一年半之前增大了48%. 在研究报告里加载最快的10个页面中,页面包含的资源请求中位数为50个,页面大小中位…

今天我们阐述HTML 5的革新之一:更简洁的结构. 新的文档类型 DOCTYPE 先来解释一下文档类型 DOCTYPE:文档类型位于HTML源文件的第一行,在HTML4的标准中,DOCTYPE在被归在“HTML 标签”一章中, DOCTYPE由来历史 说说历史吧,其实 DOCTYPE 之所以出现是由于早期的Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式).而且这个黑色艺术的缔造者就是微软,微软在开发E…

1.一个例子 响应式Web设计最核心的一点,就是可以适配不同视口大小的流式布局. 1.1 简单上手 <div class="row"> <header class="col subcategory-header"> <h2>Lorem ipsum</h2> </header> <div class="col subcategory-content"> <div clas…

HTTP 1.0的优化策略非常简单,就一句话:升级到HTTP 1.1.完了! 改进HTTP的性能是HTTP 1.1工作组的一个重要目标,后来这个版本也引入了大量增强性能的重要特性,其中一些大家比较熟知的有: 持久化连接以支持连接重用: 分块传输编码以支持流式响应: 请求管道以支持并行请求处理: 字节服务以支持基于范围的资源请求: 改进的更好的缓存机制. 当然,这些只是其中一部分,要全面讨论HTTP 1.1的所有增强特性,非得用一本书不可.同样,推荐大家买一本<HTTP权威指南>(David G…