LuckXinXin的博客

使用 Webpack 优化项目对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码优化图片，对于小图可以使用 base64 的方式写入文件中按照路由拆分代码，实现按需加载给打包出来的文件名添加哈希，实现浏览器缓存文件监控对于代码运行错误，通常的办法是使用 window.onerror 拦截报错。该方法能拦截到大部分的详细报错信息，但是也有例外对于跨域的代码运行错误会

图片优化对于如何优化图片，有 2 个思路减少像素点减少每个像素点能够显示的颜色图片加载优化不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片小图使用 base64格式将多个图标文件整合到一张图片中（雪碧图）选择正确的图片格式：对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 Web

懒执行懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒懒加载懒加载就是将不关键的资源延后加载懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实

可以通过预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染<link rel="prerender" href="http://poetries.com">预渲染虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户在之后打开，否则就白白浪费资源去渲染...

在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载<link rel="preload" href="http://example.com">预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好...

因为浏览器会有并发请求限制，在 HTTP / 1.1 时代，每个请求都需要建立和断开，消耗了好几个 RTT 时间，并且由于 TCP 慢启动的原因，加载体积大的文件会需要更多的时间在 HTTP / 2.0 中引入了多路复用，能够让多个请求使用同一个 TCP 链接，极大的加快了网页的加载速度。并且还支持 Header 压缩，进一步的减少了请求的数据大小...

缓存对于前端性能优化来说是个很重要的点，良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度通常浏览器缓存策略分为两种：强缓存和协商缓存强缓存实现强缓存可以通过两种响应头实现：Expires和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code为 200Expires: Wed, 22 Oct 2018 08:41:00 GMTExpires 是 HTTP / 1.0 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT.

DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP<link rel="dns-prefetch" href="//blog.poetries.top">