要成为一名合格的web前端工程师，web前端性能优化是必备的知识，前端包含的内容丰富，包括HTML、CSS、JS、图片等各种资源。因此，前端优化是复杂且必要的。接下来，我将在文章中介绍web前端性能优化在css方面应该如何进行呢？优化的目的优化的目的是为了让页面加载更快，更及时地响应用户操作，给用户带来更好的用户体验。对于开发者来说，优化可以减少页面请求次数，节省资源。css选择器代码优化使用原则(1)避免使用通配符。通配符意味着它们用于在加载页面时匹配所有元素。尽量避免使用通配符，增加页面负担。(2)避免使用标签选择器(3)尽量不要在选择器中定义多个层次，增加搜索负担高效选择css选择器在匹配过程中经历了哪些步骤？首先css选择器的匹配原则是从右到左，然后一步一步的向左匹配对应的元素。左边选择器越精准，匹配效率越高（1）合并相关CSS.box_div{margin-left:2px;margin-right:2px;margin-top:3px;margin-bottom:3px;}//改为.box_div{margin:3px2px;}（2）合并相同的css定义.one_centerb.bg_8{margin-right:5px;padding:2px5px2px5px;background:url(../img/bg_code02.gif)no-repeat;background-position:0px0px;}.one_centerb.bg_10{margin-right:5px;padding:2px5px2px5px;background:url(../img/bg_code02.gif)no-repeat;background-position:0px0px;}合并后：.one_centerb.bg_8，.one_centerb.bg_10{margin-right:5px;padding:2px5px2px5px;background:url(../img/bg_code02.gif)no-repeat;background-position:0px0px;}（3）定义简洁的css规则性能优化性能优化中有一个重要的指标，指的是页面的主要内容，这个指标影响用户看到页面的等待时间。CSS优化可以减少这个时间(1)CSS异步加载即将使用接收到的文件在页面的头部加载。其他模块的CSS可以在页面渲染后使用loadCSS和Preload异步加载。(2)压缩代码。使用代码压缩工具去除多余的空格和换行符。(3)减少阻塞加载，不使用importLoading，会影响CSS的加载速度。(4)动画效果优先使用过渡。与其他属性相交。Transfrom可以直接减少主线程的计算量。(5)图片延迟加载客户端向服务端发送的请求是有限制的（一般4-8，IE）如果页面请求较多，会导致页面需要很长时间才能加载加载。延迟加载可以缓解这个问题，通过实时监控页面的滑动位置，根据页面的位置请求资源(6)避免重绘，减少重新排列的元素出现，会触发页面重绘而浏览器对此进行了优化，但我们也应该尽量避免。使页面更流畅和重新排列会导致浏览器重新计算整个文档并重建渲染树，这将大大降低浏览器的渲染速度并避免重新排列。，要避免操作以下属性：width、height、padding、margin、display、float、position、top、left、bottom、font-size、overflow等。格式优化(1)去掉不必要的css(2)把样式表放在最上面(3)正确使用display属性(4)小心使用浮动(5)避免使用复杂的选择最好不要超过三个级别#css##############################################全新超实用性的Python零基础入门到就业体验课+视频+源码淘宝￥2购买已下架
转载请注明：http://www.aierlanlan.com/rzdk/6093.html
