前段优化

avoid empty image Src

避免将img的src属性设置为空白
Make favicon.ico Small and Cacheable
用更小的并且可缓存的 favicon.ico

keep Components under 25k
 保持单个内容小于25K

Pack Components into a Multipart Document
打包组件成复合文本

Make Fewer Http Requests
尽可能减少HTTP请求数

CDN
使用CDN

Add Expires or  Cache-Control Header
增加Expires Header  Add an Expires Header

Reduce DNS Lookups
减少DNS查询 DNS域名解析系统

Put Stylesheets at Top
在顶部放置样式定义

Put Scripts at Bottom
在文档底部放置脚本定义或引用

Avoid CSS Expressions
避免使用CSS中的Expressions

Make JavaScript and CSS External
将脚本文件和样式表作为外部文件引用

Avoid Redirects
避免重定向
Minify JavaScript and CSS
最小化JAVASCRIPT和CSS
Remove Duplicate Scripts
除重复的脚本,不光是文件,甚至是同功能的函数

Configure ETags
配置ETags

Make Ajax Cacheable
使AJAX调用尽可能利用缓存特性

Flush the Buffer early
尽可能早地发送缓冲区内容

User Get for AJAX Requests
为AJAX请求使用GET方法
Post-load Components
延迟或按需加载内容

Preload Components
预加载组件

No 404s
不要出现404页面

Reduce the Number of Dom Elements
减少DOM元素数量

Spilt Components Acorss Domains
跨域分离组件

Minimize the Number of iframes
减少iframe数量 需要更有效的利用ifames

Reduce Cookie Size
减小Cookie Cookie

Use Cokkie-free Domains for Components
对组件使用无Cookie的域名

Develop Smart Event Handlers
设计“智能”的事件处理程序

Don‘t Scale Images in HTML
不要在 HTML 中使用缩放图片
Minimize DOM Access
减少DOM的访问次数

Choose [email protected]
 @import使用< link >而非@import

Avoid Filters
避免过滤器的使用

Optimize  Images
优化图片

Optimize CSS  Sprites
优化CSS Sprites

时间: 2024-08-10 14:04:57

前段优化的相关文章

雅虎Yahoo 前段优化 14条军规

Yahoo 14条 雅虎十四条 腾讯前端设计的Leader推荐我背熟的.请大家都能好好学习,不要像我一样一扫而过,好好的记下来!不仅仅是晓得一些CSS xhtml就好了,深刻认识到很多的东西需要学习的.很早就用Firebug,但是却没听说过Yslow,这叫不喜欢追求.希望大家关注前端设计的,多追求. 有兴趣的同学可以装个 Firebug 下的 Yslow ,测试下自己的网站. Web 应用性能优化黄金法则:先优化前端程序 (front-end) 的性能,因为 这是 80% 或以上的最终用户响应时

PHP提高网站性能的一些方法

前段时间面试问到了这个问题,回答的不是很全面,就去问了度娘,得到了一些比较全的答案,由于出处较多就没法确定原文出处了.下面是分享的答案. 一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量用户访问.高并发请求方面,基本的解决方案集中在这样几个环节:使用高性能的服务器.高性能的数据库.高效率的编程语言.还有高性能的Web容器.这几个解决思路在一定程度上意味着更大的投入. web容器是一种服务程序,在服务器一个端口就有一个提供相应服务的程序,而这个程序就是处理从客户端发出的请求,如Jav

《大型网站技术架构》读书笔记

大型网站架构演化 大型网站的关注指标 高可用 高性能 易扩展 可伸缩 安全 大型网站的特点 高并发,大流量 高可用 海量数据 用户分布广泛,网络情况复杂 安全环境恶劣 需求快速变更,发布频繁 渐进式发展 大型网站架构演化发展过程 初始阶段,一般使用LAMP来搭建,所有资源存放在一台服务器上 应用服务和数据服务分离,有独立的数据库服务器 使用缓存改善网站性能,依据是二八定律:80%的业务访问集中在20%的数据上 这里需要考虑哪些数据适合缓存 缓存可以是本地缓存,也可以是远程分布式缓存 使用应用服务

Http2 中比较重要的特性更新

HTTP2规范目前还没有完全定稿,某些关键的部分仍然在确认中.HTTP2借鉴了Google的SPDY的思想. 虽然版本号更新为2,但是在URL请求格式上仍然沿用了HTTP1.x,并且后续的版本以大版本号进行更新,不会再出现小版本号更新的情况. 此次HTTP2与HTTP1.x相比,重要的变化有如下几点: 1,传输格式改为采用二进制,而不再像HTTP 1.x 一样使用Plain Text; 2,连接可以进行复用(还不清楚是多个会话间复用,还是多应用间复用),理论上可以大幅减少多个请求的连接重建时间和

Bootstrap 实战之响应式个人博客 (一)

一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的.github提供了github-page让用户可以免费部署自己的静态站点.更多参考:github-page 在本项目的静态站点部署时与其他的代码仓库,提交同步没有太大的区别(言外之意:还是有点不同的): 第一点:需要将项目目录名设置为 "githu

网站前段性能优化总结

网站前端性能优化总结 作者: wireless_tech  发布时间: 2011-09-16 20:07  阅读: 2496 次  推荐: 0   原文链接   [收藏] 一.服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头  某些经常使用到.并且不会经常做改动的图片(banner.logo等等).静态文件(登录首页.说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性.如果有缓存,文档就可以从缓存(

前段开发过程中需要优化的问题

(1) 减少http请求次数:css spirit,data uri(2) JS,CSS源码压缩(3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数(4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能(5) 用setTimeout来避免页面失去响应(6) 用hash-table来优化查找(7) 当需要设置的样式很多时设置className而不是直接操作style(8) 少

前段性能优化之js,css调用优化

规则1:减少HTTP请求     把多个JS请求合并为一个JS请求,把多个CSS请求合并为一个CSS请求.从而减少从客户端向服务器端的请求数.     规则3:添加Expires头     用http请求的查看工具,我这里用的是firebug查看http请求,可以看到响应头中有Expires头,unicorn的设置的默认过期时间是30分钟.即是如果当前网页未过期,浏览器不会发请求,直接查找本地页面缓存.加速前端响应速度,减少服务器端压力.     规则4:压缩组件     查看http请求头参数

面试时回答MySQL数据库的简单优化

使用show status命令可以看到MySQL的运行状态,加上like命令可以查看某一个状态,MySQL的优化不是理论上的要根据公司数据库的实际运行状态来进行参数的调优.其实我们亦可以在MySQL的前段加上memcache,对已经使用过的SQL语句进行缓存.memcache我们以后再聊 (1)如果Opened_tables比Open_tables大很多,应该把my.cnf中的table_cache变大 (2)如果Key_reads太大,则应该把my.cnf中Key_buffer_size变大,