前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化网站性能. 一.拆分初始化负载 拆分初始化负载——听名字觉得高大上,其实不然,土一点将讲就是将页面加载时需要的一堆JavaScript文件,分成两部分:渲染页面所必需的(页面出来,没他不行)和剩下的.页面初始化时,只加载必须的,其余的等会加载. 其实在现实生产环境中,对于大部分网站:页面加载完毕(w…

Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化黄金法则,以及大名鼎鼎的优化大师Steve Souders.本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结.希望对正在从事这个领域研究的前端同学能有所帮助. 简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段…

前端进阶(1)Web前端性能优化 Web前端性能优化, 不仅能够改善站点的用户体验,并且能够节省相当的资源利用.下面将从1)服务器.2)html内容.3)css. 4)javascript. 5)图片等几方面介绍具体的优化操作. 目录: 1. 服务器优化 1.1. 使用内容分发网络(CDN) 1.2. 服务器使用http2.0协议 1.3. GZIP压缩 1.4. 使用浏览器缓存 1.5. 设置ETag 2. HTML内容优化 2.1. 减少HTTP请求数 2.2. 减少DNS查找 2.3. 避…

本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用有损压缩的图片格式,它将图片的每个像素分解成8*8的栅格,然后对每个栅格的数据进行压缩处理,通过特殊的算法用附近的颜色填充栅格,隐藏细节.用户可以设置质量级别,从0到100,数字越少图片质量就越差. png:是一种使用无损压缩的图片格式,它将图片上出现的颜色进行索引,保留在“调色板”上,PNG在显示…

本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名URL转化为服务器主机IP. DNS查找流程:首先查看浏览器缓存是否存在,不存在则访问本机DNS缓存,再不存在则访问本地DNS服务器.所以DNS也是开销,通常浏览器查找一个给定URL的IP地址要花费20-120ms,在DNS查找完成前,浏览器不能从host那里下载任何东西. TTL(Time To Li…

本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的某些属性来构造它. 条件GET请求 浏览器下载组件的时候,会将它们存储到浏览器缓存中.如果需要再次获取相同的组件,浏览器将检查组件的缓存时间,假如已经过期,那么浏览器将发送一个条件GET请求到服务器,服务器判断缓存还有效,则发送一个…

本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要性 进度指示器有三个主要优势——它们让用户知道系统没有崩溃,只是正在为他或她解决问题:它们指出了用户大概还需要等多久,以便用户能够在漫长的等待中做些其他事情:最后,它们能给用户提供一些可以看的东西,使得等待不再是那么无聊.最后一点优势不可低估,这也是为什么推荐使用图形进度条而不是仅仅以数字形式显示预…

本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器看到响应中有一个Expires头时,它会和相应的组件一起保存到其缓存中,只要组件没有过期,浏览器就会使用缓存版本而不会进行任何的HTTP请求.Expires设置的日期格式必须为GMT(格林尼治标准时间). HTTP1.1协议中缓存的另一种选择 Expires存在着明显的不足. 首先,Expires头…

本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Unix系统的文件压缩,凭借着良好的压缩效率,现在已经成为Web上使用最为普遍的数据压缩格式. 压缩是如何工作的 客户端请求报文中包含Accept-Encoding表示客户端能识别的压缩方法,如果客户端请求报文没有包含Accept-Encoding首部,服务器就会假设客户端能够接受任何编码格式:服务器响应…

本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中移除所有的注释以及不必要的空白字符(空格,换行和制表符),减少javascript文件的大小. 混淆:和精简一样,会从javascript代码中移除注释和空白,另外也会改写代码.作为改写的一部分,函数和变量的名字将被转换为更短的字符串,所以进一步减少了javascript文件的大小. 混淆的缺点 1…