整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
我想死你们啦~
今天给大家带来前端面试必会问到的前端性能优化问题，暂定分三期给大家带来，第一期讲述基本的代码优化，后续还有网络传输层优化和页面加载速度优化，敬请期待，也欢迎点击查看原文了解更多前端小知识。
点关注，不迷路，我们一起咸鱼翻个身儿。
为什么要进行性能优化？
1.1、HTML/CSS优化
1、能用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;
}
2、自定义radio/checkbox样式
input[type=checkbox]{}
input[type=checkbox]:checked{}
3、巧用css伪类，合理使用原生选择器，如：:focus、@media、input[type=email]:invalid
4、使用全局样式sass、scss
5、优化HTML标签
//一个语义化的网页布局 <nav></nav> <header></header> <main> <section></section> <section></section> </main> <footer></footer>
6、不滥用高消耗的样式
7、选择器合并
8、 0值去单位
1.2、JS优化
1、减少前端代码耦合
2、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
}
}
//类型确定，解析器不会去做一些额外的的工作，类型不确定的情况下回发生优化回滚
//优化回滚：编译器已经编译完成函数，类型变化导致回滚到通用状态，重新生成函数
3、减少作用域查找
//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>
4、对象嵌套的越深，读取速度就越慢
5、避免 == 的使用
6、合并表达式
//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，压缩工具也会帮你把它改成三目运算符的形式
1.3、使用ES6简化代码
1、使用箭头函数取代小函数
var num = [4,6,8,3,1,0]
//bad
num.sort(function (a,b){
return a-b;
})
//good
num.sort(a,b => a-b);
```
* 使用ES6的class
```
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
addAge() {
this.age++;
}
setName(name) {
this.name = name;
}
}
2、字符串拼接
let url = `/list.html?page=${page}&type=${type}`;
3、块级作用域变量，使用let代替var
总结的内容到这里差不多就结束了，大多数来自工作中的一些总结和整理。文中若有不当之处，欢迎指出共同交流~~
orm表单复杂demo制作与涉及到的方法讲解，深入理解form基本属性与使用方法
天给大家带来的是新浪微博PC端的模拟登陆。
工具
这次使用的工具是Charles和chrome浏览器，看过我之前文章的同学应该知道我使用的Mac电脑，Fiddler不能用，之前用虚拟机很麻烦。很早的时候有装过Charles，但是不太会用，后来发现一篇比较详细的文章，忘了记录了。发现Charles还是非常好用的，而且有个很好的功能，就是可以开启多个Session进行抓取对比，这个功能非常，如果经常做爬虫调试的人一定能知道。我们抓取一个网站的登录过程，然后在模拟的过程中，可以再另一个session中抓取自己模拟登录的过程，然后对比一下自己的请求发送的数据和浏览器请求发送的数据是否一致。之前我调试一直都是通过打印查看，这样一方面很不方便，另外一方面打印也不完整。所以非常推荐大家使用Charles，网上破解也有很多。
Charles
打开Charles，要开启SSL代理抓取，这样才能抓取到HTTPS请求，毕竟现在很多网站都已经使用HTTPS请求了
HTTPS抓取设置
Host填*表示匹配所有网址，HTTP请求端口是80端口，HTTPS请求端口是443端口，设置好就可以开始抓取了。
抓取请求
打开chrome浏览器，最好清理缓存，然后使用隐身模式访问https://weibo.com/
打开隐身窗口
无痕模式
在网页上执行一遍登录操作
微博登录过程
抓取到登录过程后，我们就可以开始分析了，记住一定要清理缓存。我有好几次抓取都不一样，后来换了Safari浏览器（因为我很少用这个），其实这一步用什么浏览器都无所谓，chrome浏览器主要是用来调试JS用的。
过程分析
查找登录请求
登录一般url里面应该都会有login，而且是post请求，当然不排除其他方式。
https://login.sina.com.cn/sso/login.php?client=ssologin.js(v1.4.19)
登录请求url
找到登录请求后，这里主要关注Form表单信息，参数很多，我们需要先大概区分一下哪些可能是固定参数，哪些是变化的参数。
参数确定
一目了然可以看到那些是固定的了吧，这些所有的参数其实我们都是可以追根溯源的，但是没那个必要，在这种参数比较多的情况下，太费事了，可以采用多次抓取登录过程，对比请求参数的方式确定部分固定的或者不重要的参数，那么需要我们通过其他方式获取的参数有pcid、door、su、servertime、nonce、rsakv、sp、prelt，这里servertime比较有争议，一般看到这种time或者151开头的10位或者13位数字，都是时间戳，用time.time()获取就可以，但是这里是servertime，我们应该引起注意。
参数分析
下面我们一一来看这几个参数怎么获取
Base64是一种基于64个可打印字符来表示二进制数据的方法，哪64个字符呢？ A-Z、a-z、0-9和"+"、"/"，很多时候base64加密的字符串尾部为 1个或2个 "="， 因为它是把3个字节的二进制拼接，如果最后剩下一个，那么尾部就会添加2个=， 如果剩下两个，尾部就添加1个=，如果刚合适那当然就没有=了
推荐一个工具网站https://tool.lu/encdec/
image.png
使用编解码试试看，最终我发现是账号，而且是采用了url encode和base64编码，所有最终我们的su就是
image.png
执行登录请求
登录请求的所有参数都已经分析完了，登录后查看response数据
image.png
然后再看一下登录请求的下一个请求，发现是通过登录请求的返回值中的url，然后发送此请求
image.png
返回值中又出现了另外一个url，我们在下面也找到了，提取url发送请求
image.png
看到返回状态了吗？302重定向。发送请求以后查看一下response的url，发现是在它下面的请求地址
返回值和下面的请求好像有点关联，有下一个请求的参数。别急，先等等，我们就这样一直请求、提取请求、再请求，得有个终点吧，到哪里算一站呢。我们想想登录以后，显示一个页面有用户名。我们只要能得到这个用户名那就说明登录成功了。
image.png
这里看到了这个home请求中出现了我的用户昵称，然后上面那个请求的返回状态302，又是重定向。使用上面的方式确认一下。提取userdomain，然后拼接https://weibo.com/
image.png
成功了
*请认真填写需求信息，我们会在24小时内与您取得联系。
