前端性能优化的总结

时间 2019-12-04

标签前端性能优化总结栏目系统性能繁體版

原文原文链接

前端性能的总结记录：javascript

一、实现html的语义化　css

　　语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器能够理解.

　　语义化的(X)HTML文档有助于提高你的网站对访客的易用性，好比使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来讲，则有助于它们创建索引，并可能给予一个较高的权值。

　　通常来讲语义化的好处是为了搜索引擎，和适配阅读器，对于性能的优化效果不是特别明显。

二、css，js文件数量及大小的优化

　　要求css与js文件引入的时候须要进行压缩，有助于页面渲染前，下载速度的提高。每次页面加载都要想服务器发出请求，下载外联的文件，越小进入下一步的速度越快

三、css文件放在head中，js内联的文件放在body的最后位置

　　html页面的渲染操做是在body中开始的，至上而下逐步渲染，由于js文件常常会包含对于页面元素的改变。所以，页面对于js内容进行了所谓的阻塞处理，即加载js模块时，页面渲染中止，加载完以后再进行渲染。为了不阻塞，js模块放在body中的末尾位置，以防阻塞。外联的css与js文件要放在head中，这些内容会在渲染前下载。

四、使用外部javascript和CSS

　　外部的能够被缓存，多个页面能够调用

五、避免重定向

六、js的代码精简，规范化编写

七、图标能够用绘图来代替

　　多个图标能够放在一张图里，而后经过定位来获取相应的图标，避免重复的下载，屡次的http请求

1 <style>2 .icon{background: url("Icons.png") -112px -78px; width:32px;height: 35px; border: 0px;cursor: pointer;}3 </style>4 <body>5 <div class="icon"></div>6 </body>

上面的代码会选中图内的垃圾桶图标。html

待续