web前端性能优化总结

1em=16px(但不完全是)

em会继承父元素的字体大小。
ie 部分浏览器不支持em。

rem继承根元素的字体大小html。 px和rem

vue里面用jq只能在mounted里面或者updata里面才可以原因是:dom已经挂载。


什么是web语义化有什么好处?

Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

web前端性能优化总结:
1、减少http请求,合理设置 HTTP缓存
2、使用浏览器缓存
3、在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。
4、CSS Sprites
5、LazyLoad Images
6、CSS放在页面最上部,javascript放在页面最下面
7、异步请求Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
8、减少cookie传输
9、CDN加速 CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存

性能优化的具体方法(way)
一)内容层面
1、DNS解析优化(DNS缓存、减少DNS查找、keep-alive、适当的主机域名)
2、避免重定向(/还是需要的)
3、切分到多个域名
4、杜绝404

网络传输阶段
1、减少传输过程中实体的大小
1)缓存
2)cookie优化
3)文件压缩(Accept-Encoding:g-zip)

2、减少请求的次数
1)文件适当的合并
2)雪碧图

3、异步加载(并发,requirejs)
4、预加载、延后加载、按需加载

渲染阶段
1、js放底部,css放顶部
2、减少重绘和回流
3、合理使用Viewport 等meta头部
4、减少dom节点
5、BigPipe

脚本执行阶段
1、缓存节点,尽量减少节点的查找
2、减少节点的操作(innerHTML)
3、避免无谓的循环,break、continue、return的适当使用
4、事件委托

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

原文地址:https://www.cnblogs.com/lhl66/p/7822624.html