5.JavaScript优化及导航菜单背后的秘密

JavaScript优化及导航菜单背后的秘密 伍星

学习目标
1.进一步了解前端优化
学习如何编写良好的 JavaScirpt
2.通过导航的学习，了解JavaScirpt的应用
JavaScript在用户体验优化的实现中起着至关重要的作用
3.前端开发相关的工具和手段了解
了解JavaScript开发相关的工具和手段

目录 CONTENTS
1 回顾：HTML语义、CSS高级
2 编写高效的 JavaScript
3 认识导航菜单及其开发
4 导航菜单的性能加速
5 破解牛X导航菜单的秘密
5 JS的调试、压缩、混淆与破解

第一章：回顾：HTML语义、CSS高级
1 HTML语义
①网页的原理
人类看到的网页是文字和图片，计算机看到的网页是代码
②HTML语义
有些招聘要求："深刻理解WEB标准..."
③语义例子
如何才能便于计算机理解你的代码

<p><b>优才网</b>的目标是：造就全栈工程师、成就未来CTO</p>
<p><strong>优才网</strong>的目标是：造就全栈工程师、成就未来CTO</p>

<div>全栈工程师</div>与
<span style="display:block">全栈工程师</span>

选择题
哪个是予以花的HTML结构的好处？ C
A.样式丢失的时候能让页面呈现清晰的结构
B.便于不支持CSS的设备根据你的标记来"读"你的网页（比如盲人用的上网工具）
C.利于搜索引擎的爬虫抓取，爬虫依赖与语义标记来确定上下文和各个关键字的权重。
D.对浏览器兼容性更好
E.便于团队开发和维护

1 CSS渲染顺序
用一个例子来体验一下

html
head title "Web p..."
body div
h1 "Web p..."
p "This..."

1、渲染的顺序是从上到下
2、边下载边渲染
3、开启单独连接去取资源
4、后面的定义覆盖前面的
5、Reflow 和 Repaint

2 CSS渲染原理
浏览器如何渲染

页面渲染就是浏览器将HTML代码根据CSS定义的规则显示在浏览器窗口中的这个过程

得出三点CSS优化原则：
A、CSS放顶部
B、使用Sprite减少数据连接
C、JS的DOM操作优化原则

2 语言本身的注意事项
① 避免无意义的计算
②尽可能减少计算
③避免使用全局变量
④始终声明局部变量、无意识的全局变量是灾难

调试js "use strict"

④ 如何检测 isNaN
⑤ 了解坑、多少中 false, with 慎用？
⑥ 语句末最好加入分号
⑦ 字符窜拼接何为高效、没有固定范式

1 、 最大的性能问题，在于 DOM 操作
① 要使用高效的选择器
① 取 20000 次的对比
② 将选择器结果保存成为局部变量
① 取20000次的对比
③ 先操作再显示（想想渲染原理）
④ 先组装再附加到 DOM 上去
⑤减少页面 DOM 节点数
⑥ 将事件绑定与操作延迟