摘要:作为一个前端工作人员,我们不可避免要进行web的性能优化。那么有哪些优化的方法呢? A、常规项 1 、减少HTTP请求,在网页中图片、css、javascript、flash等等,都会增加我们的HTTP请求,减少请求数能提高WEB的页面响应时间; 2、导入的css和js文件的位置,css放在head部分,js放在body的尾部; 3、js
作为一个前端工作人员,我们不可避免要进行web的性能优化。那么有哪些优化的方法呢?
A、常规项
1 、减少HTTP请求,在网页中图片、css、javascript、flash等等,都会增加我们的HTTP请求,减少请求数能提高WEB的页面响应时间;
2、导入的css和js文件的位置,css放在head部分,js放在body的尾部;
3、js/css/html代码的压缩;
4、使用外部的 js/css,内联的css和js其实比外部文件反应更快,那为什么要用外部呢?因为使用外部的css和技术可以让浏览器缓存它,这样不仅HTML文档大小减少,而且不会增加HTTP请求数量。另外,外部的 js/css可以提高代码的重用性;
5、资源的延迟加载(懒加载);
$("img").lazyload
6、预加载;
7、缓存处理,使用localStorage。
B、CSS项
1、避免使用css表达式,因为它被重新极端的次数相当多;
2、避免使用@import ;
3、避免使用IE Filter;
4、避免使用后代选择器 ul>li ;
5、利用css继承机制;
6、避免使用通配符选择器;
7、使用多重选择器;
8、CSS Sprites技术
C、JavaScript项
1、使用临时变量(或数组)存放dom节点;
2、批量操作时,使用字符串拼接,用innerHTML开销更小,速度更快,同时内存也更安全;
3、减少dom访问,可以缓存已经访问过的元素,删除dom节点中不必要的节点(remove炽热的())和对象;
4、创建dom节点,在执行完 createElement 代码后,应该马上添加(append)到dom树中;
5、监听dom事件,监听父节点(事件冒泡)。
D、HTML项
1、避免使用iframe,因为它会导致页面的重绘;
2、减少节点数量;
3、避免重绘和回流,布局变化引起重绘,元素变化(内容、样式)导致回流;
E、资源项
1、图片
1-1、减少图片数量(CSS Sprites);
1-2、降低图片质量(减小图片大小);
1-3、选择适当的图片样式(jpg主要是摄影级照相类图像,gif主要是动画图片,png杜宇透明无损耗的小文件是不错的选择);
1-4、图片的转码Base64(src="data:image/jpg;base64,...");
2、避免使用flash,尽量用css3代替。
F、压缩工具
1、jsmin压缩代码,不会验证代码语法;
2、YUIcompressor 压缩时会验证语法,代码优化。
G、CDN(内容分发网络)
CDN的好处在于
1、不用担心自己网站访客,在任何时间、任何地点、任何网络运营商,都能快速打开网站;
2、各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少;
3、给网站直接带来的好处:流量、咨询量、客户量、成单量。
相关文章推荐
虚拟主机的专业参数,分别都是什么意思?2022-09-09
中非域名注册规则是怎样的?注册域名有什么用处? 2022-01-10
HostEase新年活动促销 美国/香港主机全场低至五折2021-12-28
HostGator下载完整备份教程分享2021-12-28
Flink中有界数据与无界数据的示例分析2021-12-28