内容简介：1．把 CSS 资源引用放到 HTML 文件顶部一般推荐将所有 CSS 资源尽早指定在 HTML 文档 <head> 中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。2．CSS 动画使用 translate、scale 代替 top、height
CSS优化
1．把 CSS 资源引用放到 HTML 文件顶部
一般推荐将所有 CSS 资源尽早指定在 HTML 文档 <head> 中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。
2．CSS 动画使用 translate、scale 代替 top、height
尽量使用 CSS3 的 translate、scale 属性代替 top、left 和 height、width，避免大量的重排计算
图片优化
1．图片压缩处理在移动端，通常要保证页面中一切用到的图片都是经过压缩优化处理的，而不是以原图的形式直接使用的，因为那样很消耗流量，而且加载时间更长。
2．使用较小的图片，合理使用 base64 内嵌图片
在页面使用的背景图片不多且较小的情况下，可以将图片转化成 base64 编码嵌入到 HTML 页面或 CSS 文件中，这样可以减少页面的 HTTP 请求数。需要注意的是，要保证图片较小，一般图片大小超过 2KB 就不推荐使用 base64 嵌入显示了。
3．尽量预先设定图片等大小在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排
4．雪碧图
优化原理来于web优化中的减少http请求数量，通过减少页面图片的数量来实现。
5．图片延时加载
脚本优化
1．JavaScript 资源引用放到 HTML 文件底部
JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。
2．DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
3．压缩JavaScript
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
