html修改原生checkbox选中的颜色_[三分钟小文]前端性能优化-HTML、CSS、JS部分

阅读本文您将收获：

性能优化的整体思路
在HTML、CSS、JavaScript层级的性能优化

为什么要进行性能优化

用户: 提升用户体验，改善页面性能
开发者: 体现公司意志和开发人员技能

性能优化的总体方向

高效：合理安排资源
快速：减少等待时间
标准：
- 首次有效绘制（First Meaningful Paint，简称FMP，当主要内容呈现在页面上）
- 英雄渲染时间（Hero Rendering Times，度量用户体验的新指标，当用户最关心的内容渲染完成）
- 可交互时间（Time to Interactive，简称TTI，指页面布局已经稳定，关键的页面字体是可见的，并且主进程可用于处理用户输入，基本上用户可以点击UI并与其交互）
- 输入响应（Input responsiveness，界面响应用户输入所需的时间）
- 感知速度指数（Perceptual Speed Index，简称PSI，测量页面在加载过程中视觉上的变化速度，分数越低越好）

优化方向

HTML/CSS优化

能用html/css解决的问题就不要用js
- 更快的开发速度，更小的维护成本
- 适用场景

//导航高亮
nav li {opacity: 0.5;
}
nav li:hover {opacity: 1;
}

//鼠标悬停显示模块
.menu {display: none;
}
.nav:hover + .menu {display: inline-block;
}
.menu:before {content: '';position: absolute;top: -20px;left: 0px;width: 100%;height: 20px;
}

自定义radio/checkbox样式

input[type=checkbox]{}
input[type=checkbox]:checked{}

巧用css伪类，合理使用原生选择器，如：:focus、@media、input[type=email]:invalid
使用sass、scss等预编译器

优化HTML标签

文字<p><h1>减少css代码
表单<form>
列表<ol><ul>
图片<img><picture>
链接<a><button>
根据情况使用input type值
使用HTML5语义化标签

//一个语义化的网页布局
<nav></nav>
<header></header>
<main><section></section><section></section>
</main>
<footer></footer>

不滥用高消耗的样式
- box-shadow、border-radius、float需要浏览器进行大量的计算，应减少使用
选择器合并
- 把有共同的属性内容的一系列选择器组合到一起，能压缩空间和资源开销
0值去单位
- 对于值为0的属性，尽量不要加单位，增加兼容性

JS优化

减少前端代码耦合
- 使用传参的方法减少耦合
- 利用策略模式抽离公共组件、参数、封装请求
JS书写优化
- 按照强类型风格去写代码，指明变量类型和返回类型
- 字面量与局部变量的访问速度最快，数组元素和对象成员相对较慢

//bad
let num,str,obj;
//good
let num = 0;str = '',obj = null;//bad
getPrice:function(price){if (price < 0) {return false;}else {return price * 10}
}
//good
getPrice:function(price){if (price < 0) {return -1;}else {return price * 10}
}
//类型确定，解析器不会去做一些额外的的工作，类型不确定的情况下回发生优化回滚
//优化回滚：编译器已经编译完成函数，类型变化导致回滚到通用状态，重新生成函数

减少作用域查找

尽量少的不要让代码暴露在全局作用域下，变量从局部作用域到全局作用域的搜索过程越长速度越慢

//bad
<script>var map = document.querySelector('#imap');map.style.height = '10px';
</script>
//good
<script>!function() {var map = document.querySelector('#imap');map.style.height = '10px';}
</script>

- 对象嵌套的越深，读取速度就越慢
- 无意义的对象嵌套拖累读取速度
避免 == 的使用
- 确定类型的情况下直接使用 ===
合并表达式
- 用三目运算符代替简单的if-else

//bad
function getPrice(count){if(count < 0){return -1;}else {return count * 100;}
}
//good
function getPrice(count){return count <0 ? return -1 : count * 100;
}
//在进行代码压缩的时候，即时书写的是if-else，压缩工具也会帮你把它改成三目运算符的形式

使用ES6简化代码

使用箭头函数取代小函数

var num = [4,6,8,3,1,0]
//bad
num.sort(function (a,b){return a-b;
})
//good
num.sort(a,b => a-b);

字符串拼接

let url = `/list.html?page=${page}&type=${type}`;

块级作用域变量，使用let代替var

如有问题，请评论指正。码字不易，点个赞再走呗！

web的前端：一篇总结得超全的前端进阶文章！入门、技巧、方法、书籍、网站...zhuanlan.zhihu.com

作者：全栈道路
链接：https://juejin.im/post/6844904065688666119
来源：掘金

html修改原生checkbox选中的颜色_[三分钟小文]前端性能优化-HTML、CSS、JS部分相关推荐

需要某个字体包才能正确显示此页面_[三分钟小文]前端性能优化-页面加载速度优化...
本期内容请记住一个核心:JavaScript很快,DOM很慢阅读本文您将收获: 从用户输入URL到看得到页面的过程页面渲染过程在页面加载层级的性能优化用户看到页面之前都经历了什么这一部分是面 ...
防抖节流_防抖节流与前端性能优化
在我们日常的开发中经常会用到一些容易被反复触发的事件.比如:scroll.resize.鼠标事件(mousemove,mouseover等).键盘事件(keyup.keydown). 频繁触发回调导致 ...
dll文件懒加载_前端性能优化
# 前端性能优化写在最前面:下面都是我对webpack的一些性能优化,想系统的学习性能优化方面的知识推荐大家看看这本书很系统感觉面试也能如鱼得水 ## 构建优化 ### webpack优化 ( ...
前端服务器获取js文件偶尔慢_我所认识的前端性能优化
现象: 用户体验差网页太卡打不开(卡.慢) 服务器带宽流量(成本) 服务器压力从哪处理:各处的缓存地址缓存减少DNS的解析请求.预解析DNS(不是"解析DNS") TCP缓 ...
前端白屏问题_前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念.重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践. 一.概念白屏时间:即用户点击一个链接或打开浏览 ...
限制tomcat带宽_必看的Tomcat性能优化
在目前流行的互联网架构中,对一个应用来说,Tomcat是首,SSM是中,JVM是尾,我们通常对于SSM是比较了解的,而忽略了收尾,而Tomcat在目前的网络编程中是举足轻重的,但是我们其实对Tomca ...
html个人主页_前端性能优化实践之百度App个人主页优化
作者:潘铭 @祝余前言性能是每个前端工程师都应该关注的话题,通用的优化手段已有许多文章和实践,就不再赘述,本篇以百度App个人主页为例,聊聊针对业务特点进行的一些性能优化实践. 适用于:传统意义的 ...
前端性能优化不完全手册【已更新至React、原生JS懒加载和Nginx负载均衡】
性能优化是一门大学问,本文仅对个人一些积累知识的阐述,欢迎下面补充. 抛出一个问题,从输入url地址栏到所有内容显示到界面上做了哪些事? 1.浏览器向DNS服务器请求解析该 URL 中的域名所对应的 ...
Juniper 210 密码清不掉_三分钟学会如何找回mysql密码
一.在测试工作中我们肯定会写一些sq查询语句方便我们验证数据是否正确,从而判断当前软件是否存在缺陷,但是查询的过程中肯定需要我们先连接数据库,如果数据库密码忘记我们就无法完成工作,这里就教会大家如何快 ...

html修改原生checkbox选中的颜色_[三分钟小文]前端性能优化-HTML、CSS、JS部分

阅读本文您将收获：

为什么要进行性能优化

优化方向

HTML/CSS优化

JS优化

如有问题，请评论指正。码字不易，点个赞再走呗！

html修改原生checkbox选中的颜色_[三分钟小文]前端性能优化-HTML、CSS、JS部分相关推荐

最新文章

热门文章