随笔分类 -  Web前端性能优化

Webpack性能优化
摘要：Babel-loader ：转换ES6、ES7等JS新特性语法。 Css-loader：支持.css文件的加载和解析转换成commonjs对象 Style-loader：将样式通过<style>标签插入到head中 Less-loader ：将less文件转换成css Ts-loader：将TS转换 阅读全文
posted @ 2019-08-15 16:41 小辣条 阅读(293) 评论(0) 推荐(0)
七、SSR（服务端渲染）
摘要：使用框架的问题 下载Vue.js 执行Vue.js 生成HTML页面（首屏显示，依赖于vue.js的加载） 以前没有前端框架时，用jsp/php在服务器端进行数据的填充，发送给客户端就是已经填充好的数据的HTML。首屏就没有问题 现在尼，使用JQuery异步加载数据，使用React和Vue前端框架， 阅读全文
posted @ 2019-06-17 08:55 小辣条 阅读(204) 评论(0) 推荐(0)
六、浏览器存储
摘要：多种浏览器存储方式并存，如何选择？ Cookie 特点： 因为HTTP请求无状态，所以需要cookie去维持客户端状态 过期时间 expire cookie的生成方式(1. http response header中的set-cookie, 2. js中可以通过document.cookie可以读写 阅读全文
posted @ 2019-06-15 21:32 小辣条 阅读(233) 评论(0) 推荐(0)
五、重绘与回流
摘要：css性能让javascript变慢？ 会的，频繁触发重绘与回流，会导致UI频繁渲染，最终导致js变慢。 有两个线程：一个线程JavaScript解析，一个线程是UI渲染，这两个其实是互斥的两个线程。 当javascript 线程运行的时候 ui 线程则会中止暂停，反之亦然。 那这是为什么呢？ 原因 阅读全文
posted @ 2019-06-15 18:04 小辣条 阅读(481) 评论(0) 推荐(0)
四、懒加载与预加载
摘要：懒加载：图片进入可视区域之后请求图片资源 很多电商等图片很多，页面很长的业务场景适用。减少无效资源的加载。并发加载的资源过多会阻塞js的加载，影响网站的正常使用。 当进入可视区域将data-original中的url放入到src中。代码如下： 预加载：图片等静态资源在使用之前的提前请求 资源使用到时 阅读全文
posted @ 2019-06-15 15:59 小辣条 阅读(183) 评论(0) 推荐(0)
三、css 和 js 的装载与执行
摘要：一个网站在浏览器端是如何渲染的？ 一、html 页面加载渲染的过程。 请求回来最先应该是HTML，从一个字节流转换成字符流，浏览器拿到字符流，然后浏览器端进行相应的词法分析成相应的token，然后不断的通过next-token添加到DOM树中。然后有一些Link标签，浏览器并发的去请求一些CSS资源 阅读全文
posted @ 2019-06-15 15:01 小辣条 阅读(382) 评论(0) 推荐(0)
二、图片相关优化
摘要：图片类型： png8——256色支持透明，8比特 png24——2的24次方色，不支持透明，24比特 png32——2的24次方色，支持透明，32比特 png是无损压缩，JPEG是有损压缩，每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要。 不同格式图片常用的业务场景： jpg 阅读全文
posted @ 2019-06-15 12:04 小辣条 阅读(166) 评论(0) 推荐(0)
一、资源合并与压缩
摘要：在DNS方面？在浏览器层面甚至是路由器层面将DNS服务器相关的信息进行缓存，访问DNS的时间就可以缩短很多。 网络请求？使用CDN,解决了网络选择和缓存的问题，CDN是用于静态资源的，但是网络请求静态资源的时候还是会带上cookie，这时候的cookie其实是对网络的损耗，所以希望在请求静态资源的时 阅读全文
posted @ 2019-06-14 21:03 小辣条 阅读(366) 评论(0) 推荐(0)