杂乱的前端小知识

[LiuL0703]

HTML

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint

标准的盒子模型：盒子总宽度 =margin + border + padding + content W3C中的width = content

IE盒模型：盒子总宽度 = margin+content IE中盒模型的Width = border+padding+content

关于onInput() getComputedStyle()

onInput 属性实时监控< input> 或者中的value值得变化状况 Object.target.value.length 可以获取文本框中的字符长度 onInput事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 < keygen> 和 < select> 元素 。关于getComputedStyle() 与style直接获取元素的CSS属性值相比 style仅能获取内嵌在html代码中的css元素属性 而 getComputedStyle则都可以获取 但是是只读属性[针对IE的话要用currentStyle属性] 兼容一下的话： (element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height getPropertyValue方法可以获取CSS样式申明对象上的属性值(直接属性名) 例如：window.getComputedStyle(element, null).getPropertyValue("float");</p> </blockquote> <h4>事件委托</h4> <blockquote> <p>事件委托又叫事件代理 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件委托的原理：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件 举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件</p> </blockquote> <h1>CSS</h1> <p><strong>CSS Sprites</strong> </p> <blockquote> <p>一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；</p> </blockquote> <p><strong>屏幕分辨率</strong></p> <ul> <li>.col-xs- 超小屏幕 手机 <768px</li> <li>.col-sm- 小屏幕 平板 >=768px</li> <li>.col-md- 中等屏幕 >=992px</li> <li>.col-lg- 大屏幕 >1200px</li> </ul> <h1>JavaScript</h1> <p><strong>判断一个变量是不是对象非常简单。值类型的类型判断用typeof(Null除外)，引用类型的类型判断用instanceof</strong></p> <h4>var操作符</h4> <blockquote> <p>使用var操作符定义的变量将成为该变量的作用域中的局部变量，如果在函数中使用var定义一个变量，那么这个变量在函数退出后就会被销毁；省略var操作符会创建一个全局变量，但在局部作用域中定义的全局变量很难维护，也会由于相应变量不会马上就有定义而导致不必要的混乱，给未经声明的变量赋值在严格模式下会导致抛出Reference错误</p> </blockquote> <p><code>(function() { var a = b = 5; })(); console.log(b); console.log(a);</code></p> <p>输出：5 a is not defined</p> <h4>关于js中的类型判断</h4> <p><strong>数组：Array.isArray(arr) || Object.prototype.toString.call(arr) === '[object Array]'</strong> <strong>对象：typeof obj === 'function' || typeof obj === 'obj' && !!obj;</strong></p> <h4>严格模式的限制</h4> <ul> <li>变量必须声明后再使用</li> <li>函数的参数不能有同名属性，否则报错</li> <li>禁止this指向全局对象</li> <li>不能使用with语句</li> <li>增加了保留字</li> <li>arguments不会自动反映函数参数的变化</li> </ul> <h4>JavaScript小技巧</h4> <p>使用~~向下取整 类似与Math.floor();</p> <pre><code class="language-js">~~12.1 // 12 ~~12.7 //12</code></pre> <p><strong>数组去重</strong></p> <pre><code class="language-js">[...new Set(array)]</code></pre> <p><strong>数组中的最大值</strong></p> <pre><code class="language-js">Math.max(...[1,2,3,4,5]) // 5 Math.max.apply(null, [1,4,2,5,6,0,-2]) // 6</code></pre> <p><strong>数组中的最小值</strong></p> <pre><code class="language-js">Math.min.apply(null, [1,4,2,5,6,0,-2]) // -2</code></pre> <p><strong>判断IE</strong></p> <pre><code class="language-js">function detectIE() { var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); if (msie > 0) { // IE 10 or older => return version number return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); } var trident = ua.indexOf('Trident/'); if (trident > 0) { // IE 11 => return version number var rv = ua.indexOf('rv:'); return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); } var edge = ua.indexOf('Edge/'); if (edge > 0) { // Edge (IE 12+) => return version number return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); } // other browser return false; }</code></pre> <p><a rel="noreferrer nofollow" target="_blank" href="https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery#">Check if user is using IE</a></p> <h4>正则处理千分位格式化数字(不能处理带小数的)</h4> <pre><code>num.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,'); 1234567890..toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,') // "1,234,567,890"</code></pre> <p>或者利用toLocaleString Number.prototype.toLocaleString.call(num);</p> <h4>乱序</h4> <pre><code>const random = (arr)=>{ for(let i =1; i < arr.length; i++){ let random = ~~(Math.random()*(i+1)); [arr[i], arr[random]] = [arr[random], arr[i]]; } return arr; }</code></pre> <p><strong>判断一个对象是否为空</strong></p> <pre><code class="language-js">// because Object.keys(new Date()).length === 0; // we have to do some additional check Object.keys(obj).length === 0 && obj.constructor === Object</code></pre> <p><strong>实现一个sleep</strong></p> <pre><code class="language-js">function sleep(ms){ let template = new Promise((resolve)=>{ setTimeout(resolve,ms); }) return template; } sleep(1000).then(()=>{ // do someting })</code></pre> <h3>script defer vs async</h3> <p>defer不会阻塞HTML解析 HTML解析时并行下载JS文件，等到HTML解析完执行，defer会始终按照顺序执行 async可能阻塞HTML解析 HTML解析时并行下载JS文件，一旦下载完成立即执行，不一定按照顺序执行 <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/13818610/74342327-45f83c80-4de4-11ea-8b71-d7686a21d68b.png" alt="image" /></p> <h1>NetWork</h1> <h4>域名收敛</h4> <blockquote> <p>域名收敛即DNS优化</p> <ul> <li>PC 时代为了突破浏览器的域名并发限制。有了域名发散。</li> <li>浏览器有并发限制，是为了防止DDOS攻击。</li> <li>域名收敛：就是将静态资源放在一个域名下。减少DNS解析的开销。</li> <li>域名发散：是将静态资源放在多个子域名下，就可以多线程下载，提高并行度，使客户端加载静态资源更加迅速。</li> <li>域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端，提高性能，因为dns解析是是从后向前迭代解析，如果域名过多性能会下降，增加DNS的解析开销。</li> </ul> </blockquote> <h1>Browser</h1> <p><strong>DOMContentLoaded与load</strong></p> <blockquote> <p>从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成 页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发 将js文件放在尾部是为了减少First Paint的时间</p> </blockquote> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>