网页性能优化的点点

前端优化再次被提起,高性能网站总是会得到用户的肯定,加载时间短,友好的界面交互,最少的资源占用,容易被搜索引擎抓取。

就自己可以接触到的范围,记录些优化的点点滴滴。

1.减少HTTP请求:

使用外部的css和js文件,这样便于压缩,便于合并。

使用CSS sprite,将小图片放于一张图片使用背景图绝对定位。PNG8会比GIF格式的图片小。

2.避免跳转,避免404:

这个在访问网站的时候的确经常遇到,而且真的是很影响体验,尤其/的问题,打开网站的时候,总重定向到加/的位置。

404神码的,最让人无语了,的确又是很影响用户体验的一个坑,但避免确实是很容易的。

3.利用各种缓存

这个专门写了一篇http://www.cnblogs.com/linda586586/p/4127103.html

4.CSS放于头部,js放于尾部

时间: 2024-10-15 14:03:18

网页性能优化的点点的相关文章

网页性能优化

文章首发: http://www.cnblogs.com/sprying/p/4251682.html 本文先从网页性能优化点说起,然后介绍怎么实施性能优化,有哪些性能检测工具. Yahoo!性能优化35条 Yahoo!性能优化现在有35条,划分成了几个类别,content.server.Cookie.CSS.JavaScript.Images.Mobile. 减少HTTP的请求数 合并Js.CSS文件,使用CSS sprites,使用Inline images(将base64的图片数据放在页面

网页性能优化 要点

性能优化黄金规则 规则1——减少http请求//     (缓存,内联图片,雪碧图,将图片转换为base64编码,合并脚本和样式表) 规则2——使用内容发布网络(CDN)     //将静态内容放在不同的CDN当中,用户请求时将会就近从服务器中加载 规则3——添加Expires头     //设置当前页面的过期日期时间,添加在响应头和请求头当中,Max-Age:缓存的保存时间     304:发送过请求,不过内容是从缓存中取出的 规则4——压缩gzip 规则5——将样式表放在顶部 规则6——将脚

前端积累-----网页性能优化

写在前面:文章转自网络 英文原版链接 ,若是觉得本文哪里不好还请指出,以便及时修改 目录(分7类,共35条): [内容]尽量减少HTTP请求数 [服务器]使用CDN(Content Delivery Network) [服务器]添上Expires或者Cache-Control HTTP头 [服务器]Gzip组件 [css]把样式表放在顶部 [js]把脚本放在底部 [css]避免使用CSS表达式 [js, css]把JavaScript和CSS放到外面 [内容]减少DNS查找 [js, css]压

网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面

网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染页面的过程就会被阻塞2秒,直到该JS文件下载并执行完后才继续. 前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面. 1.JavaScript为何会阻塞? <!doctype html> <html> <head> <script type

网页性能优化个人总结

HTML部分: 1.语义化html:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发: 2.减少DOM节点:加速页面渲染: 3.给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放: 4.用link而不用@import的方式引入样式: 5.样式放在页头,js放在页尾: CSS部分: 1.使用css缩写,减少代码量:删掉重复的css: 2.通过css sprites把同类图片合成一张,减少图片请求: 3.减少查询层级:.header .logo好过.header .to

网页性能优化指导--说得太好了,详细,具体,易理解,推荐看----Website Speed Optimization Guide for Google PageSpeed Rules

原链接地址:http://www.artzstudio.com/2016/07/website-speed-optimization-guide-for-google-pagespeed-rules/ Website Speed Optimization Guide for Google PageSpeed Rules By Dave Artz 1 week ago 6  534 0 Page Speed/Site speed is termed as the speed with which

WEB性能优化【资料】

为了解决近期项目遇到的性能瓶颈,花费不少功夫恶补了web性能的相关优化方案,整理了一些资料,分享给大家. 博客 网页性能管理详解 - 阮一峰的网络日志 页面性能优化的利器 - Timeline - 云加社区 - 博客园 什么是CDN,为什么你的网站需要它? 网站开发动静分离实践 - BruceFeng 网页性能优化 - 小方. - 博客园 16毫秒的优化--Web前端性能优化的微观分析--O'Reilly Velocity China 2013 Web 性能与运维大会 全新Chrome Devt

网页性能分析的几种方法

一.谷歌开发者工具的"性能"选项进行分析: 二.谷歌的Lighthouse工具(国内网络环境):基于 node(版本≥6) 1.安装:npm install -g lighthouse 2.运行使用:lighthouse <url> --view 例如:lighthouse https://www.baidu.com/ --view 三.如果可以FQ的话:可以在 Chorome 网上应用商店中安装 - 网页性能优化的扩展程序:Lighthouse.PageSpeed Ins

说走就走的性能优化之旅

雅虎规则 熟悉网站优化的开发者应该都知道,只要提到网页性能优化,就绕不开雅虎军规.优化规则&&原文,仔细阅读这些规则,可以总结到3个方面: Http层面上的优化 减少http请求数,http请求cookie减小,减少DNS查询,避免跳转,ajax利用缓存之类,都是在http层面上的考虑. 静态资源 压缩js和css代码,使用gzip,利用CDN(也可以算http层面上),避免CSS表达式,优化和裁剪图片之类的,都可以算作为静态资源上的优化,其实和Http很多有交集的. 页面加载 前置css