Skip to content

Instantly share code, notes, and snippets.

@markyun

markyun/gist:7956209

Last active June 26, 2018 02:30
Show Gist options
  • Save markyun/7956209 to your computer and use it in GitHub Desktop.
Save markyun/7956209 to your computer and use it in GitHub Desktop.
Download ZIP
页面性能优化、 Javascript性能优化
Raw
gistfile1.txt
document.getElementsByTagName('*').length 可以查看DOM元素的数量
前端开发的出品建议：
1、页面能够通过http://validator.w3.org的验证，当然css希望也能通过http://jigsaw.w3.org/css-validator/validator难证，不过有时候由于需要兼容多浏览器，会受到hack的影响，css不做强制要求。
2、静态页面应该能够通过yslow2.0的classic（V1）级别的检测，检测的结果我觉得应该得到A。
3、背景图片保证不超过3个以上，css文件不超过2个，js文件不超过3个。而且良好的遵守web标准的一些规定，css放到head中，js文件放到</body>之前或者之后。
4、页面进行裸体检查。其实就是来检验结构语义化是否有效果。
裸体检查：就是将css和js都去掉，查看html，看这些内容否能够看懂。
5、检测h标签是否断层。
6、建议body中增加text-align:center。
7、当然还有很多，比如什么id，class的命名呀，这些东西，我觉得应该是团队中应该做的事情。
8、作为大型网站来说，首页使用内联式样式表，这样可以减少http请求数的同时，也可以防止裸奔。当然其他页面需要使用外联样式表，这样才可以方便维护。因为作为大型网站来说，他的首页访问量是非常的大的，所以。。
把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式（Expression）
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档 <head /> 内加载样式表。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片：
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
@markyun
Copy link
Author

markyun commented Dec 29, 2013

加载部分的优化，总结起来主要有以下几点：

带宽
使用CDN
压缩js、css，图片优化
HTTP优化
减少转向
减少请求数
缓存
尽早Flush
使用gzip
减少cookie
使用GET
DNS优化
减少域名解析时间
增多域名提高并发
JavaScript
放页面底部
defer/async
CSS
放页面头部
避免@import
其它
预加载

@markyun
Copy link
Author

markyun commented Dec 30, 2013

变量查找优化
变量声明带上var
慎用全局变量
缓存重复使用的全局变量
避免使用with
核心语法优化
通过原型优化方法定义
避开闭包陷阱
避免使用属性访问方法
避免在循环中使用try-catch
使用for代替for…in…遍历数组
使用原始操作代替方法调用
传递方法取代方法字符串
脚本装载优化
使用工具精简脚本
启用Gzip压缩
设置Cache-Control和Expires头
异步加载脚本
DOM操作优化
减少DOM元素数量
优化CSS样式转换
优化节点添加
优化节点修改
减少使用元素位置操作
避免遍历大量元素
事件优化
使用事件代理
动画优化
设置动画元素为absolute或fixed
使用一个timer完成多个元素动画

http://www.cnblogs.com/developersupport/p/JavaScript-Performance.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment