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 这种后代得匹配需尽量少用
网友评论