(网页)web性能优化(转)
转自CSDN:
Web性能优化分为服务器端和浏览器端两个方面。
一、浏览器端,关于浏览器端优化,分很多个方面
1、压缩源码和图片
JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色、去掉一些PNG格式信息等。
2、选择合适的图片格式
如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格式。
3、合并静态资源
包括CSS、JavaScript和小图片,减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益
4、开启服务器端的Gzip压缩
这对文本资源非常有效,对图片资源则没那么大的压缩比率。
5、使用CDN
或者一些公开库使用第三方提供的静态资源地址(比如jQuery、normalize.css)。一方面增加并发下载量,另一方面能够和其他网站共享缓存。
6、延长静态资源缓存时间
这样,频繁访问网站的访客就能够更快地访问。不过,这里要通过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。
7、把CSS放在页面头部,把JavaScript放在页面底部
这样就不会阻塞页面渲染,让页面出现长时间的空白。
原文:http://bbs.csdn.net/topics/391849317
(网页)web性能优化(转)的更多相关文章
- Web 性能优化:21 种优化 CSS 和加快网站速度的方法
这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...
- web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...
- web性能优化-浏览器渲染原理
在web性能优化-浏览器工作原理中讲到,浏览器渲染是在renderer process中完成的. 那我们来看下renderer process究竟干了什么? Renderer Process包含的线程 ...
- web性能优化-浏览器工作原理
要彻底了解web性能优化的问题,得搞清楚浏览器的工作原理. 我们需要了解,你在浏览器地址栏中输入url到页面展示的短短几秒中,浏览器究竟做了什么,才能了解到为什么我们口中所说的优化方案能够起到优化作用 ...
- Web性能优化之瘦身秘笈
Web 传输的内容当然是越少越好,最近一段时间的工作一直致力于 Web 性能优化,这是我近期使用过的一些缩减 Web 体积的手段 这些手段主要是为了减少 Web 传输的内容大小,只有干货 CSS 删除 ...
- 关于WEB 性能优化 (摘抄)
压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...
- Web性能优化-合并js与css,减少请求
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...
- web性能优化——浏览器相关
简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...
- Web性能优化系列
web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...
随机推荐
- Python--Click
Click Click 是 Flask 的开发团队 Pallets 的另一款开源项目,它是用于快速创建命令行的第三方模块. 我们知道,Python 内置了一个 Argparse 的标准库用于创建命令行 ...
- eclipse引入php源包
首先安装这些yum install gcc gcc-c++ kernel-devel autoconf automake libtool bison re2c gdb 导入时,如果有这个报错的话 Pr ...
- 11.10 vue
https://vuejs.org/js/vue.js ide typora v-pre 指令 vuex text script . 语法 BCF 终端输入 node -v npm -v 包管理 ...
- AOP技术基础(转)
1.引言 2.AOP技术基础 3.Java平台AOP技术研究 4..Net平台AOP技术研究 2.1 AOP技术起源 AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto ...
- lightswitch binding custom control
Listing 1: Setting up data binding for the Rating control usingSystem.Windows.Controls;usingSystem.W ...
- springboot使用遇到问题:Class “model.Address” is listed in the persistence.xml file but not mapped
报错如下: 解决如下: 这是一个Eclipse的怪癖.我最近在创建一个禁用了JPA库配置的新JPA项目时遇到了这个问题,但是在我通过Eclipse New JPA Entity向导创建实体之前没有手动 ...
- 学会4种备份MySQL数据库(基本备份方面没问题了)
前言 我们试着想一想, 在生产环境中什么最重要?如果我们服务器的硬件坏了可以维修或者换新, 软件问题可以修复或重新安装, 但是如果数据没了呢?这可能是最恐怖的事情了吧, 我感觉在生产环境中应该没有什么 ...
- .net core Identity集成IdentityServer4 (1)基本操作
一. 新建asp.net core identity项目 新建项目->asp.net core web应用程序-> web应用程序(模型视图控制器)&更改身份验证为个人. 新建一个 ...
- IOS中input键盘事件支持的解决方法
欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...
- python之字符串中有关%d,%2d,%02d的问题
python之字符串中有关%d,%2d,%02d的问题 在python中,通过使用%,实现格式化字符串的目的.(这与c语言一致) 其中,在格式化整数和浮点数时可以指定是否补0和整数与小数的位数. 首先 ...