如题所述
您好，你的问题，我之前好像也遇到过，以下是我原来的解决思路和方法，希望能帮助到你，若有错误，还望见谅！
1、将CSS写在网页头部。CSS文件放到文档头部(及外部调用文件)会让网页加载更快，因为它们是可以被缓存的。引用外部样式也可以让页面逐渐加载。 如果把样式表放到文件里面或者文件尾部它会阻止页面元素的逐渐显示，并且还会导致页面内容以没有样式的形式显示出来，待完全加载样式后，页面重绘，影响用户体验。
2、尽量避免在HTML标签中写Style属性。CSS (Cascading Style Sheets) 通常存储在样式表中，使用外部样式表是为了解决内容与表现分离的问题，从而极大提高工作效率，减少代码冗余。
3、避免CSS表达式。CSS Expression (CSS 表达式)，是一种使用动态设置 CSS 属性的方式。其实 CSS 表达式非常强大，我们可以使用 它实现 min-width 属性以及隔行换色，模拟伪类等等;在你改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能产生严重的影响。所以为了网页速度和浏览器负担，尽可能避免css表达式。
4、移除空的CSS规则。空的css规则指的是该规则不包含任何属性，如：.clear{}。空的CSS规则增加了CSS文件的大小，而且会影响CSS树的执行，所以需清除空的CSS规则。
5、正确使用Display的属性。CSS display属性基本上有inline，block，和none三个属性值。inline将他所定义的元素显示为行元素。如strong，input，span默认元素为行元素。block元素是块级元素，会使前后元素产生换行效果。hn和p元素默认情况为块级元素。none，意思是不显示元素。
除了以上的Display基本属性，腾讯总结了以下的一些合理使用的规则。
a) display：inline后不应该再使用width、height、margin、padding以及float
b) display：inline-block后不应该再使用float
c) display：block后不应该再使用vertical-align
d) display：table-*后不应该再使用margin或者float
6、不滥用Float。Float浮动在实际应用种是非常广泛，但由于Float在渲染的时候计算量比较大，对终端浏览器增加不必要的负担，所以在一些不应该使用float的地方尽量减少使用。如：无序链接替代无序列表。当可以使用a标签进行排列时，就不要使用无序列表。A标签是行元素，他会自动的横向排列。Li为块级元素，要想横向显示，必须配合float。也可以设定li标签display：inline，将块级变为行级达到页面所要的效果。这样会使代码更简洁。
7、不滥用Web字体。在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体，但浏览器遇到本机没有的字体时会进行网络下载，解析，重绘当前页面。所以多数情况下，考虑各个因素的影响我们还是应该尽量充分利用这些系统默认web安全字体实现CSS的编写。
8、不声明过多的Font-size。元素的font-size属性会自动继承它父级元素的font-size属性值，除非你重新定义覆盖它。一般来说，大多数情况下使用em或者%，这样在响应式显示时字体就能被更精细比例的字号支持。本人建议使用百分比或em来定义font-size大小，在兼容浏览器时也会得到很好的支持。所以尽量合理的定义字体大小，以便于在页面放缩的时候仍然保持良好的可读性，提高css效率。
9、值为0时不需要任何单位。0 是最好的兼容策略，0 以不变应万变。为了浏览器的兼容性和性能，值为0时不要带单位。
10、标准化各种浏览器前缀。浏览器前缀为-webkit(Chrome/Safari)，-moz(Firefox)，-ms(IE)，-o(Opera，现在该浏览器改用blink内核，已经淘汰)。在CSS属性尚未完全成为W3C标准，我们会使用浏览器前缀。在使用时，应该先将所有私有的CSS3属性写在前面，最后再写标准的CSS3属性。使用css动画时，只使用-webkit和无前缀两种即可。我们期待所有css属性都成为标准，并且被Firefox、Chrome等所有浏览器的最新版兼容，那时就没有必要使用浏览器前缀了。
11、避免让选择符看起来像正则表达式。高级选择器，是区别于常见选择器的概念，是CSS的高级运用，也是作为扩展。在使用的时候，注意有些选择器会优先于其他选择器，有时后面的选择器也会覆盖前面的样式。虽然使用高级选择器可以大幅度的提高开发书写或修改样式表时的工作效率。但在响应式布局时，考虑到更多终端的性能应尽可能的避免看起来比较复杂的高级选择器，因为高级选择器执行耗时长且不易读懂，避免使用。非常感谢您的耐心观看，如有帮助请采纳，祝生活愉快！谢谢！
1、将CSS写在网页头部。CSS文件放到文档头部(及外部调用文件)会让网页加载更快，因为它们是可以被缓存的。引用外部样式也可以让页面逐渐加载。 如果把样式表放到文件里面或者文件尾部它会阻止页面元素的逐渐显示，并且还会导致页面内容以没有样式的形式显示出来，待完全加载样式后，页面重绘，影响用户体验。
2、尽量避免在HTML标签中写Style属性。CSS (Cascading Style Sheets) 通常存储在样式表中，使用外部样式表是为了解决内容与表现分离的问题，从而极大提高工作效率，减少代码冗余。
3、避免CSS表达式。CSS Expression (CSS 表达式)，是一种使用动态设置 CSS 属性的方式。其实 CSS 表达式非常强大，我们可以使用 它实现 min-width 属性以及隔行换色，模拟伪类等等;在你改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能产生严重的影响。所以为了网页速度和浏览器负担，尽可能避免css表达式。
4、移除空的CSS规则。空的css规则指的是该规则不包含任何属性，如：.clear{}。空的CSS规则增加了CSS文件的大小，而且会影响CSS树的执行，所以需清除空的CSS规则。
5、正确使用Display的属性。CSS display属性基本上有inline，block，和none三个属性值。inline将他所定义的元素显示为行元素。如strong，input，span默认元素为行元素。block元素是块级元素，会使前后元素产生换行效果。hn和p元素默认情况为块级元素。none，意思是不显示元素。
除了以上的Display基本属性，腾讯总结了以下的一些合理使用的规则。
a) display：inline后不应该再使用width、height、margin、padding以及float
b) display：inline-block后不应该再使用float
c) display：block后不应该再使用vertical-align
d) display：table-*后不应该再使用margin或者float
6、不滥用Float。Float浮动在实际应用种是非常广泛，但由于Float在渲染的时候计算量比较大，对终端浏览器增加不必要的负担，所以在一些不应该使用float的地方尽量减少使用。如：无序链接替代无序列表。当可以使用a标签进行排列时，就不要使用无序列表。A标签是行元素，他会自动的横向排列。Li为块级元素，要想横向显示，必须配合float。也可以设定li标签display：inline，将块级变为行级达到页面所要的效果。这样会使代码更简洁。
7、不滥用Web字体。在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体，但浏览器遇到本机没有的字体时会进行网络下载，解析，重绘当前页面。所以多数情况下，考虑各个因素的影响我们还是应该尽量充分利用这些系统默认web安全字体实现CSS的编写。
8、不声明过多的Font-size。元素的font-size属性会自动继承它父级元素的font-size属性值，除非你重新定义覆盖它。一般来说，大多数情况下使用em或者%，这样在响应式显示时字体就能被更精细比例的字号支持。本人建议使用百分比或em来定义font-size大小，在兼容浏览器时也会得到很好的支持。所以尽量合理的定义字体大小，以便于在页面放缩的时候仍然保持良好的可读性，提高css效率。
9、值为0时不需要任何单位。0 是最好的兼容策略，0 以不变应万变。为了浏览器的兼容性和性能，值为0时不要带单位。
10、标准化各种浏览器前缀。浏览器前缀为-webkit(Chrome/Safari)，-moz(Firefox)，-ms(IE)，-o(Opera，现在该浏览器改用blink内核，已经淘汰)。在CSS属性尚未完全成为W3C标准，我们会使用浏览器前缀。在使用时，应该先将所有私有的CSS3属性写在前面，最后再写标准的CSS3属性。使用css动画时，只使用-webkit和无前缀两种即可。我们期待所有css属性都成为标准，并且被Firefox、Chrome等所有浏览器的最新版兼容，那时就没有必要使用浏览器前缀了。
11、避免让选择符看起来像正则表达式。高级选择器，是区别于常见选择器的概念，是CSS的高级运用，也是作为扩展。在使用的时候，注意有些选择器会优先于其他选择器，有时后面的选择器也会覆盖前面的样式。虽然使用高级选择器可以大幅度的提高开发书写或修改样式表时的工作效率。但在响应式布局时，考虑到更多终端的性能应尽可能的避免看起来比较复杂的高级选择器，因为高级选择器执行耗时长且不易读懂，避免使用。非常感谢您的耐心观看，如有帮助请采纳，祝生活愉快！谢谢！
温馨提示：答案为网友推荐，仅供参考
第1个回答 2020-11-11
从可视化开发工具的角度回答一下，thingJS是基于可视化组件完成3D场景搭建，并提供api能力进行3D开发。除了园区场景搭建是在客户端完成（CampusBuilder是SAAS组合工具），二次开发调试是基于webgl的3D库完成的（ThingJS在线开发平台），也就是左边是前端代码逻辑，右边是3D可视化编辑器，以便随时调整3D开发效果。
第2个回答 2020-11-12
网页设计一般是交互设计和视觉设计, 负责将商业需求转化为 Web 解决方案, 最终产物是交互稿和视觉稿, 分别用于说明网页的外观和 actions. 高级一点的还会给出标准配色表，风格设计指南（内含一般性风格设计规格：设计理念，留白间距，按钮样式，使用场景）等附件。大公司一般还有交互设计师，主要关注人机界面的易用性和用户友好性。
前端开发则是通过交互稿, 视觉稿, 将网页设计和互动设计的方案转换为可工作的Html + Css + js文件, 最终产物是 HTML Demo, 包括 HTML, CSS, JavaScript 代码。
前端开发内容包括：UI设计，axure交互文档，静态页面制作，css3 动画和jq动画。最终提供的成品文件包括：img、css、js、html、icon、font。至于与后台程序结合的工作则可以不负责。
前端开发则是通过交互稿, 视觉稿, 将网页设计和互动设计的方案转换为可工作的Html + Css + js文件, 最终产物是 HTML Demo, 包括 HTML, CSS, JavaScript 代码。
前端开发内容包括：UI设计，axure交互文档，静态页面制作，css3 动画和jq动画。最终提供的成品文件包括：img、css、js、html、icon、font。至于与后台程序结合的工作则可以不负责。
