关于web优化(一)
我们所说的web,无非就是html,css(web font, image),JavaScript。
HTML优化建议:
1. 尽量不要用table进行布局。
2. 尽量用最新的带有语义的h5标签,这样在解析跟渲染时更快。
3. 使用块传输数据,web服务器响应头设置:Transfer-Encoding: chunked
4. 预处理DNS,DNS缓存。可以通过link标签增加rel=“dns-prefetch”,如:<link rel="dns-prefetch" href="//google-analytics.com" >
5. html压缩:
a. 删除所有空白字符,包括spaces,tabs,newline等。
b. 删除简单值的引号。
c. 删除可选的关闭标签,如:</body>,</p>,</li>
d. 尽量使用短一点的id标识
CSS优化建议:
1. 用外部CSS文件。
2. 异步加载CSS,可以借助loadCSS,AsyncLoader等这些工具。或者动态创建link标签实现。
3. 压缩CSS文件,包括web字体的压缩。
4. 尽可能早的加载web字体,可以在html文件的style标签定义字体,如下:
<style>
@font-face{
font-family: my-font;
src: url(my-font.woff);
}
</style>
5. 可以使用FontFace API动态加载字体。
JAVASCRIPT优化建议:
1. JS压缩。
2. 异步加载,可以借用requireJS,可以动态创建script标签。
3. <script>:js在加载时会阻塞其他资源的下载渲染;<script defer>:js在加载时不会阻塞其他资源的下载渲染,js加载完不会立即执行,而是等到所有其他资源下载完成js才会执行,适合js有其他依赖的情况;<script async>:js在加载时不会阻塞,js加载完会立即执行,执行的时候回阻塞。
4. DOMContentLoaded事件会在load事件之前触发。
IMAGE:
1. 给img标签设置宽度高度可以提升渲染性能,如:<img src="logo.png" width="300" height="100" alt="Logo">
2. 对于小图标可以使用data url方式内联加载。转换为base64后的字符大小一般会比图片本身大30%,但有web服务器一般启用gzip,gzip会压缩base64进行传输,所以结果反而甚至会小很多。
3. 选择正确的图片格式及图片压缩率,新的图片格式:jpeg-xr,webp,apng
4. 合并图片减少请求数,需考虑图片个数与合并后图片的大小平衡问题,一般不要超过10个图片的合并。
总结:
1. 服务器端支持http/1.1,支持压缩(gzip等)。
2. 尽量减少请求数量,实现资源共享。
3. 支持块传输,以便尽可能早解析html并发现内联的请求。
4. 支持DNS缓存,预查询DNS。
5. 尽可能减少CSS文件大小及个数(CSS压缩)
6. 使用新的高性能的js加载工具,如requirejs。
7. 优化图片的大小,减少网络占用。
关于web优化(一)的更多相关文章
- web优化及web安全攻防学习总结
web优化 前端:(高性能网站建设进阶指南) 使用gzip压缩(节省服务器的 网络带宽) 减少http请求( 减少DNS请求所耗费的时间. 减少服务器压力. 减少http请求头) 使用cdn(用户可以 ...
- 转:Web优化 及常用工具包
Web优化: 减少http请求 避免404错误 在html页面header加入缓存标签 Gzip压缩网页 减少cookie体积 使用外部的js和css 消减js和css 压缩js 使用css spri ...
- Web优化躬行记(1)——CSS
Web优化的对象包括页面性能.用户体验.开发效率.代码优化.网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉. 本系列优化内容提炼于<前端面试宝典>.& ...
- web优化 js性能高级篇
今天我们继续上一个阶段关于web的性能优化,如何对js高级进行优化 (1)闭包 何为闭包; 一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 我认 ...
- YaHoo Web优化的14条法则
Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其 ...
- web优化(一)
今天读完了<高性能网站建设进阶指南>,记得博客园的某位前辈说,关于前端方面的书,带指南两个字的一般都是比较牛逼的,上一本看到的好书是<javascript权威指南>是淘宝前段团 ...
- web优化
一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...
- Web优化躬行记(2)——JavaScript
一.语言 1)慎用全局变量 当变量暴露在全局作用域中时,由于全局作用域比较复杂,因此查找会比较慢. 并且还有可能污染window对象,覆盖之前所赋的值,发生意想不到的错误. 0 == '' //tru ...
- Web优化躬行记(3)——图像和网络
一.图像 1)响应式图像 浏览器根据屏幕大小.设备像素比.横竖屏自动加载合适的图像. 响应式的功能可以通过srcset和sizes两个新属性实现. 前者可指定选择的图像以及其大小,后者会定义一组媒体条 ...
随机推荐
- 微软2014校招笔试题-String reorder
Time Limit:10000ms Case Time Limit:1000ms Memory Limit:256MB Description For this question, your pro ...
- postgresql 唯一约束增强
http://blog.chinaunix.net/uid-15145533-id-2775821.html
- Lock接口
Lock与synchronized Lock和synchronized在功能上是一样的.不过Lock提供了一些其他功能,包括定时的锁等待.可中断的锁等待.公平性,以及实现非块结构的加锁. 从性能上Lo ...
- underscore.js源码解析【集合】
// Collection Functions // -------------------- // The cornerstone, an `each` implementation, aka `f ...
- mysql 开发进阶篇系列 36 工具篇mysqlshow(数据库对象查看工具)
一.概述 mysqlshow客户端查找工具,能很快地查找存在哪些数据库,数据库中的表,表中的列或索引,和mysql客户端工具很类似,不过有些特性是mysql客户端工具所不具备的. mysqlshow的 ...
- mysql 开发进阶篇系列 32 工具篇(mysqladmin工具)
一.概述 mysqladmin是一个执行管理操作的客户端程序.用来检要服务的配置和当前的状态,创建并删除数据库等.功能与mysql客户端类似,主要区别在于它更侧重于一些管理方面的功能.1. 查找mys ...
- sql server 备份与恢复系列六 文件组备份与还原
一. 概述 文件备份是指备份一个或多个文件或文件组中的所有数据.使用文件备份能够只还原损坏的文件,而不用还原数据库的其余部份,从而加快恢复速度.例如,如果数据库由位于不同磁盘上的若干文件组成,在其中一 ...
- Android 源码分析01_AsyncTask
[参考文献] http://blog.csdn.net/singwhatiwanna/article/details/17596225 /* * Copyright (C) 2008 The Andr ...
- docker学习系列(四):数据持久化
需要搞清楚一个概念的是,docker的容器设计理念是可以即开即用,用完可以随意删除,而新建容器是根据镜像进行渲染,容器的修改是不会影响到镜像,但是有时候容器里面运行的产生的数据(如mysql)或者配置 ...
- WebService与RMI(远程调用方式实现系统间通信)
前言 本文是<分布式java应用基础与实践>读书笔记:另外参考了此博客,感觉讲的挺好的,尤其是其中如下内容: 另外,消息方式实现系统间通信本文不涉及.RMI则只采用spring RMI框架 ...