全方位分析web前端如何进行性能优化

标签：font   压缩   内核   浏览器渲染   tps   没有   span   而不是   exp   

前言：

最近刚刚完成项目，空闲一段时间，想起之前有被问起怎么对前端进行性能优化，自己也是脑中零零散散的总不成体系，现特来总结，欢迎补充指教。

1、整体资源

　　（1）js、css源码压缩

　　（2）css文件放到文档顶部，js 文件放到文档底部

　　　　因为浏览器渲染网页是自上而下的，用户第一眼见到的是页面，先加载页面相关的提高页面加载速度，另外避免js在页面没有完全加载完成操作DOM带来错误

　　（3）进行CDN托管（具体可参看https://div.io/topic/930）

　　（4）data缓存

2、css

（1）避免使用css expression (css 表达式) 

        微软在IE5时支持，IE8就不支持了，过老的内核，这个基本没有人会使用

 （2）使用CSS Sprites（图片精灵）

　　将图片合到一张大图，并且控制图片大小（在满足显示的情况下，过大图片可以进行质量压缩），目的减小体积，减小http访问次数

 （3）js中动态改变元素样式时，使用类名修改，而不是直接在DOM中更改css 属性，避免页面进行重构

3、image

    （1）大型web应用中,可以搭建图片服务器，存放图片以及视频资源（具体实施请自行百度）

4、js

（1）模块化编程，养成封装方法的习惯，提高代码的重复利用率

（2）减少闭包的使用频率，减少内存占用

目前想到的是以上，欢迎补充和指教！

全方位分析web前端如何进行性能优化

标签：font   压缩   内核   浏览器渲染   tps   没有   span   而不是   exp   

原文地址：https://www.cnblogs.com/nana-share/p/9051435.html