页面优化有哪些?

时间:2021-07-30 10:07:54 类型:web前端
字号:    

一、常规优化

javascript 外联文件引用放在 html 文档底部

css 外联文件引用在 html 文档头部

http 静态资源尽量用多个子域名:充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力

服务器端提供 html 文档和 http 静态资源时,尽量开启 gzip 压缩

尽量减少 HTTP Requests 的数量

js/css 的 minify

大量使用 CSS Sprites:这样做可以大大地减少CSS背景图片的HTTP请求次数;

首屏不需要展示的较大尺寸图片,请使用 LazyLoad

避免404错误:请求一个外联 js 失败时获得的404错误,不但会堵塞并行的下载,而且浏览器会尝试分析404响应的内容,来辨识它是否是有用的Javascript代码;

减少 cookies 的大小:尽量减少 cookies 的体积对减少用户获得响应的时间十分重要;

去除不必要的 cookie ;

尽量减少 cookie 的大小;

留心将 cookie 设置在适当的域名下,避免影响到其他网站;

设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快地删除 cookie,从而减少响应时间。

避免使用 javascript 来定位布局

图片压缩优化

不要使用frameset,少使用iframe: 搜索引擎不友好、 即使内容为空,加载也需要时间、会阻止页面加载。禁止使用iframe引入外部资源,不包括allyes广告,不包括about:blank的空页面。

二、中高级优化

combo handler 的引入:

通过combo handler模块,来合并相同URL下的Javascript和CSS文件,从而减少文件请求数

我们移动端首页就做了优化


http://res.suning.cn/project/mvs/RES/common/script/??module/iscroll-lite/5.1.3/iscroll-lite.js,module/alertBox/2.0.0/alertBox.js,module/swipe/1.1.0/swipe.js


引入script元素做延迟解析异步渲染,如在移动端应用广泛的artemplate


添加Expire或Cache-Control:应用于不经常变化的组件,包括脚本、样式表、Flash组件、图片


避免重定向:在重定向完毕并且HTML下载完毕之前,是没有任何东西显示给用户的


js代码优化


代码逻辑分层

避免全局变量

便于多人协作开发

各部分代码模块化,可以按需加载

保持全局变量的清洁

可进行单元测试

减少 DOM Elements 的数量:针对一个展现元素,尽量减少其包含的DOM结点


三、移动端页面优化

移动页面的速度跟三个因素有关,分别是:移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身。

因此移动页面优化尤其特殊性。除了以上的处理方式,还有一些优化手段


预加载


显性加载

参考天猫首页,在页面加载完毕之前,有一个缓冲的动画过程。它一方面能增加页面的趣味性,另一方面能让后续页面体验更流畅


隐性加载 :主要是图片的懒加载

按需加载


能用css3实现的效果就不要用图片


使用icon-font代替图片


尽量避免DataURI


DataURI要比简单的外链资源慢6倍,生成的代码文件相对图片文件体积没有减少反而增大,而且浏览器在对这种base64解码过程中需要消耗内存和cpu,这个在移动端坏处特别明显。


点击事件优化


在移动端请适当使用touchstart,touchend,touch等事件代替延迟比较大的click事件。


使用成熟的前端手势库


动画优化


尽量使用css3动画

适当使用canvas动画

合理使用requestAnimationFrame (android版本4.3以上)

高频事件优化


类似touchmove,scroll这类的事件可导致多次渲染,对于这种事件可以通过以下手段进行优化:


使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染

增加响应变化的时间间隔,减少重绘次数:移动端的搜索结果页的lazyload插件就是这么干的


<