网站首页 » 前端开发 » 前端工具 » 前端面页性能优化
上一篇:
下一篇:

前端面页性能优化

表单性能优化

HTML 代码
<form id="my-form" action="">
    <input type="text" name="name">
    <input type="password" name="password">
</form>
<input id="btn" type="button" value="获取表单数据"/>
JavaScript 代码
var myForm = document.getElementById("my-form");
var name,password;
btn.onclick = function(){
    name = myForm["name"].value;
    password = myForm["password"].value;
    console.log(name,password);
}

通过 form 表单元素的数据,就不需要获取每一个 input 元素了,即 DOM 操作减少,如果这样的 input 很多的时间你就得操作很多次。

CSS 内联

如果样式不是很多的话,可以考虑把样式内联到 html 中,这样做对于首次加载页面是很有帮助的,而不是去单独请求一个样式文件,但这样做也有一个很明显的缺点,那就是样式无法缓存。所以 全部或者部分 CSS 样式要不要内联,还得根据实际情况来定。

图片加载

在CSS 样式中我们尽量少用 base64,而是通过图片 url 来引入。第一,转化成 base64 很有可能会比原来的图片大,第二,base64 相当于把图片大小附加到了样式文件中,严重影响了样式表的大小。

当我们需要通过 媒体查询来动态决定应该显示大图或者小图时,也是同样的道理,最好是用 url 来引入图片,也不应该把大小图做成雪碧图即使只是一个两个很小的 icon。

对于图片,还有一个常见优化图片懒加载。

持续更新……

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/front-end-web-page-optimization/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END