网页性能优化 要点

性能优化
黄金规则

规则1——减少http请求//
    (缓存,内联图片,雪碧图,将图片转换为base64编码,合并脚本和样式表)

规则2——使用内容发布网络(CDN)
    //将静态内容放在不同的CDN当中,用户请求时将会就近从服务器中加载

规则3——添加Expires头
    //设置当前页面的过期日期时间,添加在响应头和请求头当中,Max-Age:缓存的保存时间
    304:发送过请求,不过内容是从缓存中取出的

规则4——压缩gzip

规则5——将样式表放在顶部

规则6——将脚本放在底部
    (js是同步加载的。页面可能会出现白屏)
    规则7——避免css表达式

规则8——尽量使用外部的Js和css

规则9——减少DNS查找
    //DNS域名解析服务器

规则10——精简js脚本

规则11——避免重定向

规则12——移除重复的脚本

规则13——配置ETag
    //解决缓存更新的问题(当服务器集群时,会出现问题)

规则14——ajax缓存(不常用)
    //当ajax内容不变时可以使用

时间: 2024-10-14 18:13:58

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

网页性能优化

文章首发: 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的图片数据放在页面

19个MySQL性能优化要点解析

19个MySQL性能优化要点解析 以下就是跟大家分享的19个MySQL性能优化主要要点,一起学习学习. 1.为查询优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个缓存中,这样,后续的相同的查询就不用操作表而直接访问缓存结果了. 这里最主要的问题是,对于程序员来说,这个事情是很容易被忽略的.因为,我们某些查询语句会让MySQL不使用缓存.请看下面的示例: //

react性能优化要点

1.减少render方法的调用 1.1继承React.PureComponent(会自动在内部使用shouldComponentUpdate方法对state或props进行浅比较.)或在继承自React.Component类型的组件中使用shouldComponentUpdate方法来决定render方法是否被调用. 使用浅比较时,如果是对象类型就会出问题,因此最好是使用immutable类型.<immutable在性能优化中的作用> 1.2在调用组件时,如果某个属性值是函数,避免使用箭头函数

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

写在前面:文章转自网络 英文原版链接 ,若是觉得本文哪里不好还请指出,以便及时修改 目录(分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

网页性能优化的点点

前端优化再次被提起,高性能网站总是会得到用户的肯定,加载时间短,友好的界面交互,最少的资源占用,容易被搜索引擎抓取. 就自己可以接触到的范围,记录些优化的点点滴滴. 1.减少HTTP请求: 使用外部的css和js文件,这样便于压缩,便于合并. 使用CSS sprite,将小图片放于一张图片使用背景图绝对定位.PNG8会比GIF格式的图片小. 2.避免跳转,避免404: 这个在访问网站的时候的确经常遇到,而且真的是很影响体验,尤其/的问题,打开网站的时候,总重定向到加/的位置. 404神码的,最让

网页性能优化个人总结

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