-
;
Automated auditing, performance metrics, and best practices for the web https://github.com/GoogleChrome/lighthouse 1、在chrome开发者工具中使用lighthouse Lighthouse是直接集成到chrome开发者工具中的，位于‘Audits’面板下。 2、使用Node Cli npm install -g lighthouse lighthouse http://willless.com/
- Lighthouse前端性能优化测试工具 2020年4月9日
-
;
说明 使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。 为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。 基本形状 三角形 .triangle { width: 0; height: 0; border: 50px solid blue; /* 通过改变边框颜色，可以改变三角形的方向 */ border-color: blue transparent transparent transparent; } 梯形 .trapzoid { width: 40px; height: 100px; border: 50px solid blue; border-color: transparent transparent blue transparent; } 圆形 .circle{ width:100px; height:100px; border-radius:50%; background:blue; } 球体 .sphere { height: 200px; width: 200px; border-radius: 50%; background: radial-gradient(c…
- CSS 绘制各种形状 2020年1月10日
-
;
1.Airbnb JavaScript Style Guide https://github.com/airbnb/javascript/blob/master/README.md 2.http://youmightnotneedjquery.com/ 3.https://github.com/ryanmcdermott/clean-code-javascript
- 前端代码优化，代码风格 2020年1月10日
-
;
0.引言 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybrid APP的开发队伍中，性能这一问题又再一次被提上了程序员们重点关注的要素。我曾经看到过这样一句话：一个网站的体验，决定了用户是否愿意去了解网站的功能；而网站的功能，决定了用户是否会一票否决网站的体验。这是改版自网络上的一句流行语，但却把网站性能这件事说的十分透彻，特别是在网站这样的项目中，如果一个用户需要超过5s才能看见页面，他会毫不犹豫地关闭它。性能优化，作为工程师界的“上乘武功”，是我们在开发中老生常谈的话题，也是一名开发者从入门向资深进阶的必经阶段，虽然我们看到过很多的标准、军规，但在真正实践中，却常常力不从心，不知道落下了什么，不知道性能是否还有进一步优化的空间。 对于网站的性能，在行业内有很多既定的指标，但就以前端er而言，我们应该更加关注以下指标：白屏时间、首屏时间、整页时间、DNS时间、CPU占用率。而我之前自己搭建的一个网站（网址：http://jerryonlyzrj.com/resume/ ，近日因域名备案无法打开，几日后即恢复正常），完…
- 网站性能优化实战——从12.67s到1.06s的故事 2020年1月6日
-
;
一.路由懒加载 path:’index’, component:resolve=>require(@/abc,resolve) 二.引入外部CDN 1.src/main.js 各种import部分不变，css部分可以注释掉 2.build/webpack.base.conf.js output同级添加externals output:{}, externals:{ ‘vue’:’Vue’, ‘element-ui’:’ELEMENT’, ‘moment’:’moment’, ‘validator’:’validator’ } 注意事项： 1).cdn 版本的 element-ui 设置的全局变量是 ELEMENT 2).如果单独引入Element会报错，因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式 3.index.html <body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="http…
- vue打包后文件体积及加载速优化 2019年11月17日
-
;
如何让web页面更快，雅虎团队实践总结了7类35条规则，下面一一列出。 雅虎前端优化35条规则翻译 1. Content 1.1 Make Fewer HTTP Requests Minimize HTTP Requests减少/最小化 http 请求数。 到终端用户的响应时间80%花在前端：大部分用于下载组件（js/css/image/flash等等）。减少组件数就是减少渲染页面所需的http请求数。这是更快页面的关键。 减少组件数的一个方法就是简化页面设计。保持富内容的页面且能减少http请求，有以下几个技术： Combined files。合并文件，如合并js，合并css都能减少请求数。如果页面间脚本和样式差异很大，合并会更具挑战性。 CSS Sprites。雪碧图可以合并多个背景图片，通过background-image 和 background-position 来显示不同部分。 Image maps。合并多个图片到一个图片，一般用于如导航条。由于定义坐标的枯燥和易错，一般不推荐。 Inline images。使用data:url scheme来內连图片。 减少请求数是为第一次访问页面的用户提高性能的最重要的指导。 1.2 Reduce DNS Lookups 减少DNS查询。 就像电话簿，你在浏览器地址栏输入网址，通过DNS查询得…
- 雅虎前端优化35条规则 2019年10月1日