提升网页性能
http://www.w3cplus.com/performance/10-ways-minimize-reflows-improve-performance.html
网页卡顿的调试方法
都可以啊,timeline 比较直接,一般先看这个。
profile,可以详细的看具体的调用信息。
页面只要不低于30帧 就都是流畅
一般到26都看不出来
flash 是多少帧?
gif一般8-12帧吧
大部分都用24帧……
帧率要求高的一般都是3d
转动视角 对帧率要求很高
Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条。
包括内容 、服务器 、 CSS 、 JavaScript 、Cookie 、图片 、移动应用 ,七部分。
一、内容部分
- 尽量减少 HTTP请求
- 减少 DNS查找
- 避免跳转
- 缓存 Ajxa
- 推迟加载
- 提前加载
- 减少 DOM元素数量
- 用域名划分页面内容
- 使 frame数量最少
- 避免 404错误
二、服务器部分
- 使用内容分发网络
- 为文件头指定Expires或Cache-Control
- gzip压缩文件内容
- 配置ETag
- 尽早刷新输出缓冲
- 使用GET来完成AJAX请求
- 避免空的图像来
三、CSS部分
- 把样式表置于顶部
- 避免使用CSS表达式(Expression)
- 用<link>代替@import
- 避免使用滤镜
四、 JavaScript部分
- 把脚本置于页面底部
- 使用外部JavaScript和CSS
- 削减JavaScript和CSS
- 剔除重复脚本
- 减少DOM访问
- 开发智能事件处理程序
五、Coockie部分
- 减小Cookie体积
- 对于页面内容使用无coockie域名
六、Image 部分
- 优化图像
- 优化CSS Spirite
- 不要在HTML中缩放图像
- favicon.ico要小而且可缓存
七、 Mobile部分
- 保持单个内容小于25K
- 打包组件成复合文本
https://segmentfault.com/a/1190000004139275
代码级优化
关于图片
- 页面内的大图,特别是banner图,登录页背景图等,使用第三方的cdn加速。同时做一遍压缩,如果压缩之后还超过200kb,则和设计师沟通是否取消或者更换图片。
- 精灵图必备,各种小图标,小icon,做到一张图片里面去。
- 尽量使用icon font代替小图标,icon font的优点可以甩普通的icon图标几条街,随意调整大小,改变颜色,太cool!!
- 如果项目很大,公司不差钱,最佳方案是把图片资源放在单独的服务器上,配置独立的域名,图片资源的加载由图片域名加载,很多大公司的静态资源都是由独立的服务器来存放和分发的
我一般和设计师讨价还价的底线就是图片必须加载流畅,如果用户打开网页图片加载半天出不来,就算我们的图片做的再漂亮,又有什么卵用!
关于js
- 第三方的js库,必须使用min版。站点内部的lib,每次发布上线之前必须使用gulp压缩合并。
- 移动端使用zepto库,不允许使用jquery
- 给js代码一个全局命名空间,举个例子,我们的项目是某个自行车官网,全局命名空间就叫bike,和本项目有关的所有js方法,函数,变量,全部挂在bike的下面
var bike={};
bike.name=‘cookee‘;
bike.getOrderDetail=functtion(id){.....}
关于css
- 提炼项目的公共样式,按钮、表单。
- 命名。面向属性命名,通用模块可以面向模块命名,比如头部header,尾部footer等,其他请尽量使用面向属性的命名方式,这样可以给css最大程度的复用自由,关于什么是面向属性的命名方式,请参考推荐
- 样式分离再分离,在css里面不要使用id属性,留着id给js使用
- 减少css的层级嵌套,由于css的渲染是从右向左的,关于网页的渲染,这个细说起来又可以写一篇文章了。如果你的层级标签嵌套多层,想想要浪费多少渲染时间,对于移动端毫秒必争的加载时间,你还有什么理由不改进你的代码
- 优雅的名字可以让人一目了然,放一张前人总结的图,没事的时候多看看,潜移默化的记住这些名字
关于html
- 精简dom结构,减少冗余html
- 语义化标签,要学会用
- 移动端,使用svg绘图代替canvas绘图,canvas会有严重的锯齿(如果有同学有实践过的解决锯齿的方案,我愿恭听)
时间: 2024-11-08 15:57:28