本文主要介绍css前端优化有哪些关键问题(css前端优化有哪些关键问题)？，下面一起看看css前端优化有哪些关键问题(css前端优化有哪些关键问题)？相关资讯。
说到网站的高性能，很多人会想到页面的加载时间，但其实性能不仅仅是加载时间，还有浏览器性能、网络性能、开发效率。性能很重要。在网络前端的第一个开发考虑中，会介绍一些开发原则和性能指标，这些都是基于提高web前端的性能。1。开发原则1.1编写符合当代浏览器性能的代码。想要提高前端性能，就必须了解浏览器的工作原理，哪怕是一个大概的概念，这样才能知道性能瓶颈以及如何优化。下图显示了webkit浏览器向用户处理页面的代码(html css)。为什么浏览器第一次下载页面的html内容？首先，html被解析成dom树，然后html包含所有其他资源文件(样式、脚本、图片)来显示网页。然后将dom和css样式表(包括自定义浏览器的默认)结合起来形成渲染树。浏览器根据这个渲染树开始绘制屏幕。要提高浏览器性能，可以开始减少组件数量，用html重绘。前者很好理解。唐 不要滥用html标签，而要使用最小但必要的html语义布局。后者在提高性能方面更有效。元完成后，动态变化的dom结构或css样式使浏览器重绘，重绘的性能损失直接取决于动态范围。比如一个单元或者一个新元素的位置变化，会引起大量的重绘，因为影响到兄弟等所有元素；动态添加一个链表而不是一个，李说，因为每多加一次都会导致重绘，但是所有的条目都是在一起然后添加的。此外，一些简化的重绘还指定了img元素的宽度、表格的布局、标题中设置的标签的属性的定义等等。一般来说，深度dom树中元素的变化对其他节点影响不大；如果要倍增dom，尽量把它合并成一个完整的，各种各样的样式，比如修改dom元素，不要重复各种element.style的下一个任务，但是会改变一个css类中的各种编写样式和该类的dom元素。1.2用css布局和处理边界浏览器来渲染页面，其实就是画一系列的盒子，盒子是可以嵌套的。在使用css布局的时候，要注意语义，把元素包装在盒子里，而不是把一些元素放在盒子里。如下图，我们需要使用css来实现这个简单的两列布局。it 最好创建一个填充的左列和右列，并找到左列图标left: 0，这样我们就可以有一个包含所有内容的框。这是边距左左和右列的错误设置，列图标肯定位于左侧:-50px。这个方法图标在盒子外面，但是它也定义了一个负的。坐标，既符合语义(框外包含的元素)，又协调了代码的负面意义，这样的布局可能是老浏览器的问题。css的写作风格也要考虑模块化和可重用性。如果你写的代码是独立的，它是可重用的。另外，从css类中经常可以看到，我的经验是尽可能用样式元素给css类添加样式，而不是用功能元素的名字，比如一个邮件按钮。按钮确认than.btn-send-mail，前者可以确认任何按钮操作(当然这个. btn-send-mail类可以用于js事件绑定，只要不绑定任何样式)。1.3逐步增强逐步增强是先兼容所有浏览器的基础设计，然后改进渐进式浏览器的风格或功能。比如在设置渐变背景色的时候，可以先定义背景色属性(退化方法)，再设置其他线性渐变属性，这样可以保证浏览器在同样可以显示背景色的情况下，不支持css3。强烈建议不要通过判断一个功能来判断浏览器类型或版本号，建议通过特征检测、特征检测、第三方库modernizr来判断。2。性能标准前端开发者不仅要为用户提供最好的界面体验，还要关心页面加载时间。2010年4月，谷歌将页面加载速度纳入搜索的排名因素。大量研究数据表明，用户流量与加载速度之间存在正相关关系，因此优化页面加载速度非常重要。2.1.减少http请求的http请求数量是前端最明显的性能效果。现代很多浏览器都支持四个并行连接，了解浏览器的并行机制，将资源文件分配给不同的域名，并发使用浏览器，提高加载效率。就是加载一个比大量小文件更小更大的文件，所以网站要尽量合并css和js文件。此外，使用图片向导(css sprite，俗称向导图)可以将小图片和多个图标缩减为一个大图片，可以减少http请求的图片数量。2.2使用cdn加速:如果有能力，可以通过放置静态资源文件，如图片、字体、js库等，大大提高访问速度。，在cdn里。2.3避免空src和href属性值:空src img元素由js动态分配，导致浏览器启动无用的http请求。类似地，点击标签 的空链接也会导致浏览器发起http请求，通常是重新加载当前页面，这就是为什么许多初学者可以 我找不到错误。2.4.增加到期日:静态资源文件应该添加到到期日。到期日期必须设置得很远。基本上可以假设永远不会过期，所以浏览器会缓存静态文件。但是，为了防止用户更新最新的文件，最好将版本控制添加到。在文件名2.5启用gzip压缩:在服务器上启用gzip压缩可以减少平均70%的文本文件传输流量。2.6将css javascript放在后面:浏览器会分析html渲染元素的同时，确保第一个元素渲染部分在css之前是正确的，将css放在后面会导致很多浏览器脚本标签被重画。最后因为浏览器会对js文件进行预处理，所以放js文件的头会延迟页面元素的渲染，让用户感觉网页会变慢。2.7避免使用css表达式:css表达式只支持ie5、ie6、ie7中的css表达式，这不仅远远超出了正常，而且严重影响了页面的渲染效率mdash；mdash只要一个滚动的页面，甚至当你移动鼠标，表达了计算，这是不必要的。2.8、删除不用的css语句。有可能在实际项目中，common.css可以让每一页都被引用来说明这些常见的样式。我们应该充分利用这份公开文件。2.9 javascript和css的代码压缩:压缩代码可以显著节省带宽，提高加载速度。部署到代码时，最好使用工具压缩代码。
了解更多css前端优化有哪些关键问题(css前端优化有哪些关键问题)？相关内容请关注本站点。