HTML
关注
分享
扫一扫
sq-web
因为热爱，所以分享。自己日常总结，共同交流指正。
展开
-
优化js中的if/else结构
需求： 经常在代码中会有各种条件判断，导致if/else使用过多，不仅阅读麻烦，对于新加的条件，还不好扩展，文中列举了7中优化方案，可以根据实际代码环境选用。文中并没有列举switch，是因为switch结构使用上与is/else并无区别。1、提前return，可以将判断层级拉平let animal = 'cat'if (animal !== 'dog') { if (animal === 'cat') { console.log('测试') }}let animal = 'ca原创 2020-09-07 10:41:35 · 1161 阅读 · 0 评论 -
html2canvas保存图片模糊的问题
目标：将html页面元素转成base64格式的图片。问题：最初直接用的html2canvas官网的最新版代码，配置之后保存的图片模糊。解决方案：采用增加了dpi和scale两个选项之后的html2canvas源码，配置这两个参数能得到清晰的图片。源码地址：https://github.com/eKoopmans/html2canvas/tree/develop/dist代码配置：// testImgs是需要转换成图片的页面元素html2canvas(document.getElementById原创 2020-08-15 11:56:34 · 1231 阅读 · 0 评论 -
css性能优化总结
整理一下css优化相关的知识，看到后会慢慢补充。主要从以下三个方面进行总结：1、减少加载页面时候的数据传输量。2、提高页面渲染速度。3、css代码的可维护性。一、减少加载页面时候的数据传输量为了减少数据传输量，主要是减少css代码的体积，主要整理了以下几点：1、压缩css文件2、合并属性，样式复用，减少代码量3、移除空的css规则4、不声明多余的css样式，使用继承规则减少代码量5、关于display：display:inline后不应该再使用width、height、margin、padd原创 2020-08-04 20:39:59 · 422 阅读 · 0 评论 -
webpack配置项目-H5页面
起源：因为最近一直用jQuery写H5页面，觉得挺无聊的，想着用webpack配置一个项目来开发H5页面，就可以使用NPM无穷无尽的包了， 然后就可以随便浪了。基本步骤：一、初始化基本环境npm init 这个不多说，自己设置。npm install webpack webpack-cli --save-dev二、建index.html index.js webpack.config.js 文件，具体位置如下1、index.html 文件<!DOCTYPE html><原创 2020-07-06 11:24:35 · 1244 阅读 · 0 评论 -
H5页面适配移动端
基本概念基本概念来自于网上的博文，非原创，主要用于收藏，会在文末附上链接。在项目应用中目录中总结了日常用到过的适配方法。三个基本概念布局视口 ：布局视口是网页布局的基准窗口，在PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括borders 、margins、滚动条）。在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，但是非常小，用户可...转载 2020-05-07 10:36:32 · 1515 阅读 · 0 评论