前端性能优化小结

1，减少页面加载时候得http请求

    首先项目中无用得图片或者视频 音频资源应 及时删除，页面中小图如 导航小图标 在线离线状态等可以整合成雪碧图。再者像页面得导航图标之类得 可以可用 字体图标 ，最后可以合并css 和js  当前前提是要保证页面得正常渲染和 js 逻辑得正常运行 ，不能一味得大锅炖合并

2，使用CDN 

    一些常用得插件和组件可以使用 正规得 稳定得cdn 地址来减轻自己服务器得压力

3，减少cookie得使用和注意其大小

 4，减少重绘（repaint）和回流（reflow）

    频繁触发重绘和回流，会导致UI得频繁渲染，最终导致页面加载缓慢和js得缓慢，回流必然会引起重绘，而重绘不一定会引起回流

当render树得一部分因为元素得尺寸 ，布局，隐藏等改变而需要重新构建，我们称之为回流

当render元素得需要更改一些属性如颜色等我们称之重绘

首先我要大致了解一下当浏览器得到页面之后得大致渲染过程

    1，解析HTML 构建DOM树（包括发起http请求来获取内容）

    2，解析css

    3，合并DOM树和css规则树 然后生成render 树

    4，布局render树 计算元素得大小，位置

    5，绘制render树 生成页面信息

构建CSSOM树时 浏览器会根据优先级从低到高得顺序来设置这个节点得属性，从全局属性开始   一直寻到这个元素得具体属性

所以需要注意得有

    1，将多次页面得样式改变合并为一次操作 如竟然避免一个页面 即有外部得css又有style 样式 还有行间属性 

    2，将某个元素需要频繁改动其位置时 可以设置其脱离文档流 从而不会影响其他元素

    3，队友一个有多个层次得dom节点 可以等构建完之后再插入页面中

    4，改变元素之前可以先设置display为none 然后等整个操作完再 设置display:none

    5,img标签可以先预设置其大小

5,删除不需要得脚本和尽量把脚本放在页面底部 

    脚本文件在下载时，在其下载完成、解析执行完毕之前，并不会下载任何其他的内容，因为浏览器并不知道脚本是否会操作页面的内容；其次，后面加载的脚本可能会依赖前面的脚本 ，如果并行下载，后面的脚本可能会先下载完并执行，产生错误。但是如果确定某个脚本不会操作页面 可以设置defer 来延迟脚本得执行，或者采用动态添加script 到页面

6，减少页面定时器得使用 和及时关闭定时器

7，注意某个元素得样式得命名

    因为浏览器时从右向左匹配选择符的，所以像#div>a 这种后代得匹配需尽量少用