原创 前端性能優化 雅虎軍規35條

如下爲雅虎軍規35條,對前端性能優化的總結: 1、儘量減少HTTP請求個數——須權衡 合併圖片(如css sprites,內置圖片使用數據)、合併CSS、JS,這一點很重要,但是要考慮合併後的文件體積。 2、使用CDN(內容分發網絡) 這

原创 原生實現call()、apply()、bind()

實現call()方法 Function.prototype.mycall = (context,...args) { // 判斷this是否函數,否返回typeerror if (typeof this !== 'fun

原创 Vue組件間通信的6種方式

1. props/$emit 父子組件通信 子組件通過 props接收父級傳遞的參數,通過$emit觸發父級方法,傳遞參數 子組件: <input type="text" :value="title"> <button @click="

原创 CSS代碼實現提示氣泡效果

項目中用到提示文字的氣泡效果 效果如下: 1. 直接使用美工設計好的背景圖(此處不講); 2.用CSS實現:     思路:     整體旅框通過border 設置;     三角部分先通過 before僞元素設置一個全綠三角,再通過a

原创 css 上中下三行佈局 4種方式

css 上中下三行佈局,上下高度固定,中間自動填充滿整個屏幕 的 4種方式 如下圖 另,左中右三列布局點這裏 1.absolute實現 <section class="top-bottom absolute"> <style

原创 element ui根據返回數據動態實現多項單選及回顯

效果如下,數據都是接口返回的, 思路: element-ui  的單選 <el-radio>標籤,可通過 v-model 綁定變量來設置默認值,但上圖這種效果,所有數據都是接口動態返回,不能預先在data中定義 每組單選 變量來設置默認

原创 CSS 左中右三列布局5種方式

CSS 左中右三列布局左右固定寬度,固定位置,中間自適應的5種方式 如圖: 另:上中下三行佈局點這裏 1.float佈局 左右分別float:left/right;中間撐開 <section class="layout float">

原创 百度前端面試題及答案

一、單選題(共25題,每題5分) 1.該正則可以匹配下列哪個字符串? /^sjm/ A、absjm B、phpsjm C、sjmphp D、phpsimd 2.新窗口打開網頁,用到以下哪個值()。 A、_self B、_blank C、_

原创 前端面試 頁面通信

1.什麼是同源策略及限制 同源策略限制從一個源加載的文檔或者腳本如何與來自另一個源的資源進行交互。 (請求協議、域名、端口不同,都算跨域) Cookie、LocalStorage和IndexDB無法讀取 DOM無法獲得 AJAX請求不能發

原创 前端面試 DOM事件

1.事件級別 DEMO0   element.οnclick=function() {}; DEMO1    element.addEventListener('click', function(){},false) DEMO2    e

原创 前端面試 HTTP協議類、GET和POST區別

1.http協議特點 簡單快速:URI 統一資源符是固定的 靈活: 無連接:連接一次就會斷開 無狀態:客戶端、服務端兩種身份 2.請求報文 請求行(http 方法,頁面地址,請求方法)、請求頭(參數key:value)、空行、請求體 3.

原创 JS面向對象 繼承的幾種方式

1. 藉助構造函數實現繼承 function Parent1() { this.name = 'Parent1'; } Parent1.prototype.say = function() { console.log(

原创 前端面試CSS篇(一)CSS盒子模型、BFC塊級格式化上下文、清除浮動

1. 基本概念:標準模型和IE模型 2.兩者區別? 標準模型的 寬和高,就是content的寬和高, 低版本IE模型的寬和高,包括了padding和border的寬和高 3.css如何設置這兩種模型? box-sizing: conte

原创 webpack4.0 使用 postcss-loader 的 autoprefixer無效,並沒有自動添加前綴

參考 webpack官網 配置 1. 安裝 npm i -D postcss-loader 再安裝 autoprefixer  npm install autoprefixer -D 2. 新建postcss.config.js文件(

原创 前端面試vue-router路由跳轉方式(傳參數)

詳見 vue-router官網 1.router-link 1.1 不傳參 <router-link :to="/home">跳轉</router-link> 1.2 傳參 <router-link :to="{name:'home'