好的APP开发公司都是怎样解决CSS优化问题的?深圳APP开发公司提醒首先避免在HTML标签中写Style属性CSS(CascadingStyleSheets)即级联样式表。在实际应用中APP开发公司提醒各位可以通过以下3种方式在HTML页面中引入CSS代码。
(1)内联式
内联式是在HTML标签的style属性中定义样式代码,即把代码直接添加于所修饰的标记元素。示例代码如下:
01 < div style=" font- family: Arial, Helvetica, sans- serif;"> 这是 内联 式样 式 代码 </ div>
这样做虽然更为直观,但很大程度上加大了HTML页面体积,不符合结构与表现分离的设计思想。
(2)嵌入式在页面中使用<style>标签将样式定义为内部块对象。示例代码如下:
02 < style type=" text/ css"> 03 body{ 04 font- family: Arial, Helvetica, sans- serif; 05 } 06 </ style>
内联CSS可以有效减少HTTP请求,提升页面性能,缓解服务器压力。由于浏览器加载完CSS才能渲染页面,因此能防止CSS文件无法读取而造成页面毫无样式的现象。
(3)引用外部文件
外联式样式表中,CSS代码作为文件单独存放,例如使用style.css文件存放所有样式。在HTML中的使用<link>标签,定义<link>标签的href属性来引用CSS文件。示例代码如下:
01 < link rel=" stylesheet" href=" style. css" type=" text/ css"/>
虽然内联式和嵌入式减少了HTTP请求数,但是实际上却增加了HTML文档的体积。不过,当页面中的CSS或者JavaScript代码足够少,反而是开启一个HTTP请求的花费要更大时,采用这两种方式却是有用的。
因此,需要在实际的项目中测试评估这种方式是否真的提升了速度。同时也要考虑到该页面的目标和它的受众:如果所期望用户只会访问该页面一次,例如对一些临时活动来说决不会期望有回访客出现,那么使用内联式/嵌入式代码能够帮助减少HTTP请求数。
但是通常情况下,由于在HTML标签中直接使用style属性将增大HTML文档的体积,并且HTML文档下载完成后,行内样式会触发一次额外的回流事件,影响页面性能,而且不利于后期维护,因此不建议采用该方法来实现样式。好了,APP开发公司本文关于“好的APP开发公司都是怎样解决CSS优化问题的?”的相关APP制作开发经验就分享到这里,谢谢关注,博纳网络编辑整理。