引子

开年的一次面试中记录下来的知识欠缺点,发现这块的东西自己也只是零零散散的,不够系统。面试真的是查漏补缺的好地方,所以就买了一波性能相关的书籍,慢慢看,慢慢总结吧。这一波是记录一些纯js相关的性能提升,不涉及具体框架,纯纯的在写js中需要注意的性能优化点。这部分相关的笔记,大部分内容来自阅读《高性能JavaScript》。

JS 的加载和执行

基本上这是一个常识,js的加载和执行会阻塞页面的渲染和交互。很多浏览器甚至是用单一进程来处理的UI刷新和JS执行。所以我们在让页面加载的过程中需要注意避免让js的加载执行和浏览器的UI渲染冲突。下面就是一些解决方案:

脚本位置

浏览器在处理html的时候,是从上到下解析的。所以,在HTML上的标签位置决定了浏览器解析的先后顺序。为了解决JS与浏览器冲突,通常情况下,我们是将JS放在最后的:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 其他的html -->
<script src="http://hiluluke.cn/js/simple_build.js"></script> <!-- 将script放在最后,body前 -->
</body>
</html>

git 高阶用法

By hiluluke on

日常生活中的git

通常情况下,在进行git操作的时候,大家最熟悉的流程:

可能还有的同学也经常git commit --amend -C head,向上一个commit提交内容。
然而在日常生活中总会有一些其他对代码版本管理的需求,比如需要去修改很久之前的一个commit的内容等。

本文主要记录一些git相对使用较少,但是非常有用的命令。

git rebase

git rebase 有两个常用功能:

  • 从上游分支获取最新commit信息,并有机的将当前分支和上游分支进行合并。
  • 对当前分支的历史commit进行修改,合并,删除等操作

严格模式限制

By hiluluke on

js严格模式限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性,否则报错
  • 不能使用with语句
  • 不能对只读属性赋值,否则报错
  • 不能使用前缀0表示八进制数,否则报错
  • 不能删除不可删除的属性,否则报错

本文所涉及代码全在vue-cnode

文件结构

上图是我们demo项目的整体结构,我们可以看见在第三级有三个东西router,全局组件,功能组件。其中全局组件和功能组件是脱离于router的,因为这两部分是所有逻辑组件共有的。我们将他提出来,放在App.vue里面而不是放在router下面的路由组件中,是为了只引用一次然后全局调用。

但是,具体的路由逻辑组件需要展现的全局组件内容是不一样的,需要功能组件交互的内容也不一样,所以需要在不同的路由逻辑组件中对全局组件和功能组件进行控制。

本文就是介绍如何通过vuex对全局组件和功能组件进行控制的。

嗯,搞点大事情

记录一些大公司,高级前端工程师的前端优化经验总结,并尝试着做些实验,以后肯定用的上,当看到新的技能时,实时更新在这篇文章。

DNS预解析

我们请求资源时,通常都是一个URL,拿到正确的ip地址必须经过一步DNS解析。DNS预解析的作用是在到某个页面是提前解析了DNS。用法都是这样:

1
<link rel="dns-prefetch" href="hiluluke.cn">

在很多大厂,比如jd.com、taobao.com等的head部分你就能看见很多上面这样的link标签。
然而其使用方法,并不是像上面这样简单,具体的看这篇文章,本文不多做解释。