;

说明 使用 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日