1、浏览器
1、渲染的重排与重绘
-
css属性读写分离： 如果要用js操作样式，尽量先读后写，避免读写交叉进行，一般最好不用js去操作样式。
-
通过操作class样式属性值： 通过切换class或者使用元素的style.csstext属性去批量操作元素样式.
-
DOM元素离线更新： 使用DocumentFragment。因为 DocumentFragment 不是真实DOM树的一部分，它的变化不会触发 DOM 树的（重新渲染) ，且不会导致性能等问题。
-
压缩DOM的深度： 一个渲染层内不要有过深的子元素，少用DOM完成页面样式，多使用伪元素。
-
图片渲染前指定大小： 因为img是内联元素，加载图片后会改变宽高，严重的会导致页面重排，渲染前指定图片大小或让其脱离文档流。
-
使用GPU加速(暂时没用到)： 对页面中可能发生大量重排重绘的元素单独触发渲染层，使用GPU分担CPU压力。一般我们会对动画元素采取硬件加速。
-
最好使用表示语义的名字：一个好的类名应该是描述他是什么而不是像什么
-
避免！important。
2、服务端配置强缓存和协商缓存避免二次请求资源(cache-control)。
3、weboack优化
- 1、压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码
- 2、 利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径
- 3、删除死代码（tree shaking），css需要使用Purify-CSS
- 4、 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
- 5、DllPlugin
使用DllPlugin可以减少基础模块编译次数，动态链接库插件，其原理是吧网页依赖的基础模块抽离出来打包到dll文件中，当需要导入的模块存在于某个dll中时，这个模块不再被打包，而是去dll中获取。在dll中大多包含的时常用的第三方模块，只要这些模块版本不升级，就只需要被编译一次。
- 6、happyPack开启多线程loader转换
-运行在node.js之上的webpack时单线程模型，也就是只能一个一个文件进行处理，不能并行处理，happypack可以将任务分解给多个子进程，最后将结果发给主进程，js是单线程模型，只能通过这种多线程的方式提高性能
3、CSS优化与性能提高
- 1、:减少css嵌套，最好不要套三层以上
- 2、:不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，前方嵌套完全是浪费性能。
- 3、:建立公共样式类，把长段相同样式提取出来作为公共类使用，比如我们常用的清除浮动，单行超出显示省略号等等等
- 4、:缩写css，其中包括缩写maigin，padding，颜色值等等，要是有两个或者两个以上的margin-****，写成margin: * * * *有助于文件大小。
- 5，减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些必须的东西是不能少的。
- 6，有些人喜欢在类名前面加上标签名：p.ty_p 来进行更加精确的定位，但是这样往往效率更差，类名应该在全局范围除非公用是唯一的，所以这种做法是应该便面的。
- 7，巧妙运用css的继承机制，在css中很多属性是可以继承的比如颜色字体等等，父节点定义了，子节点就无需定义。
- 8，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
- 9，不用css表达式，可能大家接触比较少，但是要记住的是无论我们怎么炫酷，到了最后都是静态的，所以表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的，因为它并不只是计算一次，一些小的事件可能都会增加它为了有效准确而进行计算求值的次数。
- 10，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的朋友可以选择normolize.css
- 11，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种十分实用的技巧，极大减少了http请求。
4、vue使用
5、提高首屏渲染ssr还没有部署
1、准备研究使用ssr服务端渲染，提高首屏渲染速度增强seo
