这是一个创建于 2893 天前的主题，其中的信息可能已经有所发展或是发生改变。
规则 1 ，把 css 放在 head 中加载，这个能让页面更早的开始渲染，同时能够避免把 css 放在页面尾部，因为可能会出现闪屏，就是如果 css 加载的很慢， DOM 结构先出来， css 后出来，然后页面样式突然发生变化，这就叫做闪屏，最后能包含关键渲染路径的样式：首屏
规则 2 ，把 js 放在 body 末尾加载，因为 js 它本身会阻塞 HTML 的解析以及 css 的渲染。
规则 3 ，不要使用 css 的表达式， css 的表达式一方面是兼容性问题，虽然看起来比较强大，但是实际性能开销很大，因为它实际的执行频率是远远超出预期的，如果使用了 css 的表达式，可能导致页面卡顿。
规则 4 ，就是用外链的方式引用 css 和 js ，可以有效的减少 HTML 的体积，并且外链了之后， css 和 js 作为静态资源可以给他设置合适的缓存的响应头，能够合理的利用浏览器的缓存。
规则 5 ，压缩 js 和 css ，在生产环境里面可以删除这一类文件不必要的注释、空白，并且对 js 进行变量名压缩，混淆压缩，对 css 进行属性的合并，然后选择符的合并。
规则 6 ，不重复加载 js ，因为在 IE 里面，还是会多个请求，不能发挥缓存优势，并且你重复加载 js ，意味着要更长的 js 执行时间。
规则 7 ，让 Ajax 请求可缓存， GZIP 、内容压缩都可以适用。
规则 8 ，用 GET 方式发起 Ajax 请求，因为 GET 方式可以缓存，如果是获取信息的，那么 GET 方式是更语义化的。
规则 9 ，是组件延迟加载，保障页面的关键的静态资源优先加载，因为并发数限制，还有一些延迟加载的典型手段叫做“ lazyload ”。
规则 10 ，减少 DOM 节点数，那么 DOM 节点这个规则是非常容易理解，就是如果你的 DOM 结构非常的复杂，那么浏览器在解析的时候，进行布局、渲染时计算量更大，那么少一点的话，浏览器的开销会少一些，渲染布局的速度就会快一些。
规则 11 ，是避免在页面中使用 iframe ，因为 iframe 它会阻塞父文档的 onload ，即使它是一个空白的也会比较耗时。
规则 12 ，要减少 COOKIE 的体积，因为 COOKIE 在每一次请求，就是跟主文档相关的，只要是同域的， COOKIE 的全部内容都可以带上。
规则 13 ，使用无 cookie 域名加载静态资源，可以减少静态资源加载时的网络传输量，静态资源加载通常是不需要 cookie 的，阿里在精简 cookie 后，每年节省的流量 TB 记。
规则 14 ，是减少 js 中的 DOM 访问，这个有一些常见的优化手段，就是对于你查找到的元素，缓存在 js 的变量中，后面就不需要在去查找 DOM 树了，还有节点增加是合理利用 documentfragment ，然后在把 documentfragment 放在实际的 DOM 树里面，然后还有一个建议是不要用 js 去频繁修改样式。
规则 15 ，使用更只能的事件监听机制，基于事件冒泡的委托机制，你可以有效减少绑定的数量。
规则 16 ，就是你要学会使用常见的图片优化手段，因为对于代码来说，图片的体积很大，常用的图片压缩工具有“ PNGCrush ”“ JPEGTRAN ”“ PNGQUANT ”， JPG 图片的就常用的渐进式编。
规则 17 ，就是不要在 HTML 中缩放图片，你实际上在页面上用到多大图片，那你就提供适当尺寸即可，不然它只会徒增渲染的开销。
规则 18 ，就是不要把图片 SRC 置空，因为在主文档的浏览器里面都会引发额外的请求。
规则 19 ，任何资源尽量在 25k 以内，因为 iPhone 无法缓存 25k 以上的资源。
目前尚无回复
Select Language